Eliminate render-blocking resources

[Forsh]

I am testing my website on Google Page Speed tool and one of the recommendations it's giving me is to "Eliminate render-blocking resources" and that's in the attached JPG. Is there a plugin or setting inside of Joomla that could fix this? It's the number one issue the tool is telling me to fix and the file it's talking about is at the bottom, the CSS file.

eliminate-render-blocking-resources.png

[waarnemer]

Google page speed gives automated advice without taking other settings into account.
Google page speed "sees" a site as static as it receives a page.

Interesting though that when I check your page in the same test tool, this particular "issue" seems solved.

Your link to the css file is in between the <noscript></noscript> tags so if my browser doesn't support scripts I get that one... if I do support I get it injected into the head through the bottom .js
Exactly same css...

Jokingly acccording to page speed you need to minify your minified css file .. I mean.. don't go hunting all advices from Page Speed.. check against all other improvements done and also consider that all that is cached in a browser doesn't need to get requested again.

All you put in the rendered page directly has usually no to little cache as the PHP rendered page is dynamic.

[joni londo]

try use defer attribute to the tag
example : <link rel="stylesheet" href="styles.css" defer>

[sozzled]

Try use defer attribute to the tag
example : <link rel="stylesheet" href="styles.css" defer>

I've never heard of a "defer" attribute used with CSS. I have seen the defer attribute used with script tags. One way to defer loading CSS below the fold is to use the following syntax:

Code: Select all

<link rel="preload" as="style" href='mycssfile.css'>

There are other ways that involve using Javascript to defer loading the CSS.

The syntax

Code: Select all

<link rel="preload" as="style" href='mycssfile.css'>

can also be used with other content types (e.g. image, video, document). See https://developer.mozilla.org/en-US/doc ... ng_content

I don't know if all browsers support this tag.

[helpwithjoomla]

As mentioned in the Page Speed recommendations you could add the css inline in the document rather than calling in a separate css file.

You basically take all the css out of the css file and put it in the head of your document(s).

We've had good results with this approach.

[waarnemer]

there is no gain from adding all your css in the head of your document as it will add to the payload each call to a page (since virtually every page render is dynamic there is no browser cache on that)

same applies to optimizers that press all page css and js files in one single cssand js.. server resource heavy and each css and js a page is different.

"advice" from google page speed and alikes is not always good and hardly ever best advice.
it merely hints to possible solutions of problems you may have.. but unfortunately also offers solutions to problems you don't have.

page speed and alikes do measure initial first load of a page without browser cache.
in 999 out of 1000 they are testing on some server far far far away from your target audience computers...