Javascript 如何最好地延迟从PageSpeed Insights中排除的脚本?
我们在网站上使用。不幸的是,正因为如此,我们受到了严重的惩罚Javascript 如何最好地延迟从PageSpeed Insights中排除的脚本?,javascript,pagespeed,zopim,Javascript,Pagespeed,Zopim,我们在网站上使用。不幸的是,正因为如此,我们受到了严重的惩罚 没有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.createElem
- 没有Zopim:86/100
- 与Zopim:66/100
<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>
<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>
window.$zopim | |(函数(d,s){var z=$zopim=函数(c){z.|.push(c)},$=z.s=
d、 createElement,e=d.getElementsByTagName[0];z.set=function(o){z.set。
_.push(o)};z.=[];z.set.=[];$.async=!0;$.setAttribute(“字符集”,“utf-8”);
$.src=”https://v2.zopim.com/?2dAdkKRoqdi9hHHrfr302XabQaK8DN7f“z.t=+新日期;$。
type=“text/javascript”e.parentNode.insertBefore($,e)})(文档,“script”);
我一直在尝试不同的延迟脚本执行的方法(延迟和异步),但在提高PageSpeed Insights分数方面没有成功(没有完全删除Zopim)
我想到了这一点,但我天真的尝试(将“defer.js”替换为“”)并没有达到预期效果,Zopim仍然被PageSpeed计算在内
我的问题:
- 推迟非关键脚本的最佳方式是什么,以确保PageSpeed Insights不会将脚本作为分数的一部分
- 如何将其应用于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();">
函数do_zopim(){
jQuery(document).on(“mousemove.zopim_defer scroll.zopim_defer”),函数(e){
window.$zopim | |(函数(d,s){var z=$zopim=函数(c){z.|.push(c)},$=z.s=
d、 createElement,e=d.getElementsByTagName[0];z.set=function(o){z.set。
_.push(o)};z.=[];z.set.=[];$.async=!0;$.setAttribute(“字符集”,“utf-8”);
$.src=”https://v2.zopim.com/?anonymous“z.t=+新日期;$。
type=“text/javascript”e.parentNode.insertBefore($,e)})(文档,“script”);
jQuery(document).off(“mousemove.zopim_defer scroll.zopim_defer”);
});
}
您可以通过添加$.setAttribute(“延迟”,null)来完成此操作代码>位于javascript的第三行末尾,如下所示:
<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>
<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>
window.$zopim | |(函数(d,s){var z=$zopim=函数(c){z.|.push(c)},$=z.s=
d、 createElement,e=d.getElementsByTagName[0];z.set=function(o){z.set。
_.push(o)};z.=[];z.set.=[];$.async=!0;$.setAttribute(“字符集”,“utf-8”);$.setAttribute(“延迟”,null);
$.src=”https://v2.zopim.com/?2dAdkKRoqdi9hHHrfr302XabQaK8DN7f“z.t=+新日期;$。
type=“text/javascript”e.parentNode.insertBefore($,e)})(文档,“script”);
我更改了我的站点,以便在页面本身加载后加载Zopim,而不是作为初始页面加载的一部分。
将其放在您的
前面:
addEventListener(“加载”,函数(){
window.$zopim | |(函数d,s){
var z=$zopim=函数(c){z.\uz.push(c)},
$=z.s=d.createElement,e=d.getElementsByTagName[0];z.set=function(o){
z、 设置推压(o);
};z.=[];z.set.=[];$.async=!0;$.setAttribute('charset','utf-8');
$.src='//v2.zopim.com/?1ubumygvu8nqlye7ybwc3pll0lgjduf';z.t=+新日期;$。
type='text/javascript';e.parentNode.insertBefore($,e);
})(文件“脚本”);
})
本文中的最佳解决方案是:
“我们更改了加载此脚本的逻辑。当用户执行第一个操作时,脚本加载开始。作为一个操作,我们考虑:滚动、鼠标单击、鼠标移动、触摸屏幕或按键。”
干得真好
文件。添加的文件列表器(“卷轴”,zopimlaunch);
文件。添加了EventListener('mousedown',zopimlaunch);
文件。添加了事件列表器(“mousemove”,zopimlaunch);
文档。addEventListener(“touchstart”,zopimlaunch);
文件。添加的文件列表器(“卷轴”,zopimlaunch);
文件。添加了监听器(“键控”,zopimlaunch);
功能启动(){
window.$zopim | |(函数(d,s){var z=$zopim=function(c){z.\uu.push(c)},$=z.s=d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.\uPush(o)};z.[];z.set.\u=[];z.set.\u=[];$.async=!0;$.setAttribute('charset','utf-8');
$.src='//v2.zopim.com/?yourid';z.t=+新日期;$.type='text/javascript';e.parentNode.insertBefore($,e)})(文档,'script');
document.removeEventListener('scroll',zopimlaunch);
文件。删除EventListener(“鼠标向下”,zopimlaunch);
document.removeEventListener('mousemove',zopimlaunch);
document.removeEventListener(“touchstart”,zopimlaunch);
document.removeEventListener('scroll',zopimlaunch);
文件。删除EventListener('keydown',zopimlaunch);
}
最后,我们将Zopim延迟了4秒,这足以让Google PageSpeed Insights在分数中完全忽略它。我也在处理这个问题。经过数小时的研究,这对我来说非常有效。谢谢,我已经找了好几个小时才找到这个页面。我们必须对与我们分享这一简单但超级想法的营销制作人说一声非常感谢!