Guías

CLS, de Cumulative Layout Shift, es una de las Core Web Vitals de Google, las métricas que Google usa para valorar lo bien que se siente una página al usarla. CLS mide la estabilidad visual: mientras una página carga, ¿los elementos se quedan en su sitio o saltan de un lado a otro? Un CLS bajo significa que el diseño es estable y predecible; un CLS alto significa que el contenido se desplaza ante tus ojos justo cuando intentas leer una línea o tocar un botón, una de las cosas más frustrantes que puede hacer una página web.

Cómo se mide y puntúa el CLS

El nombre describe lo que captura. Es cumulativo porque suma los desplazamientos de diseño que ocurren durante la vida de la página, y un desplazamiento de diseño es cada vez que un elemento visible cambia de posición de un fotograma renderizado al siguiente sin que tú lo pidas. El movimiento que tú activas no cuenta: hacer clic en un enlace, abrir un acordeón o un menú es un movimiento esperado y se excluye. Una imagen que carga tarde y empuja hacia abajo el párrafo que estabas leyendo no es esperada, y es justo lo que CLS está diseñado para detectar.

CLS es una de las tres Core Web Vitals, junto con Largest Contentful Paint, que mide la carga, e Interaction to Next Paint, que mide la capacidad de respuesta. CLS es la que cubre la estabilidad visual. Una página puede cargar rápido y responder al instante y aun así puntuar mal en CLS si las cosas se mueven después de aparecer por primera vez, así que las tres métricas miden cualidades realmente distintas y una página necesita superarlas todas.

A diferencia de una métrica basada en tiempo como LCP o INP, CLS es una puntuación sin unidades en lugar de un número de milisegundos. Cada desplazamiento individual se puntúa multiplicando dos fracciones: la fracción de impacto, cuánto de la ventana gráfica afectaron los elementos que se movieron, y la fracción de distancia, cuánto se movieron en relación con la ventana gráfica. Esas puntuaciones de desplazamiento se combinan en el valor que Google reporta, de modo que cuentan tanto cuánto se movió como la distancia recorrida.

Los umbrales de Google

Los umbrales de Google, medidos en el percentil 75 de las cargas reales, son fáciles de recordar. Un CLS de 0,1 o menos es Good. Entre 0,1 y 0,25 es Needs improvement. Por encima de 0,25 es Poor. Como la puntuación es cumulativa, varios desplazamientos pequeños pueden sumar una nota de suspenso aunque ningún salto por sí solo parezca dramático, por lo que la estabilidad tiene que ser un hábito en toda la página y no un arreglo para un único elemento visible.

• Qué es: Cumulative Layout Shift, una de las tres Core Web Vitals, junto con Largest Contentful Paint e Interaction to Next Paint.
• Qué mide: la estabilidad visual, cuánto se mueve el contenido visible de forma inesperada mientras una página carga.
• Cómo se puntúa: un valor sin unidades que resulta de sumar puntuaciones de desplazamiento, cada una la fracción de impacto multiplicada por la fracción de distancia.
• Umbrales en el percentil 75: Good es 0,1 o menos, Needs improvement es de 0,1 a 0,25, Poor es por encima de 0,25.
• Cómo mejorarlo: definir dimensiones o aspect-ratio en los medios, reservar espacio para contenido tardío como anuncios y banners, ajustar las fuentes web y animar con transform.

Qué provoca los desplazamientos de diseño

La mayoría de los desplazamientos de diseño vienen de un puñado de causas conocidas. Las imágenes, vídeos e iframes insertados sin atributos width y height no tienen espacio reservado, así que el navegador tiene que recalcular el diseño cuando llegan y conoce su tamaño real. Las fuentes web pueden causar un desplazamiento cuando una fuente de reserva se sustituye por la fuente web y el texto se recompone en un tamaño distinto. Y el contenido inyectado por encima de lo que ya estás leyendo, como anuncios, incrustaciones o un banner tardío de cookies o consentimiento, empuja hacia abajo todo lo que hay debajo.

Cómo corregir y evitar los desplazamientos

Las correcciones se derivan directamente de las causas. Define siempre los atributos width y height en imágenes y vídeo, o reserva el espacio con la propiedad CSS aspect-ratio, para que el navegador conozca el tamaño antes de que cargue el medio. Reserva espacio para todo lo que llega tarde, incluidos los espacios publicitarios y los banners, en lugar de dejar que aparezca sobre el contenido existente. Para las fuentes web, usa la propiedad font-display y haz coincidir lo más posible las métricas de la fuente de reserva, para que el cambio mueva el texto lo menos posible.

La animación también importa. Si necesitas mover un elemento, anímalo con la propiedad CSS transform en lugar de cambiar propiedades como top, left, width o height. Las transforms las gestiona el compositor del navegador y no disparan un recálculo del diseño, así que mueven un elemento visualmente sin contar como un desplazamiento de diseño, lo que te permite mantener el movimiento en tu diseño sin perjudicar la puntuación.

Cómo medir el CLS

CLS se juzga mejor con datos de campo, usuarios reales en dispositivos y conexiones reales, que puedes ver en el Chrome User Experience Report y en el informe de Core Web Vitals de Google Search Console. Para depurar en laboratorio, el panel Performance de Chrome DevTools resalta los desplazamientos de diseño y los elementos responsables, Lighthouse informa de una cifra de CLS, y la biblioteca JavaScript web-vitals lo mide directamente en el navegador. En este sitio, nuestro verificador de web vitals te deja introducir tus valores medidos y ver al instante si superan los umbrales de Google.

En resumen

En resumen: CLS premia a las páginas cuyo diseño se queda quieto. La mayor parte del trabajo es defensivo, reservar espacio para imágenes, medios, fuentes y todo lo que se inyecta tarde para que nada tenga que empujar el contenido existente. Hazlo bien y una página se siente tranquila y estable en lugar de inestable, que es justo lo que la métrica busca fomentar.