我们在网站上使用Zopim。不幸的是，正因为如此，我们在PageSpeed Insights上受到了严重的惩罚。
- 没有Zopim：86/100
- 带Zopim：66/100
Zopim似乎意识到了这个问题，并承诺进一步优化他们的小部件，但我们还没有看到太多进展。
添加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>
我一直在尝试不同的方法来推迟脚本的执行(defer和async)，但未能成功提高PageSpeed Insights的分数(没有完全删除Zopim)。
我写了这篇文章，但我的天真尝试(将"defer.js"替换为"https://v2.zopim.com/?2dAdkKRoqdi9hHHrfr302XabQaK8DN7f")没有达到预期效果，Zopim仍由PageSpeed计数。
我的问题：
- 推迟非关键脚本的最佳方式是什么，以确保PageSpeed Insights不会将脚本作为其分数的一部分
- 如何将其应用于Zopim脚本
在本文中是编写最佳解决方案：此处
"我们更改了加载此脚本的逻辑。当用户执行第一个操作时，脚本加载开始。作为一种动作，我们考虑：滚动、鼠标点击、鼠标移动、触摸屏幕或按下键">
工作真不错！
<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>是的，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();">
您可以在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>
我已经更改了我的网站，以便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>