使用Google Tag Manager在加载后插入元素,避免内容布局改变

在客户站点上,我有一个元素,它产生CLS, content layout shift。此元素对网站的运行并不重要。

According to Nic Jansma,CLS测量以onLoad事件结束。

我的想法是从源代码中删除此元素,并在onLoad事件后使用Google Tag Manager加载它。遗憾的是,我不能走通常的路,因为issue nr. 3, according to Simo Ahava's classification。

<script>
    var d1 = document.getElementById('article');
    d1.insertAdjacentHTML('afterend', '<div id="quicknavi-button-container">Content</div>');
</script>

我应该在我的Java脚本上调整什么?它会触发我无法解释的错误:

Cannot read properties of null (reading 'insertAdjacentHTML')


解决方案

何时结束取决于测量它的工具。对于LighTower,当该工具停止分析页面时(可能在onload之后数秒),它将结束。对于Chrome用户体验报告,CLS通过unload(即整个页面查看体验)来衡量。对于大多数真实用户监控(RUM)工具,CLS在它们发送信标时结束,该信标通常是在onload事件中。

因此,CLS并不总是以onload结束--它是一个累积测量值,报告的值取决于您正在使用或关心的工具。

解决CLS问题的最好方法不是玩躲避测量工具的把戏(例如,试图仅在onload之后加载内容以避免检测),而是理解用户体验并以正确的方式解决这些变化。例如,通过为元素预分配垂直空间或以不移动内容的方式加载它。

相关文章