lazy-loading - 通过谷歌标签管理器实现的延迟加载标签

Question

灯塔审计建议我延迟加载通过谷歌标签管理器实现的聊天信标。因为这个标签非常大，我已经通过添加在 Window Loaded 事件后 1.5 秒触发的自定义事件来延迟它，并且在该自定义事件上我正在触发这个聊天信标。我应该在这个标签上做延迟加载吗？报告说我可以在加载页面中节省大约 3 秒。如果是的话，我怎么能在 GTM 中制作延迟加载标签，如果有可能的话？Bellow我粘贴了标签的样子。谢谢你的任何建议。

<script type="text/javascript">!function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){});</script>
<script type="text/javascript">window.Beacon('init', 'XXXXXXXXX-XXXX-XXXXXXXXX-XXXXXXX')</script> 

还有一个问题。该标签附加到页面上，这意味着如果我们向下滚动，它将始终位于同一个位置。在这种情况下延迟加载我理解为单击此聊天图标后加载信标？

标签： lazy-loadinggoogle-tag-managerbeacon

Answer 1

是的，在这种情况下，延迟加载将在点击时加载。

然而，人们很少这样做。为什么？因为从用户的角度来看，异步加载n.async=!0通常不会以任何重要的方式延迟任何事情。

灯塔并不是最后一个真实的例子。这只是一般建议提高页面速度的一种不太好的方法。

如果您想正确测量它，请停止使用 lighthouse，开始在浏览器中使用页面速度分析。衡量用户现在的聊天体验，然后在标签管理器中完全禁用它并重新加载页面。看看你是否能找到那些声称的 3 秒。重复这两个实验几次以补偿随机速度波动。我怀疑您将能够衡量任何真正的差异。