6

As 93% of my visitors use mobile devices, it is crucial for me to have a page that loads fast. In order to get some recommendation, I tested my page with PageSpeed Insights tool. One of the finding made me worry.

Recommendation: Defer unused CSS

…v154…/styles__ltr.css(www.gstatic.com), 89 KB -> 1,05s

I'm really concerned about that 1s. Is there anything I can do on my end? Recaptcha is important component to me so I don't want to simply get rid of it. Any suggestions/recommendations appreciated!

Thanks.

Kuba
  • 161
  • 2
  • 7
  • 1
    This is usually pretty difficult to work around. Basically what google wants you to do is to have only the CSS required for the content above the fold loaded at the top of the document. The other CSS can be loaded later as it's not required right there and then. The issue is that if you're using any kind of framework or CMS you will struggle to separate your styles like this. In my opinion, having lean CSS that has been properly minified is enough for optimisation. – Dale Jan 19 '19 at 12:11

1 Answers1

1

My personal technique to deal with the Defer unused CSS is to defer the css, and inline the critical style needed above the fold.

to defer the CSS, here is one easy way to do it. How to load CSS Asynchronously

This method will satisfy PSI by deferring CSS loading, but if content being styled by that CSS is something the user will see when they load first load the page, you don't want them to see unstyled content.

So for this you add the style that is needed above fold in a tag. You can extract above the fold critcal css, using handy tools like https://jonassebastianohlsson.com/criticalpathcssgenerator/. or https://www.sitelocity.com/critical-path-css-generator

The first one allows you specify the exact style to extract the critical style from, while the second downloads all the CSS for the site. Use the one that best suits your needs.

Learn more about above the fold content: https://whatis.techtarget.com/definition/above-the-fold

oreoorbitz
  • 109
  • 1
  • 4