如何加载不会影响 gtmetrix 等工具上的页面加载的外部 js 小部件

问题描述

我的客户在他们的网站上放置了聊天小部件。他们中的一些人抱怨小部件影响了 gtmetrix 和 lighthouse 等工具的页面加载性能......

我知道有很多技巧可以在页面完全加载后延迟加载脚本。但问题是客户只考虑他们从这些工具（gtmetrix 和 lighthouse 等）获得的报告，所有这些解决方案都增加了Fully Loaded Time

我已经尝试过这些解决方案：

async ：与其他内容并行加载脚本很好，到目前为止，它对我来说是唯一真正的解决方案。
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 : 仍然增加 Fully Loaded Time ???

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

唯一有效的解决方案：但我猜测等待时间与网站加载时间本身成正比？！？
window.load + bigger settimeout + fetch ：这有效

  window.addEventListener('load',10000);
  })

另一种解决方案是在加载脚本之前等待用户交互（点击、滚动）。

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

所以有人有任何经验或解决方案吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

gtmetrix html javascript lighthouse