如何最好地将脚本从 PageSpeed Insights 中排除？答案

【问题标题】：How to best defer scripts to be excluded from PageSpeed Insights?如何最好地将脚本从 PageSpeed Insights 中排除？
【发布时间】：2019-01-13 06:32:20
【问题描述】：

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

没有 Zopim：86/100
使用 Zopim：66/100

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

添加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 脚本？

【问题讨论】：

最后我们将 Zopim 推迟了 4 秒，这足以让 Google PageSpeed Insights 在评分中完全忽略它。
我也在处理这个问题????想知道从requestIdleCallback 内部注入是否就足够了......

标签： javascript pagespeed zopim

【解决方案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>

【讨论】：

经过数小时的研究，这对我来说非常有效。谢谢
我也是，我找了好几个小时才找到这个页面。我们必须非常感谢与我们分享这个简单但超级想法的营销人员！

【解决方案2】：

是的，zopim 不在我的好书中，所以我也一直在尝试修复他们的代码。这就是我推迟 zopim 脚本的方式。

<script type="text/javascript">  
  function do_zopim() {
    jQuery(document).on("mousemove.zopim_defer scroll.zopim_defer", function(e) {
      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/?anonymous";z.t=+new Date;$.
      type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
      jQuery(document).off("mousemove.zopim_defer scroll.zopim_defer");
    });
  }
</script>

<body onload="do_zopim();">

【讨论】：

【解决方案3】：

可以通过在javascript第三行末尾添加$.setAttribute("defer",null);来实现，如下所示：

<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");$.setAttribute("defer",null);
  $.src="https://v2.zopim.com/?2dAdkKRoqdi9hHHrfr302XabQaK8DN7f";z.t=+new Date;$.
  type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>

【讨论】：

【解决方案4】：

我更改了我的网站，以便在页面本身加载后加载 Zopim，而不是作为初始页面加载的一个组成部分。将其放在您的 </body> 之前：

    <script>
    window.addEventListener("load", function () {
        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/?1ubUmoyGvu8nQlye7YBWC3pLL0lgJDUf'; z.t = +new Date; $.
                type = 'text/javascript'; e.parentNode.insertBefore($, e);
        })(document, 'script');
    })
</script>

【讨论】：