⚠️ This guide is specific to WP Rocket versions 3.7 and 3.8.
In this article
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.
To delay this file:
You could enter the full URL:
Or, a unique part of it:
You may also enter just the domain, but make sure to remove the HTTP part:
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.
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 the impact of 3rd party code
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.
- 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:
- The file I've delayed is:
- Keep an eye on the Network tab at the bottom. On initial page load,
scripts.jsis not loaded
- As my mouse (look for the blue circle at the bottom of the screen) moves onto the page (this is an interaction), the
scripts.jsfile pops into the Network tab
DOMContentLoadedthey should not be delayed.
- If you see a console error
function not definedafter 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
srcattribute of external scripts with our unique data attribute
- Inline scripts: WP Rocket will get the inline JS and encode it with base64 encoding then put this encoded string in the data attribute
srcso it will be executed.
- 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.