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 PageSpeed Grade does not Improve

Many of the suggestions that Google PageSpeed Insights are generic and can be hard to implement. A common recommendation it makes is to:

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

WP Rocket has 2 options to address this recommendation. You will find them in the Static Files tab, under Render-blocking CSS/JS:

By enabling these options you may see an improvement in your PageSpeed score or GT Metrix/Pingdom grade. Results will vary from site to site. Always remember to test the effect on the speed of your site. 


Load JS files deferred

This option addresses the PageSpeed recommendation:

“Remove render-blocking JavaScript”

It is preferable for performance that JavaScript files are either loaded in the footer of your site, or deferred so that they don’t block the downloading of other assets on your site, therefore slowing it down. 

By enabling this option, all your JS files, including those minified by WP Rocket, will be loaded with the defer attribute:

If you have any issues on your site after activating this option, you may need to activate Safe Mode, which excludes jQuery from being deferred, for compatibility reasons:

Depending on your site, you may also need to exclude some more files from being deferred:
 Exclude files for Defer JS

Note that Google does not take into consideration that sometimes it’s not possible to defer all JavaScript – at least not without breaking your site. Any files you exclude from deferring will cause PageSpeed to complain; there is nothing you can do about that!

Legacy options: If you were previously using the Advanced options JS files with deferred loading or JS files to be included in the footer during the minification process, then you will still see those options when you update to WP Rocket 2.10.x. However, those options will be deprecated in a future version so we recommend you use the new Load JS files deferred option instead; it replaces the need for those previous options.

Load CSS files asynchronously

WP Rocket’s option to load CSS files asynchronously addresses the PageSpeed recommendation:

Optimize CSS delivery

Heads up! This is considered an advanced option. It may require manual tweaking to get right.

Loading CSS asynchronously means that your page will start to load and be viewable, without all its CSS styles. That means it could look a little strange for a few moments while loading:

This is called the FOUC: Flash of un-styled content. To avoid this, you must use what is called Critical Path CSS. This means that the CSS for the content at the top of your page must be placed directly in the HTML to avoid the FOUC while the page loads.

Generate Critical Path CSS

To generate the necessary CSS you can use this  Critical Path CSS Generator tool:

1
Turn off WP Rocket before you start using the tool!
2
Enter your URL in the tool and copy the generated CSS into the Critical path CSS field in WP Rocket:
Note: You do not need any JavaScript snippet provided by the tool. Just copy the CSS into WP Rocket’s settings, it will take care of the JS part automatically.

Heads up! You may have to edit any relative URLs in the code (e.g. for background images, fonts etc.) and turn them into absolute URLs manually.

For example, if the generated CSS contains a relative reference to a font, like this:

@font-face{font-family:droid_serifregular;src:url(../DroidSerif-webfont.eot);

The relative path (indicated by ../ in the URL) will not be correct when removed from its original context. Therefore you need to replace it with the absolute, correct path, for example:

@font-face{font-family:droid_serifregular;src:url(http://example.com/wp-content/themes/neutro/font/droid_serif_regular/DroidSerif-webfont.eot);

If you need to exclude a specific CSS file from being loaded asynchronously, follow this guide:
 Exclude files from Async CSS