How to Delay Script Load in WordPress

Looking for a way to delay script load in WordPress?

WordPress users are always on the prowl for cutting-edge techniques to improve the load time of their website. Speed is so incredibly important for many factors that create a successful online presence. Two of the main items when it comes to WordPress speed is visitor experience and search engine rankings.

There are many third-party tools that enhance the functionality or visibility of a WordPress website. These third-party tools use JavaScript to to add their functionality to a WordPress website.

The downside of this added third-party JavaScript is that in most cases it will increase the page load time of each URL that the script exists on.

This means that wherever you have the script on your page and a visitor is trying to access that page, the time it takes to fully load the page will be increased because of the script.

Perhaps you are not even certain of whether or not your website is faster or slow. Take a look at the link below to give you some information on some free website speed testing tools that you can use to identify the speed of your site.
https://www.wpfixit.com/free-website-speed-testing-tools/

It doesn’t seem fair that you have to trade functionality for speed does it?

External Scripts Are Costly on Your Site Page Load

Third-party scripts are everywhere. According to the State of JavaScript report by HTTP Archive, the median number of external scripts requested by websites is 20 and their total size is around 449 KB.

A whopping 93.59% of web pages include at least one third-party resource. Digging deeper into the same data shows that 76% of websites track users with analytics scripts.

The worst impact of third-party scripts is delaying the critical rendering path, plus affecting your Core Web Vitals scores, starting from the FID grade.

The critical rendering path is the set of actions a browser makes to assemble HTML, CSS, and JavaScript into a living, usable website.

Naturally, the payload size of the third-party scripts plays a major role here, but there’s yet another important factor to consider.

JavaScript takes up a lot of CPU resources to execute. Even if you optimize third-party scripts to reduce the impact on rendering time, they can still affect the Time to Interactive metric. It measures how quickly users can interact with a webpage.

The slower it is, the more frustrated your users will be and the higher the chances of them abandoning your website.

Most Commonly Used External Scripts on WordPress

Below is a list of some of the most commonly used external scripts on a WordPress website. Many of these you will recognize because you are probably using them on your website.

1. Google Analytics
2. Facebook Pixel Code
3. Live Chat Widgets
4. Video Embeds
5. Embedded Forms
6. Social Media Widgets
7. Embedded Forms

Achieve Greatness When You Delay Script Load in WordPress

There is no reason that you should have to sacrifice speed for functionality.

What if we told you you could have both?

Enhance the functionality and visibility of your WordPress website using third-party scripts and also ensure that every page on your website is loading as fast as possible for your visitors.

It is possible and it is done through a process where you delay script load in WordPress.

In normal circumstances when you use an internal script on your website it will load with the page when a visitor accesses one of your site URLs.

When you delay script load in WordPress, the external script will not start loading until the set delay time period has expired.

For example if you set the delay time to 4 seconds, this means that the script will not execute until 4 seconds after the page has fully loaded.

This is extremely powerful because it means that the page load is not waiting on the script to complete. Your visitor experience will improve because the pages load quicker and any speed test tool that you use to test one of the URLs on your website will yield better results.

Let us take a look at the difference in a regular external script load and a delay script load below.

Regular External Script Load

The image below shows the waterfall load of a URL that has a TrustPilot testimonial widget embedded on it.

As you can see in the image there are 5 external requests that are being loaded with this page. These requests are coming from the embedded external script.

Delay External Script Load

Now let’s take a look at the same page loaded with delay script load in WordPress.

This TrustPilot testimonial widget is still embedded on the page but we have set a delayed time for it to load 2.5 seconds after the page loads.

Not only did the request amount go down but take a look at the fully loaded time and the onload time which also decreased.

It is as if the script is not even on the page during the load time.

Original Load Script Load in WordPress

The code below is the default script embed for this TrustPilot widget we used in the speed tests above.

<!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async=""></script>
<!-- End TrustBox script -->

<!-- TrustBox widget - Carousel -->
<div class="trustpilot-widget" data-locale="en-US" data-template-id="53aa8912dec7e10d38f59f36" data-businessunit-id="5b7de8733448bc00017ef8cc" data-style-height="140px" data-style-width="100%" data-theme="light" data-stars="1,2,3,4,5" data-review-languages="en">
  <a href="https://www.trustpilot.com/review/wpfixit.com" target="_blank" rel="noopener">Trustpilot</a>
</div>
<!-- End TrustBox widget -->

Delay Script Load in WordPress

The code below is the delayed script embed for this TrustPilot widget we used in the speed tests above.

<!-- TrustBox script -->
<script>
setTimeout(function() {
    var head_ID = document.getElementsByTagName("head")[0];       
    var script_element = document.createElement('script');
    script_element.type = 'text/javascript';
    // SET EXTERNAL SCRIPT PATH BELOW
    script_element.src = 'https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js';
    head_ID.appendChild(script_element);
}, 2500); // TIME DELAY YOU CAN ADJUST
</script>
<!-- End TrustBox script -->

<!-- TrustBox widget - Carousel -->
<div class="trustpilot-widget" data-locale="en-US" data-template-id="53aa8912dec7e10d38f59f36" data-businessunit-id="5b7de8733448bc00017ef8cc" data-style-height="140px" data-style-width="100%" data-theme="light" data-stars="1,2,3,4,5" data-review-languages="en">
</div>
<!-- End TrustBox widget -->

Any Use Delay Script Load in WordPress

The code below is the default template that you can use to delay load script in WordPress.

There are only two items within this template that need to be changed.

1. The URL for the external script you want to use
2. The time delay when you want script to run

<script>
setTimeout(function() {
    var head_ID = document.getElementsByTagName("head")[0];       
    var script_element = document.createElement('script');
    script_element.type = 'text/javascript';
    // SET EXTERNAL SCRIPT PATH BELOW
    script_element.src = 'URL_FOR_EXTERNAL_SCRIPT';
    head_ID.appendChild(script_element);
}, 2500); // TIME DELAY YOU CAN ADJUST
</script>

In Conclusion

We really hope that this post was helpful and understanding how to delay script load in WordPress.

You really should use this for any third-party external scripts you are using on your WordPress website and you will see an immediate decrease in the page load time which will benefit your search engine rankings and overall visitor experience.

If you have any issues implementing anything that you’ve read in this post please comment below and we can see where you are stuck.