4

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.'

cag8f
  • 817
  • 1
  • 10
  • 33

3 Answers3

3

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 )

Prayag Verma
  • 5,581
  • 3
  • 30
  • 56
  • Remove styles that are not used in the page or in "above the fold"? – Peter Svegrup Mar 05 '19 at 22:42
  • @PeterSvegrup This recommendation is for all the unused styles on the page and is not limited to critical CSS aka if there is inlined "above the fold" CSS present on the page & some of it is not required, then this recommendation will include that as well – Prayag Verma Mar 06 '19 at 11:58
  • @PrayagVerma OK thanks for pointing out that GitHub issue. I see the pull request has already been merged. So am I correct then that we will see the title of this 'opportunity' change the next time Lighthouse is updated? – cag8f Mar 07 '19 at 07:59
  • @cag8f Currently the 4.2 release label (https://github.com/GoogleChrome/lighthouse/labels/4.2) hasn't been added to the merged PR. Therefore we will have to wait and see in which upcoming release this change is integrated – Prayag Verma Mar 07 '19 at 12:36
0

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!

Peter Svegrup
  • 154
  • 1
  • 9
  • To be clear, with PageSpeed Insights, this 'Defer unused CSS' section appears on both my desktop report and my mobile report. Can I ask why moving the stylesheets before `

    ` will help, especially if they are already loaded asynchronously? Seems like that shouldn't matter? Unless I am misunderstanding something. Thanks for the kind words about my site.

     – cag8f Mar 07 '19 at 08:18
0

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.

Diego Hellin
  • 1