Render blocking CSS since AO 2.0

google pagespeed insights tends to get it wrong sometimes (as AJ@wpfaster will certainly confirm ?? ), but there was one small change in the JS that loads the CSS, tomake sure cloudflare leaves that JS alone.

So … what you could try is remove that data-cfasync='false' and see if it improves your GPI-score (which would logically only be possible if you use cloudflare’s rocket thingie)?

frank

I don’t :). It doesen’t make a difference.

In addition I have also been pointed out that google’s remarketing code ( conversion.js ) is also causing render blocking as of late.

Do you by any change have an 1.9.x copy of AO laying about somewhere so i could test the version if its in fact AO or actually new changes made by google?

sure, you can download 1.9.4 here. all releases are archived on www.ads-software.com, cfr. this page.

frank

Hi folks,

@msthunder1,

For a real world appraisal of what’s going on with your website in terms of actual performance always use WebPageTest.org.

Google’s PageSpeed Insights — which is a basic best practices tool, not a real world performance testing platform — sometimes does not recognize anything other than the RequestAnimationFrame method of deferring noncritical CSS. The irony of this is that Frank’s solution is superior in that it fires the remaining CSS at domContentLoaded instead of at onload.

This said, PageSpeed Insights doesn’t always get it wrong either. So, and again, to see what’s really going on use WebPageTest.org and base your performance optimization decisions on those real world tests.

Be well,
AJ

Hi,

thanks for jumping in. I’m aware of google’s limitations when talking about real-time evaluations, they are mentioned almost everywhere when talking about page speed. But afaik, i’m having people check on the site via the Google’s PageSpeed Insights; i don’t have enough arguments to say that they should stop doing this on GPI and use a different speed test, cause google don’t know what they’re doing. ??
Also they care about indexing, if i recall google favors mobile-friendly websites more than non mobile-friendly, so i cannot walk around the GPI test.

The version 1.9.4 gives the same result. I can’t pinpoint what changed that cause the score to fall.

One thing comes to mind though – what if everything is above-the-fold? Like when you have an entrance page that’s 100% w&h. Could this cause the issue with render blocking CSS? Cause technically, if everything is above the fold, it has to load everything regardless?

@msthunder1,

[…] afaik, i’m having people check on the site via the Google’s PageSpeed Insights; i don’t have enough arguments to say that they should stop doing this on GPI

You now have the only one you really need cf. my initial reply. ??

As I am doing here, all you can do is attempt to enlighten others such that they can then begin to exorcise themselves of the Internet mythology that has sprung up around PSI.

and use a different speed test,

One gets a speed ‘grade’ but PageSpeed Insights is not a speed test per se. It is by definition and purpose a basic best practices tool; one that provides insights into performance items that will likely improve key user experience centered performance metrics. Unlike WebPageTest.org — which is Google’s real world performance testing platform — PSI issues no performance metrics at all. And so to get those and to see what’s really going on Google provides WebPageTest.org.

cause google don’t know what they’re doing. ??

One must use the right tool for the job, as they say. That PSI does not always recognize alternate means by which to defer noncritical CSS does not mean that one ought not use PSI for what it is (a best practices tool). Conversely, it does not mean that PSI should be used to assess real world performance.

Also they care about indexing, if i recall google favors mobile-friendly websites more than non mobile-friendly, so i cannot walk around the GPI test.

Whether or not one’s noncritical CSS is in reality deferred and whether or not one has a mobile friendly website are mutually exclusive matters.

One thing comes to mind though – what if everything is above-the-fold? Like when you have an entrance page that’s 100% w&h. Could this cause the issue with render blocking CSS? Cause technically, if everything is above the fold, it has to load everything regardless?

Are you able to share the URL, msthunder1?

Be well,
AJ

if everything is above the fold, it has to load everything regardless?

On the contrary; if you have your inline CSS styling everything above the fold, then technically/ theoretically you wouldn’t even have to load the deferred CSS. How cool is that?

But given

The version 1.9.4 gives the same result.

I’m going to mark this as resolved as this confirms this isn’t a regression in AO 2.0.x ??

frank

@ AJ @ WpFASTER.org

The speed evaluations – it’s a political matter of the customer.

In addition to the site that i sent you, i’ve now noticed a second site having the same CSS “render blocking” issues. Take a look, maybe you’ll find something that i’m overlooking:

https://www.scoopandspoon.com/

Hello msthunder1,

The speed evaluations – it’s a political matter of the customer.

I’m not sure what this means or what you sell but two things: 1.) As stated earlier, one gets a speed ‘grade’ but PageSpeed Insights is not a speed evaluation — it measures precisely nothing, no metrics are given. PageSpeed Insights is by definition and purpose a basic best practices tool; 2.) if it is performance optimization services you sell you might consider educating your customers to this reality and steering them in the direction of what is best for their website and its users. Which isn’t always the highest grades on any given best practices tool but is always the most performant website for its real users. As counterintuitive as it is these are often two very different things.

i’ve now noticed a second site having the same CSS “render blocking” issues. Take a look, maybe you’ll find something that i’m overlooking: https://www.scoopandspoon.com/

As you can see here in any one of these real world tests, the concatenated CSS file is in fact loaded after domContentLoaded: https://www.webpagetest.org/result/160404_HV_Z4X/

The website certainly has performance issues but render blocking CSS isn’t one of them.

In other words the issue is not that this website’s CSS is render blocking but that PSI is falsely reporting that it is. Not incidentally, this is a good example of why you must use the right tool for the job otherwise you’ll end up chasing vapor trying to please a synthetic tool instead of your customer’s best interests.

Be well,
AJ