Render-blocking Javascript and CSS - PageSpeed

Note: For further information on PageSpeed Insights and why you should not bother chasing a “grade” please read this docs article: Google Page Speed Grade does not Improve

One of the problems with the Google PageSpeed Insights is that some of the suggestions it makes are either impossible, or unrealistic.

A common recommendation it makes is to:

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

It typically then provides 2 parts to this recommendation:


”Remove render-blocking JavaScript”

It is preferable for performance that JavaScript files are loaded in the footer of your site, or asynchronously so that they don’t block the downloading of other assets on your site, therefore slowing it down. But what Google does not take into consideration is that sometimes it’s not possible to load everything in the footer.

If you have activated JS minification in WP Rocket, as of v2.6 we auto-detect whether JS files should be loaded in the header or the footer, based on how their developer enqueued them.

So if you are seeing the "remove render-blocking JavaScript" notice, it means that some JS files are still being loaded in the header. But this may have been intentional on the part of the theme or plugin developer. Sometimes when you move JavaScript files from the header to the footer, you can actually break functionality on your website.

So, if you want to improve your PageSpeed score you can try to use this option in the Advanced options of WP Rocket: "JS files to be included in the footer during the minification process" and enter the original, full urls of your JS files.

Or if you are not minifying the files but just want to defer the loading you can use the option:
"JS files with deferred loading"

If this doesn’t break any functionality on your site, it may help your pagespeed score.

Also remember to test the effect on the speed of your site.


”Optimize CSS Delivery of the following URLs”

WP Rocket does not have an option to load CSS in the footer, because it would cause your site to load without any styles, making it look broken and providing a terrible user experience.

Google suggests you can ”Optimize CSS delivery”. You can read all of the details of what they mean by this here:
Optimize CSS Delivery

Essentially they want you to separate out the CSS needed to render the first part of your page and embed it directly into the code of your page, rather than in the main stylesheet.

Unless you have advanced coding skills, this is pretty hard to do and involves re-coding parts of your theme. It will also vary from site to site, so it is not something that can be made into a one-click solution in a caching plugin.

If you are a developer, or have one at your disposal you can ask them to implement this technique. It won’t necessarily improve the overall load time of your page, but it will increase your page speed score, and may appear to load faster because the elements at the top of the page will load sooner. This type of micro-optimization is utilized by sites like Amazon where a 10ms difference may impact their bottom line. For most small sites, it is unlikely to have much impact.