El CLS Core Web Vitals se ha convertido en una de las señales más vigiladas por Google para valorar la calidad de una página web, ya que refleja directamente la frustración que siente un usuario cuando el contenido se mueve mientras intenta leerlo o hacer clic. Una puntuación alta de CLS delata saltos visuales molestos que ahuyentan visitas y perjudican tu posicionamiento en buscadores. En esta guía descubrirás 7 técnicas definitivas para entender el CLS Core Web Vitals, medirlo con precisión y reducirlo de forma duradera en 2026.
1. Qué mide realmente el CLS Core Web Vitals
El CLS Core Web Vitals calcula la estabilidad visual de una página sumando todos los desplazamientos inesperados de elementos visibles durante la carga. Cuanto más cerca de cero esté esta cifra, más estable resulta la experiencia para quien navega.
Google considera bueno un CLS por debajo de 0,1, aceptable entre 0,1 y 0,25, y deficiente por encima de ese umbral. Esta métrica forma parte de los tres Core Web Vitals junto al LCP y al INP.
2. Definir dimensiones explícitas en imágenes y vídeos
La causa más habitual de un salto de maquetación son las imágenes o vídeos sin ancho y alto definidos en el HTML, ya que el navegador no puede reservar el espacio antes de que el archivo termine de descargarse.
Añade siempre los atributos width y height (o la propiedad CSS aspect-ratio) a cada elemento multimedia. Este simple hábito elimina buena parte del CLS Core Web Vitals detectado en muchos sitios.
3. Reservar espacio para anuncios, banners e iframes
Los bloques publicitarios que se cargan de forma asíncrona son una fuente frecuente de inestabilidad visual, porque su tamaño final solo se conoce una vez que el script externo termina de cargar.
Reserva un contenedor de altura fija (min-height) para cada hueco publicitario antes de que el anuncio se muestre. Así evitarás que el contenido principal se desplace de golpe hacia abajo.
4. Precargar las fuentes web para evitar el FOIT y el FOUT
El cambio de tipografía durante la carga (de una fuente del sistema a una personalizada) suele provocar un ligero redimensionamiento del texto, generando un salto de maquetación medible.
Usa <link rel="preload"> para tus fuentes críticas y la propiedad CSS font-display: optional o swap según tus prioridades, para limitar su impacto en el CLS Core Web Vitals de tus páginas con más tráfico.
5. Evitar insertar contenido encima de lo que ya está visible
Los avisos de cookies, notificaciones o widgets que se inyectan dinámicamente en la parte superior de la página son una causa clásica de salto brusco justo después de la carga inicial.
Si un elemento debe aparecer de forma dinámica, resérvale un espacio ya previsto en el diseño o colócalo como superposición (overlay) que no empuje el resto del contenido.
6. Priorizar las transformaciones CSS frente a propiedades que fuerzan un reflow
Animar propiedades como top, left, width o height obliga al navegador a recalcular la maquetación en cada fotograma, lo que puede generar desplazamientos visibles.
Sustituye esas animaciones por propiedades transform y opacity, que el compositor gráfico gestiona sin recalcular nunca la maquetación, sin afectar así al CLS Core Web Vitals.
7. Medir y monitorizar el CLS Core Web Vitals con las herramientas adecuadas
No se puede mejorar lo que no se mide: utiliza Google Search Console (informe de Core Web Vitals), PageSpeed Insights o Lighthouse para identificar las páginas más afectadas y los elementos responsables de cada salto.
Para profundizar en el cálculo técnico del CLS, la documentación oficial de web.dev sobre la optimización del CLS detalla cada tipo de desplazamiento y las soluciones recomendadas por Google.
Este trabajo de estabilización visual complementa de forma natural los esfuerzos ya realizados sobre los demás Core Web Vitals: si aún no lo has leído, nuestra guía sobre el INP Core Web Vitals te ayudará a optimizar también la capacidad de respuesta de tu sitio.
Conclusión
Reducir el CLS Core Web Vitals no es un simple detalle técnico: es un factor directo de comodidad de lectura, tasa de conversión y posicionamiento SEO. Aplicando estas 7 técnicas (dimensiones explícitas, espacio reservado para publicidad, precarga de fuentes, gestión cuidadosa de inserciones dinámicas, animaciones con transform y medición constante), lograrás una experiencia visual estable y duradera en tu sitio durante 2026.