使用Google Tag Manager在加载后插入元素，避免内容布局改变 [英] Avoiding content layout shift with inserting element after onLoad with 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之后加载内容以避免检测)，而是理解用户体验并以正确的方式解决这些变化。例如，通过为元素预分配垂直空间或以不移动内容的方式加载它。

这篇关于使用Google Tag Manager在加载后插入元素，避免内容布局改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！