GTM实现的聊天beacon懒加载必要性及实现方案咨询

1. 现有延迟方案是否还需要优化 #

你当前采用的Window Loaded触发后1.5秒延迟加载的方案，已经可以避免beacon资源阻塞首屏渲染，但和Lighthouse要求的懒加载逻辑仍有区别：你的方案是到点强制加载，哪怕用户全程不需要使用聊天功能，依然会消耗带宽和运行资源，这部分非必要加载就是审计报告中可节省的3秒耗时来源。如果需要完全拿到这部分性能收益，建议升级为按需懒加载。

2. GTM中实现懒加载的操作方法 #

完全可以在GTM中实现，操作步骤如下：

• 第一步：先在你的网站源码中添加一个假的聊天触发按钮，样式和官方Beacon的悬浮按钮完全一致，设置固定定位悬浮在页面右下角，给按钮设置唯一ID比如fake-beacon-btn，初始状态设为显示。
• 第二步：在GTM中新建点击触发器：
  • 触发器类型选择「点击 - 所有元素」
  • 触发条件设置为：点击ID 等于 fake-beacon-btn
  • 可以勾选「该触发器仅触发一次」避免重复加载
• 第三步：修改你现有的Beacon自定义HTML标签代码，添加假按钮隐藏和自动打开聊天面板的逻辑，修改后的代码如下：

<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=[],e.Beacon.readyQueue.push({method:"on",options:"ready",data:function(){
  // 加载完成后隐藏假按钮，显示官方Beacon并打开面板
  document.getElementById('fake-beacon-btn').style.display = 'none';
  window.Beacon('open');
}}),"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>

• 第四步：把原来Beacon标签的触发条件，替换为第二步新建的点击触发器，保存后发布GTM版本即可。

3. 固定悬浮场景的懒加载定义 #

你理解的完全正确，这类非核心功能的懒加载就是指仅当用户主动点击聊天图标时，才加载对应的beacon资源和初始化逻辑，如果用户全程不点击聊天功能，就永远不会加载这部分资源，完全消除了该标签带来的不必要性能开销，也是性能收益最高的实现方式。

内容的提问来源于stack exchange，提问作者Michal