Qué es Cumulative Layout Shift (CLS) y cómo solucionarlo

¿Qué es Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) representa la parte de 'estabilidad visual' de las Core Web Vitals. El Cumulative Layout Shift (CLS) mide los movimientos de la página cuando el contenido se renderiza o se muestra nuevo contenido en la página. Calcula una puntuación basada en cuánto de la página se mueve inesperadamente y qué tan lejos se mueve. Estos cambios de contenido son muy molestos, haciendo que pierdas tu lugar en un artículo que habías empezado a leer o, peor aún, ¡haciendo que hagas clic en el botón equivocado!

Importancia del CLS en el rendimiento web y la user experience

Cumulative Layout Shift (CLS) está vinculado tanto al rendimiento web como a la user experience porque impacta directamente en qué tan estable y predecible se siente una página web mientras se carga. He aquí por qué es importante:

• UX, interacción y percepción de marca:  Los cambios de diseño inesperados interrumpen el flujo del usuario, dificultando encontrar información, hacer clic en botones e interactuar con la página como se pretendía. Esta frustración puede llevar a malas experiencias donde los usuarios abandonan el sitio web por completo.
  La user experience de un sitio web refleja la marca detrás de él. Los cambios de diseño frecuentes pueden dar la impresión de un sitio web mal diseñado o mantenido, interrumpir la interacción del usuario que llevará a una menor participación y potencialmente mayores tasas de rebote.
  
• Accesibilidad: Los cambios de diseño pueden ser particularmente disruptivos para usuarios con discapacidades que dependen de tecnologías de asistencia o lectores de pantalla. Un diseño estable asegura que todos puedan navegar e interactuar con el sitio web de manera efectiva.
  
• SEO y posicionamiento en buscadores: Las Core Web Vitals son un factor de posicionamiento pequeño pero significativo en Google. Google, junto con otros motores de búsqueda, prioriza los sitios web que ofrecen una buena user experience. CLS es una de las métricas de Core Web Vitals que Google considera al posicionar sitios web. Optimizar el CLS puede darle a tu sitio web una ventaja competitiva en los resultados de búsqueda.
  

¿Cómo se mide el CLS?

El CLS de una página se puede medir con la Layout Instability API. El siguiente es un uso simple de esta API

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

Calculando el CLS

El CLS se calcula fácilmente usando una fórmula simple pero elegante:

CLS = sum(impact-fraction * distance-fraction)

La fracción de impacto mide cuánto del contenido visible de la página se ha desplazado. La fracción de distancia mide qué tan lejos se ha desplazado el contenido. Si, por ejemplo, el 50% de la página (cuánto) se ha desplazado un 25% (qué tan lejos) del viewport de la página. La puntuación de CLS = .50 * .25 = 0.125

Cambios de diseño esperados VS inesperados

No todos los cambios de diseño son malos, solo los que no esperas. Cuando haces clic en un enlace de 'cargar más elementos', por ejemplo, esperarías que aparecieran más elementos en la página y que el contenido de la página se desplazara.

Es por eso que solo los cambios de diseño inesperados causarán una contribución al CLS. Por ejemplo, si un usuario hace clic en un botón y en respuesta se agrega nuevo contenido a la página (por ejemplo, un menú desplegable), el cambio de diseño será excluido del CLS. Para ser precisos:
Los cambios de diseño que ocurren dentro de 500 milisegundos de la interacción del usuario serán excluidos de los cálculos

Sesiones de cambio de diseño

Cuando se introdujo el CLS por primera vez, algunos sitios fueron penalizados injustamente con una mala puntuación de CLS. Por ejemplo, una página que implementa desplazamiento infinito habría tenido el impacto del contenido recién agregado sumado a la puntuación total de CLS con cada nuevo desplazamiento. Es por eso que el CLS ahora se calcula en sesiones. Cada sesión tiene una duración de 5 segundos. La sesión con la puntuación de CLS más alta se convertirá en la puntuación final de CLS.
Si, por ejemplo, durante los primeros 5 segundos la puntuación de CLS es 0.095, luego en las siguientes sesiones de 5 segundos el CLS es 0.15 y para la última sesión la puntuación de CLS es 0. La puntuación final de CLS será la más alta de las tres: 0.15.

Un recordatorio rápido: ¡CLS y las Core Web Vitals!

Cumulative Layout Shift (CLS) es una métrica importante, centrada en el usuario, para medir la estabilidad visual. El Cumulative Layout Shift (CLS) es parte de las Core Web Vitals junto con el First Contentful Paint, el Largest Contentful Paint y el First Input Delay.

Cómo medir problemas de CLS

1. Usa Lighthouse para encontrar Cumulative Layout Shifts

El método más fácil para encontrar cambios de diseño es usando Lighthouse en tu propio navegador Chrome. Simplemente ejecuta una auditoría de Lighthouse haciendo clic derecho en cualquier parte de la página. Luego selecciona inspeccionar elemento, selecciona la pestaña de Lighthouse en la consola ahora abierta y ejecuta la auditoría.

Los resultados de la auditoría mostrarán la puntuación de Cumulative Layout Shift (CLS). Desplázate hacia abajo hasta Diagnósticos y expande la información de Cumulative Layout Shift para ver qué nodos están causando el cambio de diseño.

Para ser honesto, yo nunca uso realmente este método. La falta de detalles sobre la distancia exacta del cambio de diseño hace que estos resultados sean más difíciles de interpretar.

2. Usa el CLS Visualizer para encontrar Cumulative Layout Shifts

El CLS Visualizer es una extensión de Chrome escrita por mí. Con un solo clic de botón, todos los cambios de diseño en la página se visualizan. Esta es la primera solución a la que recurro cuando intento determinar un cambio de diseño en una página. Es fácil y proporcionará una gran visión general visual del Cumulative Layout Shift.

