javascript - 如何最好地延迟从 PageSpeed Insights 中排除的脚本？

Question

我们使用 Zopim在我们的网站上。不幸的是，正因为如此，我们在 PageSpeed Insights 上受到了严重的惩罚。 .

• 没有 Zopim:86/100
• 使用 Zopim:66/100

Zopim 似乎知道 issue ，并 promise 进一步优化他们的小部件，但我们还没有看到太多进展。

添加Zopim的代码如下:

<script type="text/javascript">
  window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
  d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
  _.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
  $.src="https://v2.zopim.com/?2dAdkKRoqdi9hHHrfr302XabQaK8DN7f";z.t=+new Date;$.
  type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>

我一直在尝试不同的方式来延迟脚本的执行(延迟和异步)，但未能成功提高我们的 PageSpeed Insights 分数(没有完全删除 Zopim)。

我来到这个article但是我天真的尝试(将“defer.js”替换为“https://v2.zopim.com/?2dAdkKRoqdi9hHHrfr302XabQaK8DN7f”)没有达到预期的效果，Zopim 仍然被 PageSpeed 计算在内。

我的问题:

• 推迟非关键脚本以确保 PageSpeed Insights 不将该脚本计入其分数的最佳方法是什么？
• 如何将其应用于 Zopim 脚本？

Answer 1

这篇文章写的是最好的解决方案:here

“我们更改了加载此脚本背后的逻辑。当用户执行第一个操作时，脚本加载开始。我们考虑的操作是:滚动、鼠标单击、鼠标移动、触摸屏幕或按键。”

工作真好!

<script>
            document.addEventListener('scroll', zopimlaunch);
            document.addEventListener('mousedown', zopimlaunch);
            document.addEventListener('mousemove', zopimlaunch);
            document.addEventListener('touchstart', zopimlaunch);
            document.addEventListener('scroll', zopimlaunch);
            document.addEventListener('keydown', zopimlaunch);

            function zopimlaunch () {
                window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set._.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute('charset','utf-8');
                $.src='//v2.zopim.com/?yourid';z.t=+new Date;$.type='text/javascript';e.parentNode.insertBefore($,e)})(document,'script');

                document.removeEventListener('scroll', zopimlaunch);
                document.removeEventListener('mousedown', zopimlaunch);
                document.removeEventListener('mousemove', zopimlaunch);
                document.removeEventListener('touchstart', zopimlaunch);
                document.removeEventListener('scroll', zopimlaunch);
                document.removeEventListener('keydown', zopimlaunch);
            }

</script>