El cambio de diseño acumulativo (CLS) mide la estabilidad visual de una página a medida que se carga. Lo hace observando qué tan grandes son las piezas y qué tan lejos se mueven. Esta es una de las tres métricas principales de Web Vitals que utiliza Google para medir la experiencia de un sitio web.
CLS se calcula durante la ventana de cinco segundos en la que se producen la mayoría de las compensaciones.
Digresión.
Los cambios de diseño esperados, como después de la acción del usuario, están bien y son esperados. Los movimientos dentro de los 500 ms de la interacción del usuario se excluyen del cálculo.
Así es como se mide:
resultado del cambio del sistema = fracción de impacto x fracción de distancia
O para decirlo de manera más comprensible, es:
resultado de cambio de diseño = % de ventana gráfica que cambió * distancia de desplazamiento del elemento inestable
La razón por la que CLS es importante es que es molesto cuando intenta hacer clic en algo en una página que se desplaza y luego hace clic en algo que no tiene la intención de hacer.
Me pasa todo el tiempo. Hago clic en una cosa y, de repente, hago clic en un anuncio y ahora ni siquiera estoy en el mismo sitio. Como usuario, encuentro esto frustrante.
Las causas comunes de CLS incluyen:
- Imágenes sin dimensiones.
- Anuncios, incrustaciones e iframes sin dimensiones.
- Inyectar contenido con JavaScript.
- Fuentes o estilos de carga tardía.
Echemos un vistazo a cuál debería ser su puntaje CLS y cómo mejorarlo.
Una buena puntuación CLS es inferior o igual a 0,1 y debe basarse en los datos del Informe de experiencia del usuario de Chrome (CrUX). Estos son datos de usuarios reales de Chrome que están en su sitio y han dado su consentimiento para compartir esta información. Necesita el 75 % de las cargas de la página para obtener una puntuación CLS de 0,1 o inferior.
Su sitio puede caer en uno de los siguientes segmentos:
- bueno: <=0.1
- Necesita mejorar: >0.1 y <=0.25
- Débil: >0.25
datos CLS
El 72,8% de los sitios tienen buenos puntajes CLS a partir de abril de 2023. Este es el promedio de todo el sitio. Como mencionamos, el 75% de las páginas cargadas deben tener una puntuación CLS de 0.1 o inferior para ser clasificadas como buenas.
CLS es el Core Web Vital más mejorado desde el impulso de Google por sitios web más rápidos.
Cuando realizamos un estudio a nivel del sitio utilizando datos de auditoría del sitio, notamos que CLS funciona de manera similar en computadoras de escritorio y dispositivos móviles.
También hemos notado que muchos sitios tienen problemas con CLS, especialmente en conexiones más lentas.
CLS es peor en los datos de nivel de página que en los datos de origen. Es probable que las personas estén mejorando sus páginas de inicio, lo que genera más tráfico y deja muchas otras páginas con resultados insatisfactorios.
Hay diferentes formas de medir CLS: datos de campo y datos de laboratorio.
Los datos de campo provienen del Informe de experiencia de usuario de Chrome (CrUX), que son datos de usuarios reales de Chrome que eligieron compartir sus datos. Esto le da la mejor idea del rendimiento real del CLS. Esto también es lo que Google realmente medirá para Core Web Vitals.
Los datos de laboratorio se basan en pruebas en las mismas condiciones para que las pruebas sean reproducibles. Google no usa esto para Core Web Vitals. Pero es útil para realizar pruebas, ya que los datos de campo/CruUX son una media móvil de 28 días, por lo que se necesita algo de tiempo para ver el impacto de los cambios.
La mejor herramienta para medir CLS depende del tipo de datos que desea obtener (laboratorio/campo) y si desea obtenerlos para una URL o para muchas.
Medición de CLS para una sola URL
Pagespeed Insights recupera datos de campos de nivel de página que de otro modo no se pueden buscar en el conjunto de datos de CruUX. También realiza pruebas de laboratorio basadas en Google Lighthouse y proporciona datos de linaje para que pueda comparar el rendimiento de la página con todo su sitio.
Medición de CLS para varias URL o para todo el sitio
Puede obtener datos de Crux en Google Search Console, que se clasifican como buenos, necesitan mejorar y malos.
Al hacer clic en uno de los problemas, se muestra un desglose de los grupos de páginas afectados. Los grupos son páginas con valores similares que probablemente usen la misma plantilla. Realiza cambios una vez en la plantilla y se corregirán en todas las páginas del grupo.
Si desea datos de laboratorio y de campo a gran escala, la única forma de obtenerlos es a través de la API de PageSpeed Insights. Puedes conectarte fácilmente a él usando Site Audit de Ahrefs y obtener informes que detallan tu desempeño. Es gratis para sitios verificados con una cuenta de Ahrefs Webmaster Tools (AWT).
Tenga en cuenta que los datos de métricas web subyacentes que se muestran serán determinados por el agente de usuario seleccionado para la indexación durante la configuración. Si está indexando desde un dispositivo móvil, obtendrá los valores de CWV móviles de la API.
En PageSpeed Insights, si selecciona CLS en la sección “Diagnóstico”, puede ver todos los problemas relacionados, como “Evitar grandes compensaciones de diseño”. Estos son los problemas que querrás resolver.
En la mayoría de los casos, para optimizar CLS, trabajará en problemas relacionados con imágenes, fuentes o posiblemente contenido inyectado. Veamos cada caso.
1. Reserva espacio para imágenes, videos, iframes
Para las imágenes, debe reservar espacio para que no haya compensación y la imagen solo llene ese espacio. Esto puede significar establecer la altura y el ancho de las imágenes especificándolas en la etiqueta de la siguiente manera:
<img src=“cat.jpg" width="640" height="360" alt=“cat with string" />
Para imágenes receptivas, debe usar un srcset como este:
<img
width="1000"
height="1000"
src="https://ahrefs.com/blog/cumulative-layout-shift-cls/puppy-1000.jpg"
srcset="https://ahrefs.com/puppy-1000.jpg 1000w, https://ahrefs.com/puppy-2000.jpg 2000w, https://ahrefs.com/puppy-3000.jpg 3000w"
alt="Puppy with balloons" />
También querrá reservar el espacio necesario para cosas como videos e iframes. Para contenido dinámico como anuncios, querrá reservar todo el espacio que necesite.
También hay una propiedad CSS relativamente nueva llamada relación de aspecto que le permite establecer un ancho dinámico basado en el tamaño de la pantalla y el navegador calculará la altura adecuada.
2. Optimiza las fuentes
Con las fuentes, el objetivo es llevar la fuente a la pantalla lo más rápido posible y no reemplazarla con otra fuente. Cuando se carga o cambia una fuente, hay un cambio notable, como Flash de texto invisible (FOIT) o Flash de texto sin estilo (FOUT).
Si puede utilizar una fuente del sistema, hágalo. No hay nada que cargar, por lo que no hay retrasos ni cambios que desencadenen el cambio.
Si necesita usar una fuente personalizada, actualmente el mejor método para minimizar CLS es combinar (que intentará descargar su fuente lo antes posible) y font-display: opcional (que le dará tiempo a su fuente para cargar).
Si la fuente no llega a tiempo, la carga de la página inicial solo mostrará la fuente predeterminada. Su fuente personalizada se almacenará en caché y aparecerá en las cargas de página posteriores.
3. Usa animaciones que no cambien el diseño
Hay ciertos valores de propiedad CSS que provocan cambios de diseño como “box-shadow”, “box-sizing”, “top”, “left” y otros que no deben animarse. En su lugar, querrá utilizar una animación de “transformación” para evitar cambios de diseño.
4. Asegúrese de que sus páginas sean aptas para bfcache
El caché hacia atrás/adelante almacena páginas en el caché del navegador. Le permite cargar inmediatamente una página que ya se ha cargado, lo que significa que no se producirán cambios de diseño.
Esta optimización viene con una cantidad decente. Las principales estrategias se enumeran a continuación y se puede encontrar más información sobre ellas aquí.
Principales estrategias:
- Nunca use un evento de descarga
- Minimizar el uso de Cache-Control: no-store
- Actualice datos obsoletos o confidenciales después de restaurar bfcache
- Evite las referencias al archivo window.opener
- Cierra siempre las conexiones abiertas antes de que el usuario se vaya.
- Prueba para asegurarte de que tus páginas estén en caché
Pensamientos finales
Desde la introducción de CLS, ya hemos visto innovaciones como bfcache y la relación de aspecto CSS que ayudan a resolver este problema. Espero ver más innovaciones y más formas nuevas de evitar cambios de diseño en el futuro.
Si tiene alguna pregunta, por favor escríbame. en Twitter.
