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

[RogerM]

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?

 

[frizzel]

If it is working on one or more sites, but not on this particular site, I would try to find the reason for that, not just get rid of the plug-in.

Usually I'm all for 'the less plug-ins the better', but don't overdo it. Some plug-ins do better than you yourself could by manually inserting codes. This plug-in is an example.

 

[RogerM]

If it is working on one or more sites, but not on this particular site, I would try to find the reason for that, not just get rid of the plug-in.

I am not trying to get rid of the plugin, I am just looking for a manual way to do it because the plugin is not working on a client´s site.

 

[pitza]

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?

Are they executed by cron jobs? These you could delay

 

[mrkapable007]

Hi you can set a timer, to delay the script without blocking the UI.

setTimeout(function(){

//your code to be executed after 2 seconds

}, 2000);

 

[RogerM]

Hi you can set a timer, to delay the script without blocking the UI.

setTimeout(function(){

//your code to be executed after 2 seconds

}, 2000);

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!!

 

[ngepetlo]

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!!

there is simple way to do it, just use defer on script tag like script defer src="http://externaljs"
defer mean, script is executed when the page has finished parsing or loaded
see https://www.w3schools.com/tags/att_script_defer.asp

 

[RogerM]

there is simple way to do it, just use defer on script tag like script defer src="http://externaljs"
defer mean, script is executed when the page has finished parsing or loaded
see https://www.w3schools.com/tags/att_script_defer.asp

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!!

 

[ngepetlo]

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!!

i didn't test if for wordpress, but with this script you need to manually change the script src to script data-src

(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);
}

})();

i tested this code to load jquery ,google ads,google tag and it work fine

 

[RogerM]

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

 

[ngepetlo]

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

put in <head> section, or in footer and dont forget to change the external js,
script src="http://externaljs" to script data-src="http://externaljs"

 

[RogerM]

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?

 

[ngepetlo]

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?

is this script on script src tag like script src="http://domain.com/8815131.js?integration=WordPress" ??
if like that, then simple just change
script src="http://domain.com/8815131.js?integration=WordPress"
to
script data-src="http://domain.com/8815131.js?integration=WordPress"

like i said you just need to change the src="" to data-src="" in the script tag you want to delay

after you change it, put the js code that i gave above in the head or in the footer. done

 

[hakli]

Hey @RogerM you can use

WP Meteor Page Speed Optimization Topping​

It might help.

 

[RogerM]

Hey @RogerM you can use

WP Meteor Page Speed Optimization Topping​

It might help.

Waooo, sounds amazing. Never heard of this plugin before. I was trying to avoid having to use a plugin to solve an issue. I was using Flying Scripts to delay external scripts with a lot of success but wanted to give it a try to implement this manually but this plugin sounds great.

Will surely try it out!

Thanks!!

 

[hakli]

Do let me know about the results. This plugin looks promising.