[WORDPRESS] Is there a way to manually delay external scripts from executing?

RogerM said:

I would like to know if there´s a way to delay the execution of external JavaScripts in WordPress?

I´ve been using Flying Scripts with great success recently for this but for some reason is not working on a client´s site.

I just would like to manually add the code snippet and check if there´s any difference. I am trying to avoid having to use plugins when trying to optimize a site page loading speed.

Thoughts?

Click to expand...

RogerM said:

Yeah, I saw that piece of code when researching how to do it.

But, how can I implement it? This goes into the function.php file, correct?

Also, I don´t want ALL the scripts to be delayed. That would be suicidal.

Instead, I want to delay external scripts only.

For example, I am currently working on a site and these are the scripts loading from external sources causing the biggest performance issues...

From https://online.flipbuilder.com - 7x HTTP requests and 673KB
From https://static.hsappstatic.net - 4x HTTP requests and 215.2KB
From https://www.googletagmanager.com - 3x total HTTP requests and 111.7KB
From https://connect.facebook.net - 2x HTTP requests and 66.2KB

So, if you were looking to delay the parsing (not the download) of the scripts loading from these sites...How would you write the code?

Thanks in advance!!

Click to expand...

RogerM said:

I am aware of the defer attribute but that´s not what I am asking.

I am talking about delaying external scripts from ever executing until there´s an user interaction or the time set for their delay is completed, whatever happens first.

Basically, that´s what Flying Script does but I would like to know the manual way to do this as I don't want to have to resort to a plugin to solve a performance problem.

WP Rocket since version 3.7 also added this feature.

Delay JavaScript execution - WP Rocket Knowledge Base

Still seeing the Reduce unused JavaScript audit in PageSpeed? You may be excluding too many scripts from being delayed, please consider reducing the exclusions

docs.wp-rocket.me

Also, take a look as this...

​

It better explains the differences between defer and delay.

I took it from this article...

How to delay JavaScript until user interaction in WordPress (one-click)

While defer JavaScript pushes the script to the bottom of the page load, you can instead delay JavaScript based on user interaction. This can be a great way to significantly speed up the paint of the page for Google Lighthouse when something isn’t needed right away. Especially heavy third-party...

perfmatters.io

Cheers!!

Click to expand...

(async() => {
//if no user interaction, script will automatically execute after timeDelay
const timeDelay = 5000; //5seconds
let DelayExecute = setTimeout(mv, timeDelay);
    function loadExternalScript(url) {

        let script = document.createElement('script'),
            done = false,
            headScript = document.getElementsByTagName("head")[0];
        script.src = url;
        script.onload = script.onreadystatechange = function () {
            if (!done && (!this.readyState ||
                    this.readyState == "loaded" || this.readyState == "complete")) {
                done = true;

                script.onload = script.onreadystatechange = null;

            }
        };
        headScript.appendChild(script);
    }

    function mv() {
        clearTimeout(DelayExecute);
        [...document.querySelectorAll('script')].map(external => {
            let checkjs = external.getAttribute('data-src');
           


            if (checkjs && !checkjs.includes(window.location.host)) {

               let headScript = document.getElementsByTagName("head")[0];
                loadExternalScript(checkjs);
                headScript.removeChild(external);
            }


        });
    }

if (document.addEventListener){
    await document.addEventListener('mousedown', mv);
    await document.addEventListener('mousemove', mv);
    await document.addEventListener('touchstart', mv);
    await document.addEventListener('scroll', mv);
    await document.addEventListener('keydown', mv);
}

})();

RogerM said:

And where can I input the scripts I want to delay?

Click to expand...

RogerM said:

No no, sorry, I didn´t explain myself clear enough.

I meant, let´s say I want to delay these scripts from executing...

gtag/js?id=G-SGVJ3HBN3NC
conversations-embed.js
8815131.js?integration=WordPress
fb.js
collectedforms.js

How would that go?

Click to expand...

WP Meteor Page Speed Optimization Topping​