Load JavaScript deferred

In this Article

WP Rocket 3.8+

What does Load JavaScript Deferred do?

This option addresses the PageSpeed recommendation:

“Eliminate render-blocking resources”

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 Load JavaScript deferred, all the JavaScript files on your page, including those minified by WP Rocket, will be loaded with the defer attribute:

This includes scripts loaded with a src even if they don’t have a .js extension.

We also look for all inline scripts related to jQuery, and we defer them as well. This provides better compatibility so that jquery.js can be deferred in more cases.

This will further improve your PageSpeed score.

Resolving Problems

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, but in some cases it may be necessary to preserve functionality.

Safe Mode: Only applicable for versions older than 3.8

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

In addition to the default jQuery file loaded by WordPress, we also detect jQuery loaded by the following external sources and these will be automatically excluded by Safe Mode:

  • JetPack
  • ajax.googleapis.com
  • cdnjs.cloudflare.com
  • code.jquery.com

GTmetrix - Defer parsing of JavaScript

When you run a GTmetrix test you may find that it doesn't give you a perfect score for this recommendation, even when Load JavaScript Deferred is activated. Here are the most common reasons. To see if this applies to your site, make sure you click on the recommendation to reveal the list of files.

Files excluded for compatibility

  • Any files you had to exclude for compatibility will be flagged by GTmetrix
  • jquery.js
    If you have enabled Safe Mode, jQuery.js is excluded to prevent issues on your site. You can try disabling Safe Mode, but make sure you check your site carefully while logged out of WordPress, to make sure everything is working as expected on your site.

  • https://www.google.com/recaptcha/api.js
    We automatically exclude this Google Recaptcha file to prevent an issue. 
  • There are a few other automatic exclusions we make to prevent known issues when deferred. List of excluded files
  • Scripts that include the following tags will not have defer applied:
    • async
    • data-cfasync="false"

Files injected by Cloudflare

If you've activated certain options in Cloudflare they will inject some JS files when the page loads. We don't have control over them and they won't be deferred. For example, if you've activated their Email Address Obfuscation feature, you'll find this file listed by GT Metrix:

  • cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js

Files loaded indirectly

Only files that are present in the HTML of the page when it loads will have the defer tag applied to them. In some cases one JS file will create a chain in which it loads yet another JS file which cannot then not be deferred. Common examples:
  • Google Recaptcha files, e.g: https://www.gstatic.com/recaptcha/releases/wk6lx42JIeYmEAQSHndnyT8Q/recaptcha__en.js
  • Youtube files, e.g:
  • https://www.youtube.com/yts/jsbin/www-embed-player-vfl4oVEZe/www-embed-player.js
  • https://www.youtube.com/yts/jsbin/player-vflzQZbt7/en_US/base.js

Files without a .js extension

This only affects WP Rocket versions prior to 3.8:

Files must have a .js extension to be deferred. Common examples of files flagged by GT Metrix, without the .js extension:

  • Google Maps files, e.g. https://maps.googleapis.com/maps/api/js?key=

Technical Notes

To make it possible to defer jquery.js, WP Rocket looks for inline scripts that require it, and they are deferred.

We wrap them with the following code:

window.addEventListener('DOMContentLoaded', function() { wrapped_script });

Technically the inline scripts are not “deferred” - you won’t see the defer tag. But this executes the scripts later, on DOMContentLoaded.

We ignore, i.e. don’t defer inline scripts that:

  • contain DOMContentLoaded or document\\.write
  • don't contain jQuery or $.( or $(,

Updating from previous versions

Before WP Rocket version 3.8, only JavaScript files with a .js extension were deferred and inline scripts weren’t. This could cause problems when jquery.js was deferred, but was needed by inline scripts. The Safe Mode option was designed to easily solve that problem.

In 3.8, inline scripts referencing jQuery will also be deferred (technically it's not deferring but executing them at a later point in the page load), which means jquery.js can also be deferred in more cases. So the Safe Mode option isn’t needed any more and we have removed it.

If you updated from a previous version of WP Rocket and were using the Safe Mode option, you will see that the jQuery exclusion is preserved with the following pattern:

To see if your site can benefit from the update, remove this line: 

/jquery-?[0-9.]*(.min|.slim|.slim.min)?.js

Then check your site carefully in a logged-out/incognito browser window to make sure everything is functioning correctly, and there aren't any new JavaScript errors.

If you find any “jquery not defined” errors, add the exclusion back into the settings and press save.

In addition to the default jQuery file loaded by WordPress, this pattern also detects and excludes jQuery loaded by the following external sources:

  • JetPack
  • ajax.googleapis.com
  • cdnjs.cloudflare.com
  • code.jquery.com

If you still need to exclude jquery.js or any other file, now you can do it directly from the plugin settings, instead of using a helper plugin.

On fresh installations of WP Rocket, jQuery will be deferred by default.

These changes should lead to: 

  • Better overall compatibility and fewer issues 
  • More JavaScript is deferred, so your PageSpeed score should improve.

Other changes to this option in WP Rocket 3.8

  • Scripts without a .js extension are now deferred (they weren't before)
  • The Safe Mode option to exclude jquery.js has been removed, as noted above
  • Exclusions can now be done in the plugin settings instead of requiring a helper plugin.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.