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 docs article:
 Google PageSpeed Grade does not Improve

In this article

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:

  • Optimize CSS delivery
  • Load JavaScript deferred

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. 

Optimize CSS delivery

This option addresses the PageSpeed recommendation:

Optimize CSS delivery

Heads up! The critical 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 CSS

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

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

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 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 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 CSS for that page will reflect that feature, while critical CSS for a blog post may contain slightly different code.

When to Regenerate critical CSS

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

Critical CSS will be automatically regenerated when you: 

  • Enable the Optimize CSS delivery option
  • Switch themes

The Critical 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. These IPs have to be whitelisted by your server or your security plugin :
    • 54.37.31.6
    • 167.114.226.142
  3. Relative paths in images and fonts will be automatically changed to absolute URLs
  4. Critical 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.

Prevent automatic generation of Critical CSS

You may prevent any automatic generation of critical CSS by installing the following helper plugin.

📥   Download (.zip):  WP Rocket | No Auto-generated Critical CSS
Developers: You can find the code for this plugin on GitHub.

Edit the generated Critical CSS

If you would like to edit the critical CSS generated by our tool, follow these steps:

  1. Use the tool to automatically generate critical CSS for your site.
  2. Disable automatic generation in the future by adding the helper plugin above.
  3. The generated CSS files are stored on your server: wp-content/cache/critical-css
    If you are a developer and understand CSS, you may edit those directly.
  4. Clear the WP Rocket cache

Fallback Critical CSS

In cases where our tool cannot generate critical 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 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

Load JavaScript 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, thereby slowing it down. 

By enabling this option, all the JavaScript files on your page, 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 from 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, however those notices are “false positives”. If your site requires render-blocking jQuery to function correctly, disabling Safe Mode may make the PageSpeed notice disappear, but it will break functionality on your site.

Files that will not have defer applied

The defer attribute will not be applied to elements that already have either of the following attributes:

  • async
  • data-cfasync="false"