CODEWITHSUNDEEP
cssoptimizationpagespeedpagespeed-insights
cag8f
cag8f

Reputation: 968

Why doesn’t loading a CSS file asynchronously resolve PageSpeed’s ‘Defer unused CSS’ entry?

In the PageSpeed Insights report for my site (site here), it lists 'Defer unused CSS' as an opportunity. I am unclear on what exactly I need to do to resolve this. I have already ensured that each CSS file in the list is loaded with a <link rel="preload"> tag, which ensures the file is loaded asynchronously (screenshots). I even used loadCSS to do this, per Google's instructions. Why does this not resolve 'Defer unused CSS?' It sounds like that is exactly what I have done.

I am reasonably sure the CSS files are being loaded asynchronously, because PageSpeed Insights no longer reports them in the "Eliminate render-blocking resources" section (it did so before).

I've seen this previous Stack Overflow question. That question doesn't have an accepted answer, plus I believe my question is a little different. In that question, OP is asking how to resolve 'Defer unused CSS.' I am specifically asking why rel=preload does not resolve 'Defer unused CSS.'

Upvotes: 4

Views: 1342

Answers (3)

Diego Hellin
Diego Hellin

Reputation: 1

The preload and defer uses onload javascript, so.. maybe are you using a noscript tag?

Pagespeed looks like parses the tag, and shows the message you get.

Upvotes: 0

Prayag Verma
Prayag Verma

Reputation: 5651

To resolve this issue, you will need to completely remove CSS rules which are not used in the page. Asynchronously loading CSS files will not help with resolving this issue

Hence, there is ambiguity with the naming of this recommendation which leads to confusion. This has been discussed in the issue - https://github.com/GoogleChrome/lighthouse/issues/6588

I agree with the issue author; I also see many people who read this label (ever since Google Pagespeed Insights started using Lighthouse) as that they still have render blocking CSS, when they don't (since this warning shows for any css, async or not, that is not used on the page). It gets worse because the page you link to for further info talks more about render-blocking and critical css than it does about "removing unused CSS". It also uses "Defer" in a the more typical sense (load async, not remove from page).

To resolve this confusion, Lighthouse team has decided to rename this recommendation as Remove unused CSS in upcoming releases ( Refer to https://github.com/GoogleChrome/lighthouse/pull/7235 )

Upvotes: 3

Peter Svegrup
Peter Svegrup

Reputation: 154

First of all my experience is that results vary and for Mobile it may take some time for your efforts to pay back in the score. Desktop was responding quickly to the work I did but it took days before Defer offscreen images "worked" on Mobile.

For your page specifically I would extract the critical css for above the fold styling and move all stylesheets to just before </body>, keeping the Filament Group loadCSS method you have in place. I'm not fluent in WP so I can't say anything further on how to achieve that but a googling should solve that in no-time.

Please let me know if I can be of more help. From a quick glance on the site, I like what you do!

Upvotes: 0

Related Questions