Render-blocking Javascript and CSS (PageSpeed)

Note: For further information on Google PageSpeed Insights and why you should not bother chasing a "grade" please read this guide:
Google PageSpeed Grade does not Improve

What is render-blocking JavaScript and CSS?

Before the browser can display a web page, it has to render its HTML. During this process, whenever the browser encounters an element that references a script, or stylesheet, it has to stop, request the file, wait for it to download from the server, and execute it before it finally can continue parsing the HTML. With most WordPress themes and plugins loading not only one, but multiple CSS and/or JavaScript files, this process can delay the time to first render of the page quite significantly.

Therefore it is recommended to delay (“defer”) the loading of non-critical files until the browser is done rendering the page. This requires adjustments to the HTML source of a page itself, as well as intimate knowledge of which file is required at what point during the rendering process. Sounds tricky? It sure is!

Nonetheless, tools like Google PageSpeed Insights makes it sound so easy:

“Eliminate render-blocking JavaScript and CSS in above-the-fold content”

Like many of PageSpeed Insights’ suggestions, this one is quite generic, and can be hard to implement—even with a streamlined plugin like WP Rocket!

WP Rocket has 2 options to address the PageSpeed recommendation:

You can find them in the Files Optimization tab, under CSS Files and JavaScript Files:

By enabling these options you may see an improvement in your performance grade on GTmetrix, Pingdom Tools, and Google PageSpeed Insights. Results will vary from site to site. Always remember to test the effect on the speed of your site. 


Critical CSS Generation Errors

Please see our guide on troubleshooting errors with the generation of critical CSS

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.