Delay JavaScript Execution

🚀 Available from WP Rocket 3.7

In this article

Delay JavaScript Execution improves performance by delaying the loading of JavaScript files until there is a user interaction (e.g. moving the mouse over the page, touching the screen, scrolling, pressing a key). This optimization is applied only on cached or optimized pages.

Delaying JavaScript will improve your PageSpeed score and initial load time but it is an advanced option and should be used with care!

When you activate the option you will see a pre-tested list of JS files that are automatically delayed. View the complete list here.

You may not be using all these on your site. No worries, you can leave them there, unless one of them causes an issue. 

If your site is using one of these scripts, you're automatically getting improved performance just by enabling the option.

Clicking the Restore Defaults button will restore this list in case you edit it and want to revert.

How to add more scripts to delay

HEADS UP! You should only delay JS files that are not required to  display anything "above the fold"

Files to delay must be entered with the original, un-optimized URLs. So you should check your page while caching is not active, or when bypassing WP Rocket, to get the correct URLs.

You can add new files and scripts to be delayed by adding a keyword or unique string of text that identifies the script.  The keyword can be any string of text within the script tag. Try to use a pattern specific to the script and not something that could be found elsewhere on the page.

Example

To delay this file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js"></script>

You could enter the full URL: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js

Or, a unique part of it: bootstrap.js

You may also enter just the domain, but make sure to remove the HTTP part:

Correct:  cdnjs.cloudflare.com

Incorrect: https://cdnjs.cloudflare.com

Wildcards will not work in this field. 

Scripts entered will be automatically excluded from other file optimizations.

Check your site

After enabling this option, especially after customizing the list of files to display, make sure your site is working as expected.

  • Visit your site while logged-out of WordPress, or in an incognito window to check that everything is functioning correctly. 
  • Check your browser console to make sure there are no new JavaScript errors.

Which scripts should be delayed?

One way to discover candidates for delaying is to run a PageSpeed test while bypassing WP Rocket (add ?nowprocket to the end of your URL).

Check the files mentioned in the following recommendations for possible candidates:

  • Reduce JavaScript Execution time
  • Reduce the impact of 3rd party code
  • Remove Unused JavaScript

Delaying files mentioned in these sections would improve the score, but that doesn't mean they are safe to delay.

Which files are safe to delay?

It's hard to predict with 100% accuracy if a file can be safely delayed or not. You will have to do some trial and error.

If you delay any file you must also delay any associated inline script: 

Test with Request Blocking

In your browser's Network tab, it's possible to block any file from loading.

  • Filter the list to show JavaScript files
  • Right-click on a file and choose Block URL (Firefox) or Block Request URL (Chrome)

  • Reload the page
  • Is the visible part of the page displaying correctly and functional?
    • If so, the file should be safe to delay.
    • If not, it shouldn't be delayed.

How to check if files are correctly delayed

When testing this, make sure your mouse is not resting on the page when you load it - this will count as an interaction!

Below is a quick gif to demonstrate. Note:

  1. The file I've delayed is: /includes/js/scripts.js
  2. Keep an eye on the Network tab at the bottom. On initial page load, scripts.js is not loaded
  3. As my mouse (look for the blue circle at the bottom of the screen) moves onto the page (this is an interaction), the scripts.js file pops into the Network tab

Technical notes

  • If your JavaScript uses these events - window.onload or DOMContentLoaded they should not be delayed.
  • If you see a console error function not defined after delaying scripts, it means there's an issue such as a dependent script that also needs to be delayed.
  • External scripts: in the source code of the page, WP Rocket will replace the src attribute of external scripts with our unique data attribute data-rocketlazyloadscript
  • Inline scripts: WP Rocket will get the inline JS and encode it with base64 encoding then put this encoded string in the data attribute data-rocketlazyloadscript
  • We then use JavaScript code to detect the user interaction and then replace our data attribute data-rocketlazyloadscript with src so it will be executed.
  • 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.