Delay JavaScript execution

Still seeing the Reduce unused JavaScript audit in PageSpeed?

You may be excluding too many scripts from being delayed, please consider reducing the exclusions to prioritize performance as per this.

Delay JavaScript execution is the most powerful JavaScript optimization WP Rocket has. It delays the execution of scripts to prioritize the rendering of the site. This article contains details of what it does, a troubleshooting section and the technical notes.

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 can help improve the following recommendations in PageSpeed: 

• Remove unused JavaScript
• Minimize Main thread work
• Reduce JavaScript Execution time
• Total blocking time
• 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.
• The Combine JavaScript files feature 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.

Note: the combination of JavaScript from other plugins/themes needs to be disabled when using the Delay JavaScript execution; otherwise, this could cause display issues.

Troubleshoot

If anything breaks while using this option, you can exclude scripts in three ways:

• Checking the boxes of the plugins, themes or services within the "One-click exclusions" section.
• Adding file URLs or keywords in the "Excluded JavaScript Files" text area.
  
  You can find the right files to exclude by following the steps in the Troubleshoot Delay JavaScript execution issues article.
• Programmatically by adding the nowprocket attribute to inline scripts or scripts in external files.
  
  The following example script tags will be excluded from being delayed:
  
  

<script nowprocket src='https://yourdomain.com/wp-content/themes/script.js'></script>
	

<script nowprocket><br>	function myFunction() {<br>	// Some code<br>}<br></script>
	

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, so it loads right away).

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.
• The src attribute is replaced by a data-rocket-src attribute, its value is preserved.
• The data-rocket-status parameter will be added to inline and JavaScript files. Its value will be executed when the script was delayed and executed as expected, and failed when the script wasn't executed by some reason.
• In Chrome and Safari, inline scripts will have a src="data:text/javascript;base64,... attribute, used to speed up the processing of the script after it was delayed.
• 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
• 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.