How to load on external js widget that won't impact page load on tools like gtmetrix

182 Views Asked by At

I have chat widget that my clients put in their sites. Some of them complains that the widget is effecting the page load performance on tools like gtmetrix and lighthouse and etc ...

I know that there are lots of tricks to load the script with delay after the page is fully loaded. BUT the problem is that the clients only consider what report they get from these tools (gtmetrix and lighthouse and etc) and all these solutions increases the Fully Loaded Time

I have tried these solutions :

async : it was good to load the script in parallel to other stuff, so far its the only real solution for me.
fetch :

    fetch(s).then((response) => {
      var s = document.createElement('script');
      s.type = 'text/javascript';
      response.text().then(content => {
        s.text = content;
        document.body.appendChild(s);
      });
    });

window.load + fetch :

  window.addEventListener('load', () => {
    load('/boot-time-test/dom-content-loaded2.js');
  })

window.load + settimeout + fetch : still increase the Fully Loaded Time ???

  window.addEventListener('load', () => {   
    setTimeout(()=>load('/boot-time-test/dom-content-loaded2.js'),5000);
  })

The only solution that worked : BUT I am guessing that the wait time is proportional to the sites load time itself ?!?
window.load + bigger settimeout + fetch : this works

  window.addEventListener('load', () => {   
    setTimeout(()=>load('/boot-time-test/dom-content-loaded2.js'),10000);
  })

Another solution is to wait for user interaction (click, scroll) before loading the script.

document.addEventListener('click', () => load('/boot-time-test/dom-content-loaded2.js'))

So anyone has any experience or solution?

0

There are 0 best solutions below