Core Web Vitals: Indicador CLS – causas y métodos de optimización
El Core Web Vitals indicador CLS se ha convertido en una referencia para evaluar la estabilidad visual de una interfaz. Mide los desplazamientos inesperados que perturban la lectura y el uso de un contenido durante la carga o la navegación. Google lo integra en los web vitals para relacionar mejor la calidad técnica con la sensación real.
Un buen indicador CLS no se limita a una cifra en un informe. Refleja la capacidad de una página para mantenerse estable, sin desplazar bruscamente bloques, enlaces o botones. Para un proyecto editorial, de comercio electrónico o institucional, esta estabilidad influye directamente en la calidad percibida y en la conversión.
Las secciones siguientes explican el funcionamiento de esta métrica, los umbrales que hay que alcanzar, las causas más frecuentes y los métodos de optimización más eficaces. También verás qué herramientas utilizar para diagnosticar el problema y cómo leer los datos de campo con Google.
¿Qué es el CLS en los Core Web Vitals?
El CLS, por cumulative layout shift, mide la estabilidad visual de una interfaz durante su presentación. Cuanto más alta es la puntuación, más elementos se desplazan de manera imprevista en la pantalla. Google lo utiliza como métrica de calidad para identificar las experiencias visuales inestables.
En concreto, un usuario ve un botón, empieza a apuntar hacia una acción y, entonces, un bloque situado encima se carga y empuja todo hacia abajo. Este tipo de movimiento crea una mala sorpresa, aunque el contenido final sea correcto. Es precisamente lo que este indicador busca cuantificar.
Por qué esta métrica cuenta tanto
La estabilidad visual es esencial, porque condiciona la legibilidad y la confianza. Una interfaz que se mueve constantemente da la impresión de estar mal construida, aunque su tiempo de respuesta sea bueno. Por eso Google considera esta métrica una señal útil para evaluar la calidad global de un sitio.
En los core web vitals, cada indicador cubre un aspecto diferente de la presentación. El CLS se ocupa de los desplazamientos, mientras que otras métricas siguen la velocidad de renderizado o la capacidad de respuesta. El conjunto ofrece una visión más completa de la calidad percibida.
Lo que mide realmente un desplazamiento
Un desplazamiento no se penaliza únicamente porque exista. Debe ser inesperado, visible y susceptible de dificultar la lectura o la acción. Google busca así distinguir los movimientos normales de los desplazamientos problemáticos.
- Desplazamiento visible de un bloque de texto.
- Desplazamiento de un botón o de un enlace durante la carga.
- Inserción tardía de un elemento que empuja el resto del contenido.
¿Qué puntuación CLS hay que alcanzar?
El umbral recomendado por Google es una puntuación inferior o igual a 0,1. Entre 0,1 y 0,25, la situación se considera para vigilar. Por encima de 0,25, la estabilidad visual se vuelve claramente insuficiente.
Para seguir correctamente esta metrica, hay que observar la distribución de las visitas reales y no una sola ejecución en laboratorio. Google se apoya en particular en el percentil 75, lo que permite evaluar la experiencia vivida por la mayoría de las sesiones en lugar de un caso aislado.
Cómo interpretar los umbrales
Un buen resultado significa que la mayoría de los visitantes no sufre un desplazamiento molesto. Un resultado medio indica que una parte de las sesiones todavía encuentra inestabilidades. Un mal resultado suele reflejar un problema estructural en el diseño o en la carga de los recursos.
- 0 a 0,1: buen nivel.
- 0,1 a 0,25: mejora recomendada.
- Por encima de 0,25: prioridad alta.
Por qué el percentil es importante
El percentil 75 evita sobreestimar o subestimar un resultado. Una sola sesión muy estable no basta para garantizar un buen indicador, del mismo modo que una sesión aislada perturbada no debe falsearlo todo. Por eso Google prioriza una visión más representativa del tráfico.
Este enfoque ayuda a seguir las variaciones de comportamiento según los dispositivos, la caché o la calidad de la red. Es especialmente útil para gestionar un sitio a gran escala, donde las condiciones reales varían mucho.
¿Cómo se calcula la puntuación CLS?
El cálculo se basa en dos componentes: la fracción de impacto y la fracción de distancia. La primera corresponde a la superficie visible afectada por el desplazamiento, la segunda a la amplitud del movimiento con respecto a la ventana. Su producto da el peso de un evento en la medición.
Google no tiene en cuenta todos los desplazamientos de la misma manera. Los cambios sucesivos se agrupan en una ventana de sesión, también llamada ráfaga, lo que evita acumular movimientos muy alejados en el tiempo. Esta lógica permite reflejar las secuencias realmente perturbadoras.
Fracción de impacto y fracción de distancia
La fracción de impacto representa la parte de la pantalla que se ha visto afectada. Si un gran bloque de texto se desplaza, el valor sube rápidamente. La fracción de distancia mide, por su parte, la distancia recorrida por ese elemento dentro de la zona visible.
El producto de ambas ofrece un resultado más matizado que un simple recuento de eventos. Es lo que hace que la métrica sea pertinente para evaluar la intensidad real de un desplazamiento visual.
Ventana de sesión de 5 segundos
Google agrupa los desplazamientos próximos en una ventana máxima de 5 segundos. Si los desplazamientos están separados por más de 1 segundo, puede empezar una nueva ráfaga. Esto evita que un problema antiguo siga cargando de forma artificial el resultado.
Esta regla permite identificar las secuencias en las que varios elementos se mueven de forma encadenada. Para el diagnóstico, es un punto clave, porque el problema suele venir de un conjunto de elementos inyectados en el mismo momento.
¿Qué desplazamientos de diseño se tienen en cuenta?
No todos los movimientos se consideran problemáticos. Google excluye los desplazamientos provocados directamente por una acción voluntaria, porque son esperados. El objetivo es centrarse en lo que sorprende al usuario durante la lectura o la navegación.
La noción de layout shift no apunta, por tanto, a cualquier cambio de posición. Se aplica sobre todo a los desplazamientos inesperados, a los comportamientos diferidos y a los bloques que se redimensionan sin reservar espacio.
Los desplazamientos esperados
Un movimiento causado por un clic, un toque o una apertura voluntaria suele ignorarse si el sistema identifica la interacción como reciente. Google utiliza en particular un marcador de tipo hadRecentInput para filtrar estos casos. En la práctica, esto evita penalizar una acción deseada.
La regla de los 500 milisegundos después de una acción es importante. Si el desplazamiento se produce demasiado tarde, puede dejar de considerarse legítimo. El comportamiento debe, por tanto, mantenerse cerca de la intención inicial para quedar excluido del cálculo.
Los desplazamientos inesperados
Los cambios que se producen sin un gesto claro del usuario se tienen en cuenta. Esto incluye los bloques publicitarios, las imágenes sin tamaño reservado, los banners, los tooltips tardíos o los módulos inyectados a posteriori. Suelen ser los casos más costosos en calidad percibida.
En realidad, el navegador no puede adivinar que un espacio va a agrandarse de repente. Cuando el diseño no se anticipa, el resto del contenido debe reorganizarse, lo que crea el desplazamiento que mide Google.
¿Cuáles son las principales causas de un mal CLS?
Las causas más frecuentes están relacionadas con la ausencia de reserva de espacio. Una imagen sin dimensiones, una publicidad que se inserta tarde o una fuente que cambia el tamaño del texto pueden bastar para degradar mucho el resultado. El problema suele ser más visible en producción que en desarrollo.
En local, la caché, los recursos ya cargados y las condiciones de prueba enmascaran a veces los defectos. En un entorno real, los navegadores deben lidiar con conexiones variadas, scripts de terceros y contenidos personalizados. Google observa entonces desplazamientos que las pruebas internas no siempre revelan.
Medios sin dimensiones
Las imágenes y los vídeos sin anchura ni altura reservadas provocan un recálculo del diseño cuando llegan. El navegador debe entonces empujar los bloques siguientes hacia abajo o desplazarlos lateralmente. Es una fuente clásica de mala estabilidad.
El caso es aún más visible en zonas editoriales con muchos medios. Cuando un gran visual se muestra después del texto, la lectura se interrumpe y el contenido salta bruscamente.
Publicidad, widgets y contenido inyectado
Los espacios publicitarios que cambian de tamaño están entre las causas más frecuentes. Un widget social, una recomendación de producto o un banner informativo también pueden desplazar el diseño si se cargan demasiado tarde. Google penaliza sobre todo las zonas que se insertan por encima del contenido ya visible.
Los componentes de terceros suelen ser imprevisibles, porque su tamaño depende de scripts externos o de datos asíncronos. Para optimizar la estabilidad, hay que reservar un espacio fijo y evitar las inserciones repentinas en el flujo.
Fuentes web y renderizado tipográfico
Una fuente cargada tarde puede modificar el tamaño de los caracteres y hacer que las líneas se muevan. El fenómeno FOUT, o sustitución de fuente, es un caso habitual. Si las métricas tipográficas cambian, la longitud de los párrafos varía y los bloques de alrededor se reorganizan.
Para reducir este riesgo, conviene utilizar font-display: swap con prudencia y precargar las fuentes críticas. Este tipo de ajuste limita las diferencias entre la fuente de reserva y la fuente final.
¿Hay que analizar el CLS en laboratorio o en campo?
Ambos enfoques son útiles, pero no responden a la misma pregunta. Las mediciones de laboratorio sirven para diagnosticar un problema en un entorno controlado. Los datos de campo describen lo que viven los visitantes reales en condiciones variadas.
Google recomienda priorizar el dato real para la gestión del SEO, porque refleja mejor la diversidad de dispositivos, navegadores y condiciones de red. Un buen diagnóstico combina, por tanto, inspección local y observación de los usos reales.
Por qué los resultados pueden diverger
Una prueba en laboratorio no ve forzosamente las variaciones relacionadas con la caché, el contenido personalizado o el bfcache. Algunos navegadores restauran la página de forma diferente cuando un usuario vuelve atrás. Estos comportamientos modifican el resultado final.
En producción, los recorridos reales son más complejos. Un visitante puede llegar a una zona con promociones, otro a otra variante, y Google observa entonces diferencias que no aparecen en una prueba única.
Qué dato priorizar
Para una decisión de priorización, el dato de campo debe ir primero. Permite saber si el problema afecta a un gran número de visitas o solo a un escenario poco frecuente. Las pruebas de laboratorio sirven después para reproducir y corregir el defecto.
Esta lógica evita corregir un detalle teórico mientras persiste un bloqueo real para los usuarios. También permite medir el efecto de una corrección a lo largo del tiempo.
¿Qué herramientas utilizar para medir el CLS?
Varias herramientas permiten observar esta métrica desde ángulos diferentes. Algunas sirven para el seguimiento en campo, otras para el diagnóstico técnico, y otras para la auditoría puntual. La elección adecuada depende del momento en que se interviene.
Google ofrece varias fuentes complementarias para leer la estabilidad visual. A menudo resulta pertinente cruzar una herramienta de monitorización real y una herramienta de análisis local para comprender el problema en su contexto.
Las soluciones que hay que priorizar
- Search Console: útil para detectar los grupos de URL afectados.
- PageSpeed Insights: práctica para relacionar datos de campo y diagnósticos.
- Lighthouse: eficaz en laboratorio para detectar las causas.
- Chrome DevTools: útil para visualizar los desplazamientos en el navegador.
- CrUX: fuente de datos reales agregados por Google.
Cómo elegir según el objetivo
Para vigilar la tendencia global, los datos agregados son los más útiles. Para corregir un defecto preciso, un diagnóstico local será más pertinente. PageSpeed Insight y Google Search Console suelen ser complementarios, porque ayudan a relacionar la observación con URL concretas.
El informe de campo muestra lo que ocurre realmente, mientras que el análisis en laboratorio ayuda a comprender por qué. Esta combinación ofrece una visión más fiable de la situación.
Utilizar la herramienta web-vitals en desarrollo
La biblioteca web-vitals permite instrumentar fácilmente la recopilación en el lado del navegador. Ofrece una base fiable para enviar las señales a tu sistema de análisis. Es un buen recurso para seguir las evoluciones sin esperar un informe agregado.
En la práctica, es preferible transmitir los datos en el momento en que la pestaña pasa a segundo plano o justo antes del cierre. Esto reduce la pérdida de información y mejora la calidad de la medición.
¿Cómo medir el CLS en JavaScript?
La medición en el lado del navegador se basa en la observación de las entradas de tipo layout-shift mediante PerformanceObserver. En cada evento, es posible registrar el valor, agrupar las secuencias y calcular el acumulado pertinente. Este enfoque permite seguir la métrica en tiempo real.
Google recomienda enviar los resultados al final de una sesión o al pasar a segundo plano. Ese momento es importante, porque suele corresponder al último valor útil antes de que el usuario abandone el navegador.
Observar los eventos de desplazamiento
El navegador expone señales que es posible agregar para obtener una medición fiable. La idea no es solo contar los movimientos, sino conservar los desplazamientos significativos dentro de la ventana temporal adecuada. Esto evita las interpretaciones erróneas.
Una implementación bien pensada también permite distinguir los eventos provocados por el usuario de los demás. Se puede entonces transmitir una información aprovechable para la gestión de producto o SEO.
Cuándo enviar los datos
El buen momento para transmitir la información es el final del recorrido útil. Si el usuario cambia de pestaña o abandona la página, los últimos valores deben recuperarse de inmediato. Esto limita las pérdidas debidas a la interrupción del script.
En un entorno de navegador, esta lógica mejora la fiabilidad del seguimiento en sesiones cortas o inestables. Complementa bien los informes que ofrece Google.
¿Cómo evitar el CLS causado por las imágenes y los vídeos?
La primera regla consiste en reservar el espacio antes de la carga del medio. Añadir width y height a los medios permite al navegador calcular el espacio necesario desde el principio. Es el método más sencillo para evitar un desplazamiento inesperado.
Cuando las dimensiones no se conocen de antemano, técnicas CSS como aspect-ratio pueden tomar el relevo. Mantienen una plantilla estable durante la llegada del visual.
Reservar el espacio adecuado desde el principio
Un medio que llega sin marco obliga al navegador a reorganizar la estructura. Si el espacio ya está reservado, la presentación se vuelve más fluida y el resultado parece más limpio. Esta regla vale para las imágenes, los vídeos y las miniaturas enriquecidas.
En interfaces con muchos elementos, este simple ajuste puede mejorar claramente la estabilidad global. También evita los efectos dominó en los bloques situados debajo.
Optimizar los medios de forma coherente
No basta con comprimir una imagen para resolver el problema. También hay que lograr que su integración visual sea anticipada por el navegador. Una buena optimización combina peso reducido, dimensiones conocidas y espacio reservado.
Para los vídeos integrados, conviene prever un contenedor estable incluso antes de la reproducción. Esto limita las reorganizaciones en el momento en que el recurso está disponible.
¿Cómo influyen las fuentes web en el CLS?
Las fuentes web pueden modificar el renderizado del texto cuando sustituyen a una fuente del sistema temporal. Si las métricas de los caracteres no son parecidas, las líneas se reorganizan y los bloques se mueven. El resultado se vuelve entonces menos estable.
Google detecta estos efectos como desplazamientos de diseño, sobre todo cuando afectan a párrafos largos o a zonas de navegación. Por eso hay que prever el comportamiento tipográfico desde el diseño.
Reducir los efectos de sustitución
El parámetro font-display: swap permite mostrar rápidamente un texto legible mientras se espera la fuente final. Esto mejora la percepción de velocidad, pero hay que verificar que el cambio no cree una variación de anchura demasiado fuerte. La elección de las fuentes de reserva cuenta mucho.
La precarga de las fuentes críticas también ayuda a reducir el retraso. Cuanto menos tarda la fuente en llegar, menor es el riesgo de desplazamiento.
Estabilizar la tipografía
Una estrategia tipográfica coherente limita las sorpresas. Se aconseja elegir fuentes secundarias parecidas a la fuente principal en altura, grosor y anchura. El objetivo es mantener una presentación estable incluso en caso de latencia.
En un entorno muy editorial, este punto puede marcar una verdadera diferencia. Una lectura continua mejora la satisfacción y reduce las interrupciones visuales.
¿Cómo limitar el CLS vinculado a la publicidad y a los contenidos de terceros?
Las publicidades, los pop-ups, los banners y los widgets externos son fuentes frecuentes de inestabilidad. A menudo llegan después del resto del contenido y pueden ampliar su zona sin avisar. Google considera entonces este comportamiento como un desplazamiento penalizador.
La buena práctica consiste en reservar un espacio fijo incluso antes de que el componente se cargue. Esta anticipación evita que el resto del diseño se reorganice con urgencia.
Reservar un espacio dedicado
Un contenedor de tamaño conocido protege la estructura global. Aunque el módulo de terceros se cargue más tarde, no necesitará empujar los demás bloques. El resultado parece más limpio y más fiable.
Esta lógica es especialmente útil para los espacios publicitarios, los módulos de recomendación y los banners promocionales. Limita los efectos visibles por encima del texto principal.
Evitar las inserciones bruscas
Insertar un bloque en medio de un flujo ya presentado es una mala práctica si el espacio no estaba previsto. Es mejor situar estos elementos en una zona reservada o al final del contenido. La interfaz se mantiene entonces más estable.
Cuando una adición dinámica es imprescindible, hay que preservar como mínimo el espacio antes de su llegada. Es una regla sencilla, pero muy eficaz para mejorar el resultado.
¿Qué animaciones utilizar sin degradar el CLS?
Las animaciones no están prohibidas, pero deben evitar las propiedades que fuerzan un recálculo del diseño. Las transiciones basadas en top, left, width o height corren el riesgo de desplazar otros elementos. Esto puede degradar el indicador aunque el efecto visual parezca fluido.
Google y las buenas prácticas de desarrollo recomiendan priorizar transform: translate() y transform: scale(). Estas propiedades actúan de forma más limpia sobre el renderizado sin alterar toda la estructura.
Las propiedades que hay que priorizar
- transform: translate() para desplazar un bloque.
- transform: scale() para agrandar o reducir visualmente.
- opacity para crear una transición discreta.
Los errores que hay que evitar
Modificar la altura o la anchura de un bloque para animar su apertura suele ser arriesgado. El entorno de alrededor debe recalcularse entonces, lo que puede provocar efectos en cascada. Una animación visualmente agradable puede, por tanto, seguir siendo técnicamente costosa.
Es mejor anticipar el espacio necesario y dejar que la animación actúe dentro de ese marco. Este método permite mejorar el confort visual sin penalizar la estabilidad.
¿Qué lugar ocupa el CLS entre los Core Web Vitals?
En los core web vitals, el CLS complementa a los indicadores relacionados con la velocidad y la capacidad de respuesta. El LCP mide la aparición del elemento principal, mientras que otras métricas evalúan la capacidad de respuesta. El CLS se centra en la estabilidad visual, lo que lo convierte en un indicador complementario pero esencial.
Google considera estas señales en conjunto para valorar la calidad global de una interfaz. Un buen resultado en una métrica no siempre compensa un defecto importante en otra, de ahí el interés de seguir el conjunto.
Un indicador que no hay que aislar
Un buen CLS no basta si el resto del recorrido es lento o poco reactivo. A la inversa, una interfaz rápida pero inestable sigue siendo perjudicial para el uso. Los web vitals deben, por tanto, leerse como un conjunto coherente.
Esta lectura global ayuda a jerarquizar las correcciones. También permite explicar mejor las prioridades a los equipos de producto, editoriales y técnicos.
¿Cuál es el impacto del CLS en el SEO y en la experiencia de usuario?
Google tiene en cuenta la estabilidad visual en su evaluación de calidad. Un buen indicador contribuye a una mejor percepción del resultado y a una navegación más cómoda. A contenido equivalente, una interfaz estable puede marcar la diferencia.
El efecto también es indirecto en el comportamiento de los visitantes. Cuando los elementos no se mueven de forma imprevisible, la lectura se mantiene fluida, los clics son más seguros y la confianza aumenta. Es un punto importante tanto para el SEO como para la conversión.
Efectos en la satisfacción y en la conversión
Una interfaz que salta al cargar puede provocar errores de clic, frustración y, a veces, un abandono. Google observa este tipo de señales de manera indirecta a través de la calidad percibida. Para un sitio de comercio o editorial, la estabilidad se convierte entonces en una verdadera palanca de rendimiento.
Al mejorar esta métrica, se reduce el riesgo de interrupción de la lectura y se refuerza la credibilidad. El beneficio suele ser visible en los recorridos largos o en las interfaces con muchos módulos.
Una lógica de optimización duradera
Mejorar esta métrica no se basa en una corrección única, sino en una serie de buenas prácticas aplicadas a toda la cadena. Reservar el espacio, cargar correctamente los recursos, controlar los scripts de terceros y seguir los datos reales permiten mantener un buen nivel a lo largo del tiempo.
Google valora los entornos estables, porque ofrecen una mejor calidad de uso. Por eso la medición regular, el análisis de las regresiones y la optimización continua siguen siendo imprescindibles.
Lo que hay que recordar sobre el Core Web Vitals indicador CLS
El CLS mide la estabilidad visual e identifica los desplazamientos inesperados que perturban la lectura. Para mantenerse en la zona recomendada por Google, hay que aspirar a una puntuación inferior a 0,1 y vigilar los datos de campo de forma prioritaria. Las causas más frecuentes tienen que ver con las imágenes, las fuentes, los elementos de terceros y las inserciones dinámicas.
El mejor enfoque consiste en anticipar los espacios, utilizar las herramientas adecuadas y validar las correcciones tanto en el navegador como en los informes de Google. Manteniendo esta lógica de estabilidad, puedes mejorar de forma duradera la calidad percibida y la eficacia global de tus web vitals.
