CLS

(Cumulative Layout Shift)

Nivel Principiante

Imagina que estás en una página web y, de repente, algo se mueve sin que lo esperes, haciendo que pierdas el lugar de lo que estabas leyendo o que le des clic a algo que no querías. El CLS (Cumulative Layout Shift) es una medida de cuánto y con qué frecuencia se mueven las cosas en una página web mientras se carga. Un CLS bajo significa que la página se carga de forma estable, sin saltos molestos, lo que hace que la experiencia sea mucho más agradable.

Nivel Intermedio

El CLS (Cumulative Layout Shift) es una de las métricas de Core Web Vitals de Google que mide la inestabilidad visual de una página web. Un shift o cambio de diseño ocurre cuando un elemento visible cambia de posición de forma inesperada mientras la página se está cargando. El CLS calcula un puntaje sumando los puntajes de todos los cambios de diseño inesperados que ocurren durante la vida útil de la página. El objetivo es que las páginas tengan un CLS bajo.

Los cambios de diseño suelen ser causados por:

Imágenes o videos sin dimensiones: Si el navegador no sabe el tamaño de una imagen, reserva espacio para ella, pero si la imagen es más grande de lo esperado, el contenido que está debajo se moverá.
Anuncios o iframes: Los anuncios que se cargan de forma asíncrona pueden mover el contenido de la página.
Fuentes web: Si una fuente se carga tarde, el texto puede cambiar de tamaño, causando un movimiento.
Contenido inyectado dinámicamente: El contenido que se añade a la página después de la carga inicial.

Un CLS bajo (< 0.1) es crucial para una buena Experiencia de Usuario (UX) y para un mejor posicionamiento en el SEO.

Nivel Avanzado

Técnicamente, el CLS es una métrica de rendimiento que se calcula con base en dos factores: el impacto de la fracción y la distancia de la fracción.

Impacto de la Fracción (Impact Fraction): El área de la ventana gráfica que se ve afectada por un cambio de diseño. Es el área combinada de los elementos inestables y los que se mueven, dividida por el área total de la ventana gráfica.
Distancia de la Fracción (Distance Fraction): La distancia que se ha movido el elemento inestable, dividida por el tamaño de la ventana gráfica.

El puntaje del CLS se calcula como el producto de estas dos fracciones:

CLS Score=Impacto de la Fraccioˊn×Distancia de la Fraccioˊn

Para optimizar el CLS, los desarrolladores deben:

Especificar las dimensiones de los elementos: Usar atributos width y height en las etiquetas <img> y <video> para que el navegador pueda reservar el espacio adecuado antes de que el recurso se cargue.
Reservar espacio para anuncios: Reservar el espacio para los anuncios antes de que se carguen.
Utilizar font-display: optional o font-display: swap: Para controlar el comportamiento de las fuentes y evitar cambios en el diseño.
Evitar la inyección de contenido dinámico: Evitar añadir contenido a la página después de la carga inicial.

El CLS es una métrica fundamental para la calidad de la experiencia en la web, ya que una página estable y sin shifts inesperados es una señal de que el sitio está bien diseñado y optimizado para los usuarios.

« Volver al índice del glosario