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.

How critical CSS is generated

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.

Relative paths in images and fonts will be automatically changed to absolute URLs. 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.

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

Troubleshooting critical CSS generation errors

Basic requirements for the generation tool to work:

  1. Your site must be publicly accessible for the tool to work, that means it won't work for locally hosted sites or sites blocked from the public by htaccess authentication, "maintenance mode" plugins or similar. 
  2. These IPs have to be whitelisted by your server, firewall or security plugin :
    • 54.37.31.6
    • 167.114.226.142
  3. WP-cron or a real server-side cron job must be able to run.

Error notices

If it’s not possible for our tool to generate the critical path CSS for any content type on your site, you will see a notice with the details. 

Some errors can be temporary, so it’s worth trying the generation again. If the issues persist, please proceed with the troubleshooting below. 

If you get any error message on every content type (see screenshot below as an example), it’s likely our tool is being blocked by your site. Please make sure your site is publicly accessible and our IP addresses have been whitelisted in any security plugin or firewall. 

Find which URL is accessed per content type

Our tool accesses the most recent URL for each content type on your site. If you see an error for a specific content type, you can find out which specific URL is being accessed:

  • Install and activate this helper plugin: WP Rocket | CPCSS Debug Helper
  • Go to: Settings > CPCSS Helper
  • There you will see which URL we’re accessing for each content type
  • Visit the problematic URLs to check if they are valid pages.

Invalid response code

Our external tool sends a request to a page on your site. If it does not receive a 200 “OK” response, you will see an error with the response.

The most common reasons are:

  • The URL is not publicly accessible, e.g. it 404s
  • A security layer on your site is blocking access - this often results in a 400 or 403 error. 

URL unreachable

This error notice will display the specific URL(s) that the tool cannot access.

  • Visit the URL in your browser to ensure it’s accessible.
    • If it is, it’s likely being blocked by a security firewall or plugin, so please whitelist our IPs.
  • If the URL results in a 404 error, or any other error prevents it displaying in your browser, that means our tool will not be able to reach it either.
    • Resolve the issue with that page and try the generation again.
  • If it’s for a post type that has not been declared to be public, it will not work. Some post types are not designed to be visible on the front end of your website. For example, post types that manage affiliate links. A post type may be used to manage each link, but they are not viewable as a webpage since they redirect elsewhere. 

No valid stylesheets available

You could see this message if:

  • There aren’t any stylesheets added within <link> tags.
  • The linked stylesheets are empty
  • There’s only Inline CSS on your site. The tool does not use existing inline CSS when generating the critical path since it could result in duplicated CSS.

CloudFlare protection prevents the service from accessing the website

  • Whitelist the IP addresses of our tool in Cloudflare (or any other similar firewall service)

An error prevents the generator from retrieving its contents

Sometimes this error can be temporary, try it again.

If the error persists it could be related to a timeout on the page:

  • There’s a 30 second timeout on specific file requests
  • There’s a 1 minute timeout on the page as a whole

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:
  3. 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);
    	

    To ensure that your Fallback CSS continues to be used, and isn't overidden by our automatic generation you should also: 

  4. Delete any existing files in the /wp-content/cache/critical-css/1 folder.
  5. Activate the "No Auto-generated Critical CSS" helper plugin (found above)

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"
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.