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:

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.

Optimize CSS delivery

This option addresses the PageSpeed recommendation:

Optimize CSS delivery

Our critical path CSS tool does not yet generate mobile-specific CSS. If you have a responsive theme, the critical CSS should be mostly the same, but if you have a separate mobile theme we cannot generate the CSS for that yet.

Generate Critical Path CSS

WP Rocket makes it as convenient as possible to handle advanced performance optimizations like asynchronous CSS and Critical Path CSS.

When you activate the Optimize CSS delivery setting checkbox, CSS will be loaded asynchronously on your site. Additionally, Critical Path CSS will be generated for your website in the background and added upon the next page load.

Our external tool will fetch the first entry of each public post type (posts, pages, products etc.), as well as public taxonomy archive pages (categories, tags, product categories etc.). It will extract Critical Path CSS for each of those page types separately, and send the code back to the WP Rocket plugin which will then add it to the respective pages as they are requested by a visitor, or the WP Rocket cache preloader.

Thus, Critical Path CSS generated by WP Rocket adheres to front-end features available on different types of pages on your website.

For example, if there’s a slider on your front page, the Critical Path CSS for that page will reflect that feature, while Critical Path CSS for a blog post may contain slightly different code.

When to Regenerate Critical Path CSS

When you make changes to stylesheets, or add/modify custom CSS via the WordPress Customizer (or a plugin), you should regenerate Critical Path CSS via the WP Rocket toolbar menu:

The Critical Path CSS Generator tool

A couple of notes on how our tool works: 

  1. Your site must be publicly accessible for the tool to work, that means it won't work for locally hosted sites. 
  2. Relative paths in images and fonts will be automatically changed to absolute URLs
  3. Critical Path CSS will be trimmed and minified with care. This means, any required spaces (like inside of calc() operations) or backslashes (like '\f311' for a glyph in an icon font) will be preserved.

Fallback Critical Path CSS

In cases where our tool cannot generate critical path CSS, you can use the fallback field to specify your own. This will be applied in any case where the critical css does not already exist.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 Fallback 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);

Exclude Files From Loading Asynchronously

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