Render Blocking CSS in the footer of the HTML ?

[ceco...@gmail.com]

Hello everyone, I'encountering a strange situation and i don't know what to make of it.  

I'm used to getting a score of around 95 for websites i make, so i know how to deal with all the pagespeed insights recommendations.

For my latest website i managed to get a score of 96/100, everything was fine. After a couple of days i run another test and it dropped to 70/100.

Nothing was changed between then, not even a comma.

The pagespeed reccomendation that is causing this is "

Eliminate render-blocking JavaScript and CSS in above-the-fold content"

but here is the strange part, the css files that it is pointing to, are all in the end of html (just before the </body>) so they are deferred. 

I'm either missing something or it really is something strange.

there are 5 css files (2 of them are google fonts) this is what they look like.

<link rel='stylesheet' property='stylesheet' id='style-css-css'  href='http://mydomain.com/style.min.css' type='text/css' media='all' />

Thanks in advance. 

[Joshua Marantz]

In the mark-up you describe, browsers may render the content above your link tags without waiting for the bottom-loaded CSS to be fetched and parsed, or they may block for the css to be loaded.  It depends on the timing of how your html streams through the network.

To ensure that your web page fully renders without waiting for your low priority CSS to load, please try the techniques suggested in OptimizeCSSDelivery.

Make sure you have a clear picture of which CSS files are critical, and which are non-critical.  The critical CSS should be inlined into the head, and the non-critical-css delay loaded *after* the body, not at the bottom of the body.

As described in the help article, there are tools to help you do this.

Josh

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/e1ddde7a-91e4-4b95-9740-9875beca9e38%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[ceco...@gmail.com]

Thank for explaining it, it makes more sense to me now. 

I though by throwing everything in the end of the html would eliminate the PSI "Render Blocking" Error, but apparently what it means is that the content above the fold has not fully rendered because critical styles are in deferred files.

That is a little confusing as at the same time because the error was saying "optimze css deliver for 5 files", but I guess its just throwing all the css files at you and you have to figure it out. 

Anyway, I moved 1 CSS line from the stylesheet in to the head and pagespeed is back to 96/100 

Thanks for the help man!

 

On Tuesday, August 2, 2016 at 4:14:17 PM UTC+3, Joshua Marantz wrote:

In the mark-up you describe, browsers may render the content above your link tags without waiting for the bottom-loaded CSS to be fetched and parsed, or they may block for the css to be loaded.  It depends on the timing of how your html streams through the network.

To ensure that your web page fully renders without waiting for your low priority CSS to load, please try the techniques suggested in OptimizeCSSDelivery.

Make sure you have a clear picture of which CSS files are critical, and which are non-critical.  The critical CSS should be inlined into the head, and the non-critical-css delay loaded *after* the body, not at the bottom of the body.

As described in the help article, there are tools to help you do this.

Josh

On Aug 2, 2016 6:02 AM, <ceco...@gmail.com> wrote:

Hello everyone, I'encountering a strange situation and i don't know what to make of it.  

I'm used to getting a score of around 95 for websites i make, so i know how to deal with all the pagespeed insights recommendations.

For my latest website i managed to get a score of 96/100, everything was fine. After a couple of days i run another test and it dropped to 70/100.

Nothing was changed between then, not even a comma.

The pagespeed reccomendation that is causing this is "

Eliminate render-blocking JavaScript and CSS in above-the-fold content"

but here is the strange part, the css files that it is pointing to, are all in the end of html (just before the </body>) so they are deferred. 

I'm either missing something or it really is something strange.

there are 5 css files (2 of them are google fonts) this is what they look like.

<link rel='stylesheet' property='stylesheet' id='style-css-css'  href='http://mydomain.com/style.min.css' type='text/css' media='all' />

Thanks in advance. 

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-discuss+unsub...@googlegroups.com.

[Rick Steinwand]

You can use loadCSS to defer loading of your other scripts: https://github.com/filamentgroup/loadCSS

[ceco...@gmail.com]

Thanks, that's interesting, i digged  around a bit and found this

https://github.com/pocketjoso/penthouse

It automates the separation for the critical CSS and defers the rest with loadCSS and other modules.

[Rick Steinwand]

I've always used this one, but it doesn't remove the critical from the post-loaded sheet: https://jonassebastianohlsson.com/criticalpathcssgenerator/

[Rick Steinwand]

Penthouse is the same author as my link.

[Eddie]

Actually the link i was meant to share was this, 

https://github.com/addyosmani/critical-path-css-tools

Penthouse is just one module from the list. 

On Tue, Aug 9, 2016 at 5:34 PM, Rick Steinwand <colc...@702com.net> wrote:

Penthouse is the same author as my link.

--
You received this message because you are subscribed to a topic in the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pagespeed-insights-discuss/_fLhXy1s44w/unsubscribe.
To unsubscribe from this group and all its topics, send an email to pagespeed-insights-discuss+unsub...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/5e8a5ae9-247b-45b0-b157-973e75b820cd%40googlegroups.com.