En el sitio de un cliente tengo un elemento que produce CLS, content layout shift . Este elemento no es crítico para el funcionamiento del sitio.
Según Nic Jansma , la medición de CLS termina con el evento onLoad .
Mi idea es eliminar este elemento del código fuente y cargarlo después del evento onLoad con Google Tag Manager. Lamentablemente no puedo ir por el camino habitual, debido al problema nr. 3, según la clasificación de Simo Ahava .
<script> var d1 = document.getElementById('article'); d1.insertAdjacentHTML('afterend', '<div id="quicknavi-button-container">Content</div>'); </script>¿Qué debo ajustar en mi javascript? Dispara un error que no puedo interpretar:
Cannot read properties of null (reading 'insertAdjacentHTML')
Cuando termina CLS depende de la herramienta que lo mide. Para Lighthouse, "termina" cuando la herramienta deja de perfilar la página (que puede ser varios segundos después de la onload ). Para el Informe de experiencia del usuario de Chrome, CLS se mide a través de la unload (es decir, la experiencia de vista de página completa). Para la mayoría de las herramientas de monitoreo de usuarios reales (RUM), CLS finaliza cuando envían la baliza, que suele ser en el evento de onload .
Por lo tanto, no es que CLS siempre termine con la onload ; es una medida acumulativa y el valor informado depende de la herramienta que esté usando o que le interese.
La mejor manera de abordar las preocupaciones de CLS no es engañar al evitar las herramientas de medición (por ejemplo, tratar de cargar contenido solo después de la onload para evitar la detección), sino comprender la experiencia del usuario y abordar esos cambios de la manera correcta. Por ejemplo, preasignando "espacio" vertical para el elemento o cargándolo de una manera que no cambie el contenido.