Eliminate render blocking resources

What does Eliminate render blocking resources mean?

Before the browser can display (render) a web page, it has to read its HTML. During this process, whenever the browser encounters a reference to a script (JavaScript), or stylesheet (CSS file), it has to stop, request the file, wait for it to download from the server, and execute it before it finally can continue. 

The result is a delay in the display of the content to the visitor, during which time the page may appear blank or incomplete. 

Eliminating render-blocking resources is essential to minimize this delay so the page can load and display content as soon as possible.

How WP Rocket can help

WP Rocket has options that can help with render-blocking JavaScript and CSS.

Render blocking JavaScript

The Load JavaScript deferred feature in WP Rocket should help eliminate the render-blocking JavaScript on your website by adding the “defer” tag in each script tag.

You’ll find this feature under Dashboard → WP Rocket → Settings → File Optimization →  Load JavaScript Deferred.

Render blocking CSS

Using either of the following WP Rocket features should help remove render-blocking CSS: 

• Remove Unused CSS - This is the recommended method for best performance
• Load CSS Asynchronously

PageSpeed is still flagging jquery.js on render-blocking.

If jquery.js is being flagged under  “Eliminate Render Blocking Resources” it means that the file is being excluded from our Load JavaScript Deferred in this field:

Remove the line and make sure that your website is working fine. If so, the recommendation will be satisfied.

If you don’t find the exclusion there, it means it’s being excluded automatically as part of compatibility. That means that the site would break otherwise. 

Not a WP Rocket customer yet?
Read our article about How to eliminate render-blocking resources on WordPress and learn how to address this PageSpeed Insights recommendation with and without a plugin.