Render-blocking JavaScript and CSS (PageSpeed)

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!

You may see the following recommendation from Google PageSpeed Insights:

“Eliminate render-blocking resources”

WP Rocket has 2 options to address this PageSpeed recommendation:

These are considered advanced optimizations, so take care with them and check your site after enabling them.

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.