3. Usa la pestaña de Rendimiento de Chrome para encontrar CLS

Sin duda, la mejor manera de depurar un cambio de diseño es a través de la pestaña de rendimiento de Chrome. Para abrir la pestaña de rendimiento navega a cualquier página en Chrome y usa esta combinación de atajos:
- Presiona Ctrl-Shift-I (Abrir Dev Tools)
- Presiona Ctrl-Shift-E (Iniciar perfil y recargar página)

Ahora inspecciona la línea de tiempo fotograma por fotograma pasando el ratón sobre la línea de tiempo en la parte superior y busca cambios de diseño (los cambios de diseño también se muestran en rojo en la sección Experience de la pestaña de Rendimiento). 

4. Usa herramientas RUM como Core/Dash

RUM significa Real User Monitoring y los datos de RUM pueden proporcionar información valiosa en tiempo real sobre las Core Web Vitals. Herramientas RUM como Core/Dash pueden desglosar los Cumulative Layout Shifts en segmentos como navegador, elemento, tipo de navegación, URL específica o tipo de página. Esto ayudará a identificar y solucionar páginas con bajo rendimiento y elementos problemáticos.

Causas comunes de Cumulative Layout Shift y cómo solucionarlas

El origen de todos los cambios de diseño es básicamente el mismo. En algún momento, un elemento que estaba colocado encima de otro elemento ocupó más o menos espacio que antes. Esto se debe típicamente a una o más de estas causas:

• Imágenes, iFrames o videos
• Anuncios
• Contenido inyectado
• Animaciones
• Interacciones lentas
• Fuentes web

CLS causado por imágenes, videos e iFrames

Los cambios de diseño causados por imágenes, videos o iFrames siempre se deben a dimensiones faltantes. Lo más común es que la altura y el ancho del elemento no estén definidos en el HTML. Un patrón común y buena práctica es establecer el ancho intrínseco de la imagen en el HTML y usar estilos para escalar automáticamente y contener la imagen en su contenedor padre.

<img src="img.jpg" width="200" height="200">
<style>
   img{
      max-width:100%;
      height:auto
   }
</style>

Ten en cuenta que las dimensiones también se pueden definir como una propiedad de estilo o incluso estableciendo la propiedad de estilo aspect-ratio .

CLS causado por fuentes web

Un Cumulative Layout Shift puede ser causado por fuentes web. Las fuentes web son fuentes que no están instaladas en tu computadora local o teléfono sino que se descargan de internet. Mientras la fuente web aún no se ha descargado, la página generalmente se renderiza con una fuente fallback. El tamaño de esta fuente fallback puede diferir de la fuente final. En este ejemplo, la fuente fallback es ligeramente más pequeña que la fuente web final.

Hay muchos métodos para 'solucionar' el cambio de diseño causado por fuentes web. Se basan en 2 técnicas:

1. Hacer que la fuente fallback coincida más con la fuente web. La forma más efectiva es sobrescribiendo los descriptores de @font-face

La segunda forma es acelerando las fuentes web. Esto las hará disponibles para el navegador antes de que el navegador comience a renderizar. Una forma común de hacer esto es precargar tus fuentes web críticas.

Problemas de CLS causados por interacciones lentas del usuario

En el ejemplo de abajo, el botón de cargar más claramente provoca un cambio de diseño. Sin embargo, el cambio de diseño no se agregará a las métricas de CLS. Esto es porque este cambio de diseño es intencional.

Un navegador sabrá esto porque los elementos ahora visibles tienen un atributo llamado 'hadRecentInput'. Cuando este se establece en true Y el cambio de diseño ocurre dentro de los 500 ms del evento de entrada (el clic del botón), el cambio de diseño no será reportado por el navegador.

Asegúrate de que las interacciones del usuario se completen en menos de 500ms

Problemas de CLS causados por AJAX

AJAX permite que las páginas web se actualicen de forma asíncrona intercambiando datos con un servidor web en segundo plano. Obviamente, inyectar nuevo contenido en cualquier página web podría provocar un cambio de diseño masivo. Es por eso que es prudente reservar el espacio que se usará para el nuevo contenido. Obviamente no conoces la altura del nuevo contenido de antemano, pero lo que puedes hacer es hacer una estimación educada.

Por ejemplo, si el contenido AJAX promedio ocupa el 50% de la pantalla, es prudente reservar ese 50%. Cuando el nuevo contenido termina ocupando el 40 o 60% de la pantalla, el CLS (50% - 40% = 10% fracción de distancia) es aún mucho menor que el 50% de fracción de distancia.

Aquí hay un ejemplo de cómo hacer esto:

<style>
   #ajax{height:400px}
   #ajax.loaded{height:auto;}
</style>
<script>
   fetch('/ajax-content)
   .then(response => response.json())
   .then(result => {
      let el = document.getElementById('ajax');
      el.innerHTML(result.html);
      el.classList.add('loaded');
   })
<script>

Solucionar problemas de CLS causados por anuncios

Los anuncios a menudo se cargan (mucho) más tarde en la página. Esto hace que los Cumulative Layout Shifts causados por anuncios sean especialmente molestos. Cuando múltiples anuncios se están cargando en el viewport visible, 'la página simplemente no se queda quieta'. Para solucionar esto, también reserva el espacio para los anuncios, especialmente los anuncios en el viewport visible.

<style>
// rectangle mobile ad
.ad{min-height:250px;background:#dedede}
// banner desktop ad
@media only screen and (min-width: 600px) {
.ad{min-height:90px}
}
</style>