通过 Google 标签管理器实现延迟加载标签

Lazy loading Tag implemented via Google Tag Manager

Lighthouse 审核建议我延迟加载通过 Google 标签管理器实现的聊天信标。因为这个标签很大,我已经通过添加在 Window Loaded 事件后 1.5 秒触发的自定义事件来延迟它,并且在该自定义事件上我触发了这个聊天信标。我应该在这个标签上延迟加载吗?报告说我可以在加载页面时节省大约 3 秒。如果是的话,我怎么能在 GTM 中制作延迟加载标签,如果可能的话?下面我粘贴了标签的样子。感谢您的任何建议。

<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> 

还有一个问题。这个标签附在页面上,这意味着如果我们向下滚动它总是在同一个地方。这种情况下的延迟加载我理解为点击这个聊天图标后加载信标?

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

然而,很少有人这样做。为什么?因为异步加载 n.async=!0 通常不会以任何显着方式从用户角度延迟任何内容。

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

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