Defer unused CSS

  • Resolved Pratham

    (@pratham2003)


    7 years, 6 months ago

    The following trick used in the plugin no longer works with PageSpeed insights after lighthouse update.

    <link
rel=preload as=style media=all href=https://healthyy.net/wp-content/cache/autoptimize/css/autoptimize_8953127733f97ebe1a9e07e3e8b69faa.css onload="this.onload=null;this.rel='stylesheet'"><noscript
id=aonoscrcss><link
rel=stylesheet type=text/css href=https://healthyy.net/wp-content/cache/minify/6ce7d.css media=all>
</noscript>

    https://i.imgur.com/C61lIbR.png

    Found a solution that works, please refer to : https://stackoverflow.com/questions/54500814/defer-unused-css/54522493#54522493

    • This topic was modified 7 years, 6 months ago by Pratham.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    7 years, 6 months ago

    interesting … will look into this 🙂

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    7 years, 6 months ago

    it seems as though google rolled their recent changes back, scores are back to where they were before the weekend?

    Thread Starter Pratham

    (@pratham2003)

    7 years, 6 months ago

    I believe it was an issue CloudFlare or PageSpeed insights itself?
    Do you have any reference to announcement or change log that PageSpeed insights had made any changes? Please share.

    CloudFlare issue is less likely because 3 of the client websites I tested, 2 are on CloudFlare but 3rd one is not on CloudFlare or other CDN but their scores were impacted too.

    I noticed the CSS file was shown larger for one client (non-gzip). See the screenshot I had shared earlier.

    View post on imgur.com


    I had tested this and the file was being gzipped properly.

    Scores are back to normal today but the defer unused CSS issue persists.

    Their (pagespeed’s) idea behind this is if you don’t require certain CSS to render a page, defer it. If it’s required to render above the fold content, preload it.

    Critical CSS in HTML + Deferred loading CSS in the way I shared on stackoverflow solves both issues and also addresses your concern about ‘if a visitor scrolls down below the fold, we should load the CSS ASAP’.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    7 years, 6 months ago

    Their (pagespeed’s) idea behind this is if you don’t require certain CSS to render a page, defer it. If it’s required to render above the fold content, preload it.

    Critical CSS in HTML + Deferred loading CSS in the way I shared on stackoverflow solves both issues and also addresses your concern about ‘if a visitor scrolls down below the fold, we should load the CSS ASAP’.

    correct, but I’d like this to be addressed in Filamentsgroup loadCSS (which AO uses and which Google mentions themselves). I updated an issue I created there back in Nov, feel free to chime in! 🙂

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Defer unused CSS’ is closed to new replies.