El defensor de los desarrolladores de rendimiento web de Google, Barry Pollard, ha aclarado cómo se mide el cambio de diseño acumulativo (CLS).

CLS cuantifica cuánto cambio de diseño inesperado se produce cuando una persona navega por su sitio.

Esta métrica es importante para el SEO, ya que es uno de los Core Web Vitals de Google. Las páginas con puntuaciones CLS bajas brindan una experiencia más estable, lo que potencialmente conduce a una mejor visibilidad de búsqueda.

¿Cómo se mide? Pollard abordó esta pregunta en un hilo sobre X.

Para Core Web Vitals, ¿en qué se mide CLS? ¿Por qué se considera que 0,1 no es bueno y 0,25 es malo, y qué representan esos números?

He tenido 3 conversaciones separadas sobre esto con varias personas en las últimas 24 horas, así que pensé que era hora de otro hilo profundo para explicar…

🧵 1/12 pic.twitter.com/zZoTur6Ad4

—Barry Pollard (@tunetheweb) 10 de octubre de 2024

Comprensión de la medición CLS

Pollard comenzó explicando la naturaleza de la medición CLS:

“CLS no tiene unidades, a diferencia de LCP e INP, que se miden en segundos/milisegundos”.

Aclaró además:

“Cada cambio de diseño se calcula multiplicando dos porcentajes o fracciones: qué se movió (fracción de impacto) cuánto se movió (fracción de distancia)”.

Este método de cálculo ayuda a cuantificar la gravedad de los cambios de diseño.

Como explicó Pollard:

“Toda la ventana gráfica se mueve hacia abajo; eso es peor que solo la mitad de la ventana gráfica se mueve hacia abajo. ¿Toda la ventana gráfica se mueve un poco hacia abajo? Eso no es tan malo como que toda la ventana gráfica se mueva mucho hacia abajo”.

Peor escenario

Pollard describió el peor de los casos para un único cambio de diseño:

“El cambio de diseño máximo es si el 100% de la ventana gráfica (fracción de impacto = 1,0) se mueve una ventana gráfica completa hacia abajo (fracción de distancia = 1,0).

Esto da una puntuación de cambio de diseño de 1,0 y es básicamente el peor tipo de cambio”.

Sin embargo, nos recuerda la naturaleza acumulativa de CLS:

“CLS es Cumulative Layout Shift, y esa primera palabra (acumulativa) importa. Tomamos todos los cambios individuales que ocurren en un corto espacio de tiempo (máximo 5 segundos) y los sumamos para obtener la puntuación CLS”.

Pollard explicó el razonamiento detrás de la ventana de medición de 5 segundos:

“Originalmente acumulamos TODOS los turnos, pero eso realmente no midió la UX, especialmente para las páginas abiertas durante mucho tiempo (piense en SPA o correo electrónico). ¡Medir todos los turnos significaba que, con suficiente tiempo, incluso las mejores páginas fallarían!

También señaló la puntuación CLS máxima teórica:

“Dado que cada elemento solo puede cambiar cuando se dibuja un fotograma y tenemos un límite de 5 segundos y la mayoría de los dispositivos funcionan a 60 fps, eso da un límite teórico en CLS de 5 segundos * 60 fps * 1,0 desplazamiento máximo = 300”.

Interpretación de puntuaciones CLS

Pollard abordó cómo interpretar las puntuaciones CLS:

“… ayuda pensar en CLS como un porcentaje de movimiento. El umbral bueno de 0,1 significa que aproximadamente la página se movió un 10%, lo que podría significar que toda la página se movió un 10%, o la mitad de la página se movió un 20%, o muchos pequeños movimientos fueron equivalentes a cualquiera de esos”.

En cuanto a los valores umbral específicos, Pollard explicó:

“Entonces, ¿por qué 0,1 es ‘bueno’ y 0,25 ‘malo’? Esto se explica aquí como una combinación de lo que quisiéramos (CLS = 0!) y lo que se puede lograr… 0,05 en realidad se podía lograr en la mediana, pero para muchos sitios no lo sería, por lo que subió un poco más”.

Ver también: Cómo se pueden medir los elementos básicos de la web

Por qué esto importa

Los conocimientos de Pollard brindan a los desarrolladores web y profesionales de SEO una comprensión más clara de la medición y optimización para CLS.

Mientras trabaja con CLS, tenga en cuenta estos puntos:

• CLS no tiene unidades y se calcula a partir de fracciones de impacto y distancia.
• Es acumulativo y mide los cambios en una ventana de 5 segundos.
• El umbral “bueno” de 0,1 equivale aproximadamente al 10% del movimiento de la ventana gráfica.
• Los puntajes de CLS pueden exceder 1.0 debido a la suma de múltiples turnos.
• Los umbrales (0,1 para “bueno”, 0,25 para “malo”) equilibran el desempeño ideal con objetivos alcanzables.

Con esta información, puede realizar ajustes para alcanzar el umbral de Google.

Imagen destacada: Piscina26/Shutterstock