Delay JavaScript Execution

🚀  This guide refers to  WP Rocket 3.9.
If you are using WP  Rocket 3.7 or 3.8, please see this guide

In this article

What does it do?

Delay JavaScript Execution improves performance by delaying the loading of all JavaScript files and inline scripts until there is a user interaction (e.g. moving the mouse over the page, touching the screen, scrolling, pressing a key, scrolling with the mouse wheel). 

It’s like LazyLoad, but for JavaScript files. 

This optimization will improve the following recommendations in PageSpeed: 

  • Remove unused JavaScript
  • Minimize Main thread work
  • Reduce JavaScript Execution time
  • Total blocking time
  • Time to Interactive
  • First contentful paint

And may improve other Core Web Vitals as well.

You will find it on the File Optimization tab:

How does it work?

  • This optimization is applied only on cached or optimized pages.
  • It is enabled by default when you first install and activate WP Rocket
  • Combine JS will be disabled when using this option, to ensure scripts are loaded in the correct order
  • All scripts that are present in the HTML of the page, will be delayed. Any scripts which are inserted after the page loads, or fetched indirectly from another script, cannot be delayed.

Updating to WP Rocket 3.9 from previous versions / New installations of WP Rocket

The previous version of this option relied on an inclusion list, that is, you added the scripts you wanted to delay. From version 3.9 the logic is reversed. So, when updating from 3.7 or 3.8 with Delay JS enabled, or when you enable the feature in WP Rocket 3.9.0.5 or later, everything will be delayed by default and only desired exclusions will need to be entered.  This provides the best results for performance.

Troubleshooting

If anything breaks while using this option, you can exclude files or inline scripts by adding file URLs or keywords in the "Excluded JavaScript Files" text area.

Default Exclusions

To quickly resolve issues remove any existing exclusions, add the default exclusions, and check if the issue is resolved:

(?:wp-content|wp-includes)(.*)
/jquery-?[0-9.]*(.min|.slim|.slim.min)?.js
js-(before|after)

Specific Exclusions

To target specific scripts to exclude, choose a unique keyword or string of text from either the filename or script you need to exclude and enter it in the exclusion field. 

To identify the original file URLs, make sure that you are looking at the uncached version of the page.


Examples

Excluding a file

/wp-content/plugins/gravityforms/js/gravityforms.min.js?ver=2.4.23

To specify only this file, the following will work: 

gravityforms/js/gravityforms.min.js

Removing the version number is recommended so that the file will still be excluded if it changes. 

Excluding multiple files

Excluding multiple files can be done in one of two ways. To exclude all files under /gravityforms/js/, use either of the following:

1. The exclusion method detects keywords, not just filepaths, so the simplest method is to use:

/wp-content/plugins/gravityforms/js/

2. Wildcards can also be used: 

/wp-content/plugins/gravityforms/js/(.*).js

Excluding an inline script

To exclude an inline script, choose a string of text that is unique to that script.

 <script type="text/javascript">
        (function () {
            var c = document.body.className;
            c = c.replace(/woocommerce-no-js/, 'woocommerce-js');
            document.body.className = c;
        })()
    </script>

In this example, /woocommerce-no-js/ is a good choice, since it should be specific to this script. 

Excluding an external script

To exclude an external script, choose the file name rather than the domain name.

 <script src="https://hb.vntsm.com/v3/live/ad-manager.min.js" type="text/javascript">

In this example,  /ad-manager.min.js is the string to target. 

The reason why the file name should be targeted rather than the domain name is that when Minify JavaScript is enabled, and the script is not excluded, the minified file name won't have the domain name on it. Which will result in the JavaScript file not getting excluded from Delay JavaScript Execution if the domain name is the string you target.  

In this example, targeting  hb.vntsm.com won't work.

Common Issues

We have identified that some plugins/themes/services require excluding specific inline JavaScript/files to work. See if you are using one of them and exclude any files mentioned for that in our doc:
Delay JavaScript Execution compatibility exclusions.

If your theme/plugin/service isn't listed there our article will help you identify the specific error and can point out what needs to be excluded.

Lazyload for Images

Some themes provide their own version of the lazyload feature for images. Or you may be using a 3rd-party plugin to apply lazyload.
When the Delay JavaScript Execution feature is enabled, images may not be displayed at all or may require a user to interact with the page for them to become visible.

In such cases, we recommend disabling the theme's/3rd-party plugin's lazy load feature and use WP Rocket's lazyload instead.

We automatically exclude Smush and EWWW's lazyload features. If you are using either of these plugins, you don't need to disable their lazyload.

Preloaders

Preloaders are a feature some themes/plugins offer to hide the content of a page until that's fully rendered - usually, a spinner/loader icon is displayed.

With the new Delay JavaScript Execution implementation, the loader will continue to spin up until a user interacts with the page. To be able to delay all files, you'll need to disable the preloader option in your theme.
This is also better for the user experience since visitors will be able to see a page's content earlier.

How to check if delaying is working

In the gif below you will see that only one JavaScript file is loaded initially (wp-embed-min is automatically excluded from this feature).
After mousing over the page, all the other JavaScript files then load.

Technical notes

  • This feature is not compatible with IE 11. Visitors using IE11 will be redirected to an uncached version of the page, with the query string ?nowprocket=1 appended to the URL.
    Those URLs will appear to the site's analytics. You can read more about this in our doc
  • On all Javascript, either with a src attribute or not, a type="rocketlazyloadscript" attribute will be added. This fake type value prevents the script from being executed by the browser.
  • If a script already has a type value, it will be copied in a data-rocket-type attribute to be preserved
  • The delay script adds a preload for all scripts with a src attribute, to make sure they are ready for the user interaction.
  • On user interaction, our delay script either removes the fake type, or replaces it with the original one, and the browser executes all scripts.
  • The delay script is built to preserve the order and priority of the scripts on the page, taking into account attributes like defer and async
  • As we discover conflicts we will maintain a list of automatic exclusions.
  • The JavaScript will be executed when any of these interactions are detected:
    • keydown: event is fired when a key is pressed.
    • mouseover: event is fired at document (page) when a pointing device (such as a mouse or trackpad) is used to move the cursor onto it.
    • touchmove: event is fired when one or more touch points are moved along the touch surface.
    • touchstart: event is fired when one or more touch points are placed on the touch surface.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.