Defer unused CSS, Page Speed insights, recaptcha

Question

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.

Answer 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