Load JavaScript deferred

Still seeing the Eliminate render-blocking resources audit in PageSpeed?

It's possible you're excluding critical scripts from getting deferred, please consider reducing the exclusions to prioritize performance.

When the Load JavaScript deferred feature is enabled, the browser will render the page and load the scripts later on. This article contains more information on the feature, a section to resolve common problems, and the technical notes.

You can enable it from the File Optimization tab, as shown below:

What does Load JavaScript deferred do?

This option helps with the Eliminate Render Blocking Resources PageSpeed recommendation.

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.
• The custom data-rocket-defer attribute, to identify WP Rocket as the originator of this optimization.

As shown below:

<script src="https://example.com/wp-content/webpack.runtime.min.js" id="webpack-runtime-js" data-rocket-defer defer></script>
<script src="https://example.com/wp-includes/js/jquery/jquery.min.js" id="jquery-core-js" data-rocket-defer defer></script>
<script src="https://example.com/wp-includes/js/jquery/jquery-migrate.min.js" id="jquery-migrate-js" data-rocket-defer defer></script>
<script src="https://example.com/js/frontend-modules.min.js" id="frontend-modules-js" data-rocket-defer defer></script>

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.

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.

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 $(,