Welcome to the W3 Total Cache Pro Delay Scripts feature guide. This feature helps improve your website’s performance by delaying the loading of JavaScript resources, thereby eliminating render-blocking issues and boosting your Google PageSpeed scores. In this guide, we’ll walk you through how to use Delay Scripts effectively for optimizing your website’s performance. Let’s dive into the details and get started<\/p>\n\t \n\t

\n\t\t

\n\t\t\t+14<\/span>\n\t\t\tPoints<\/span>\n\t\t<\/div>\n\t\t

\n\t\t\t

In this test, using the Delay Scripts feature alone added +14 points for a 26% increase on mobile devices to the Google PageSpeed Performance score<\/strong>! Review the testing results<\/a> to see how.<\/p>\n\t\t\t

\n\t\t\t\t Upgrade to W3 Total Cache Pro<\/a> and improve your PageSpeed Scores today!\n\t\t \t<\/p>\n\t\t\t

\n\t\t\t\t
Audit:<\/strong> Google Mobile PageSpeed Score<\/div>\n\t\t\t\t
Before:<\/strong> 54.25.<\/div>\n\t\t\t\t
After:<\/strong> 68.5<\/div>\n\t\t\t<\/div>\n\t \t<\/div>\n\t<\/div>\n\t \n \nEnabling Delay Scripts<\/h2>\n<\/div>\n<\/div>\n<\/div>\n
The first step to using the Delay Scripts feature is to enable the feature by navigating in your WordPress admin to Performance > General Settings<\/strong> and then clicking on the sub-nav User Experience<\/strong>. Once there, click on the <\/span>Delay Scripts <\/b>checkbox to enable it and then click on <\/span>Save Settings<\/b>.<\/span><\/p>\n
$\"\"$ <\/a><\/p>\n
Note: <\/strong>For best performance, it is recommended to enable the Minify<\/strong> feature to optimize all internal JS resources and to use the Delay Scripts<\/strong> feature to delay all external JS resources as well as any internal JS resources excluded from Minify<\/strong>. Using both features in this manner should yield the highest impact on performance and Google PageSpeed rankings.<\/div>\nConfiguring Delay Scripts<\/h2>\n
The next step is to configure the feature by navigating to <\/span>Performance > User Experience<\/b>. There will be a new setting block called <\/span>Delay Scripts<\/b> towards the bottom of the page.<\/span><\/p>\n
The <\/span>Timeout<\/b> field controls the delay the page will wait after fully rendering the content before loading any delayed scripts defined in the <\/span>Delay List<\/b>. This delay can be interrupted by any user interaction with the page however which will cause delayed scripts to load immediately. This is done to prevent errors and to ensure the required scripts are available for interactivity.<\/span><\/p>\n
The <\/span>Delay List<\/b> textarea takes one entry per line and is used to define scripts you wish to delay. These values can be any attribute of a <script> tag and are matched exactly so case\/format matters. The best attribute to match on would be the url attribute and can be as simple as the file name. For example googletagmanager.com<\/em>, gtag.js<\/em>, myscript.js<\/em>, name=”myscript”<\/em>, etc.
\n<\/span><\/p>\n
$\"\"$ <\/a><\/p>\n
Does Delay Scripts Work With Minify?<\/h2>\n
Any script that is matched from the <\/span>Delay List<\/b> will automatically be excluded from the minify process. Both the Delay Scripts<\/strong> feature and the Minify<\/strong> feature are independent of each other and as such both features can be used interchangeably without conflict.<\/span><\/p>\n
What Scripts Should Be Delayed?<\/h2>\nOne of the easiest ways to identify scripts that should be delayed is to use the W3 Total Cache Google PageSpeed<\/span> tool whose documentation can be found <\/span>here<\/span><\/a>. Once you authorize and analyze your website, review the <\/span>Eliminate render-blocking resources <\/b>metric breakdown which will list both CSS and JS files. These JS files can be added to the <\/span>Delay List <\/b>setting.<\/span><\/p>\n
$\"\"$ <\/a><\/p>\n
Note: <\/strong>If you have the Minify <\/strong>feature enabled and see minified files under this Google PageSpeed section, do not <\/strong>add them to the Delay List<\/strong>. Instead, the Minify<\/strong> feature includes a setting to defer\/async the loading of minified files which should address them being flagged as render-blocking.<\/span><\/div>\n<\/div>\n
How Can I Confirm that Scripts are being Delayed?<\/h2>\n
After configuring the Delay Scripts feature, visit your website and observe the loading behavior. Scripts specified in the Delay List should load after the page’s main content. You might notice faster initial load times, as render-blocking scripts are delayed.<\/p>\n
Open your browser’s developer tools and monitor the network activity as your page loads. Look for the scripts you’ve added to the Delay List and check their loading timing. These scripts should be loading after the main content of your page and possibly after a user interaction if you’ve set a delay that waits for such interaction.<\/p>\n
You can also you a page speed tool like Google PageSpeed Insights before and after enabling Delay Scripts. Compare the scores and look for improvements in metrics related to JavaScript loading times and render-blocking resources.<\/p>\n\t \n\t
\n\t\t
\n\t\t\t62%<\/span>\n\t\t\tDecrease<\/span>\n\t\t<\/div>\n\t\t
\n\t\t\t
In this test, the Delay Scripts feature displayed a 62% decrease in Time Third-Party Code Blocked The Main Thread For<\/strong> on mobile screens and 37.5% on larger screens in the Google PageSpeed score <\/strong>results! Check out the testing results<\/a> to see how.<\/p>\n\t\t\t
\n\t\t\t\t Upgrade to W3 Total Cache Pro<\/a> and improve your PageSpeed Scores today!\n\t\t \t<\/p>\n\t\t\t
\n\t\t\t\t
Audit:<\/strong> Time Third-Party Code Blocked The Main Thread For<\/div>\n\t\t\t\t
Before:<\/strong> 825 ms<\/div>\n\t\t\t\t
After:<\/strong> 197.5 ms<\/div>\n\t\t\t<\/div>\n\t \t<\/div>\n\t<\/div>\n\t \n \n
How Do I Debug Issues?<\/h2>\n
If JavaScript errors occur after configuring the <\/span>Delay List <\/b>the simplest way to identify issues is to use your browser’s debug console. This should show you which files are throwing errors. Unfortunately, this can be tricky to debug as some JavaScript code\/files may fail due to dependencies (such as jquery.js) being unavailable or loaded out of sequence so testing removing\/adding scripts may be required to identify which script(s) can’t be delayed.<\/span><\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
Welcome to the W3 Total Cache Pro Delay Scripts feature guide. This feature helps improve your website’s performance by delaying the loading of JavaScript resources, thereby eliminating render-blocking issues and boosting your Google PageSpeed scores. In this guide, we’ll walk you through how to use Delay Scripts effectively for optimizing your website’s performance. Let’s dive […]<\/p>\n","protected":false},"author":880,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[747,692],"tags":[],"class_list":["post-104676","post","type-post","status-publish","format-standard","hentry","category-user-experience","category-w3-total-cache"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/104676","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/880"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=104676"}],"version-history":[{"count":29,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/104676\/revisions"}],"predecessor-version":[{"id":132638,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/104676\/revisions\/132638"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=104676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=104676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=104676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}