Introducción

Cls Explained

22 de marzo de 20265 min de lectura

Ver contenido

CLS (Cumulative Layout Shift): Entendiendo la Estabilidad Visual

Introducción

Cumulative Layout Shift (CLS) es uno de los Core Web Vitals de Google—un conjunto de métricas que miden la experiencia real del usuario en tu sitio web. CLS mide específicamente la estabilidad visual de tu página cuantificando cuánto movimiento de diseño inesperado ocurre durante la vida de la página.

¿Alguna vez hiciste clic en un botón solo para que la página se moviera y accidentalmente hicieras clic en otra cosa? ¿O empezaste a leer un artículo solo para perder tu lugar cuando un anuncio cargó arriba? Esa experiencia frustrante es exactamente lo que mide CLS.

¿Qué es CLS?

CLS mide la suma de todas las puntuaciones individuales de cambio de diseño que ocurren durante el ciclo de vida de una página. Un cambio de diseño ocurre cuando un elemento visible cambia su posición de un frame renderizado al siguiente sin interacción del usuario.

Cómo se Calcula CLS

Cada puntuación de cambio de diseño se calcula como:

Puntuación de Cambio = Fracción de Impacto × Fracción de Distancia

Fracción de Impacto: Porcentaje del viewport afectado por el cambio
Fracción de Distancia: Qué tan lejos se movieron los elementos (como % del viewport)

Ejemplo:

El elemento cubre 50% del viewport (fracción de impacto = 0.5)
El elemento se mueve 25% de la altura del viewport (fracción de distancia = 0.25)
Puntuación de Cambio = 0.5 × 0.25 = 0.125

Umbrales de CLS

Según la documentación de web.dev de Google, las puntuaciones de CLS se categorizan como:

✅ Bueno:           ≤ 0.1
⚠️ Necesita Mejora: 0.1 - 0.25
❌ Pobre:           > 0.25

Objetivo: Al menos el 75% de las visitas a la página deberían tener un CLS de 0.1 o menos.

Lo Que No Cuenta Como Cambio

No todo movimiento es malo. CLS solo cuenta cambios inesperados. Estos están excluidos:

Cambios causados por interacción del usuario (clics, escritura)
Cambios dentro de 500ms de entrada del usuario
Animaciones usando la propiedad CSS transform (no dispara layout)
Comportamiento de scroll suave

¿Por Qué es Importante CLS para el SEO?

CLS impacta directamente la visibilidad de búsqueda de tu sitio web y la experiencia de usuario:

Beneficios clave de un buen CLS:

Factor de ranking: Google confirmó los Core Web Vitals (incluyendo CLS) como señales de ranking en la actualización de Page Experience
Confianza del usuario: Las páginas estables se sienten más confiables y profesionales
Reducción de frustración: Los usuarios no hacen clic accidentalmente en elementos incorrectos
Mejor engagement: Los usuarios pueden leer e interactuar sin interrupciones
Accesibilidad: Los diseños estables son esenciales para usuarios con discapacidades motoras o que usan tecnologías asistivas

Impacto en el Mundo Real

Un CLS pobre puede llevar a:

Clics accidentales en anuncios en lugar de contenido
Usuarios perdiendo su posición de lectura
Envíos de formularios a inputs incorrectos
Errores en carrito de compras (agregar items incorrectos)
Desconfianza general hacia el sitio web

Causas Comunes de Cambios de Diseño

Entender qué causa los cambios de diseño es el primer paso para arreglarlos:

1. Imágenes Sin Dimensiones

Cuando las imágenes cargan sin dimensiones especificadas, el navegador no sabe cuánto espacio reservar:

<!-- ❌ Causa cambio de diseño -->
<img src="foto.jpg" alt="Foto">

<!-- ✅ Sin cambio de diseño -->
<img src="foto.jpg" alt="Foto" width="800" height="600">

2. Anuncios, Embeds e Iframes

Contenido dinámico que carga después del renderizado inicial de la página:

Página carga → Usuario comienza a leer
     ↓
Anuncio carga arriba del contenido
     ↓
Contenido se desplaza hacia abajo → Usuario pierde su lugar

3. Contenido Inyectado Dinámicamente

Contenido agregado por JavaScript después del renderizado inicial:

// ❌ Causa cambio cuando aparece el banner
document.body.insertBefore(banner, document.body.firstChild);

4. Fuentes Web (FOIT/FOUT)

Cuando las fuentes personalizadas cargan y reemplazan las fuentes de respaldo:

Fuente de respaldo renderiza → Fuente personalizada carga → Texto se reajusta
                                      ↓
                         Los caracteres tienen tamaños diferentes
                                      ↓
                         Ocurren cambios de diseño

5. Animaciones que Disparan Layout

Usando propiedades que causan recálculo de layout:

/* ❌ Causa cambios de diseño */
.elemento {
    animation: deslizar 1s;
}
@keyframes deslizar {
    from { margin-left: 0; }
    to { margin-left: 100px; }
}

/* ✅ Sin cambios de diseño */
.elemento {
    animation: deslizar 1s;
}
@keyframes deslizar {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
}

Mejores Prácticas Básicas

1. Siempre Establece Dimensiones de Imagen

<!-- Dimensiones explícitas -->
<img src="hero.jpg" width="1200" height="600" alt="Hero">

<!-- O usa aspect-ratio en CSS -->
<style>
img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}
</style>

2. Reserva Espacio para Contenido Dinámico

/* Reserva espacio para slot de anuncio */
.ad-container {
    min-height: 250px;
    background: #f0f0f0;
}

3. Usa CSS Transform para Animaciones

/* Usa transform en lugar de propiedades de layout */
.animate {
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
}
.animate.visible {
    transform: translateY(0);
    opacity: 1;
}

4. Precarga Fuentes y Usa font-display

<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

<style>
@font-face {
    font-family: 'FuentePersonalizada';
    src: url('/fonts/main.woff2') format('woff2');
    font-display: optional; /* Previene cambios por FOUT/FOIT */
}
</style>

Ejemplo Práctico

Aquí hay una comparación antes/después:

<!-- ❌ ANTES: Múltiples problemas de CLS -->
<header>
    <div class="banner"></div> <!-- Carga dinámicamente -->
    <nav>Navegación</nav>
</header>
<main>
    <img src="hero.jpg" alt="Hero"> <!-- Sin dimensiones -->
    <div class="ad-slot"></div> <!-- Sin espacio reservado -->
    <article>Contenido...</article>
</main>

<!-- ✅ DESPUÉS: CLS optimizado -->
<header>
    <div class="banner" style="min-height: 60px;"></div>
    <nav>Navegación</nav>
</header>
<main>
    <img src="hero.jpg" alt="Hero" width="1200" height="600">
    <div class="ad-slot" style="min-height: 250px;"></div>
    <article>Contenido...</article>
</main>

Cómo Verificar con UXR SEO Analyzer

La extensión UXR SEO Analyzer te ayuda a monitorear CLS:

Instala la extensión UXR SEO Analyzer en Chrome
Navega a cualquier página de tu sitio web
Abre la extensión
Ve a la pestaña “Performance”
Revisa el evaluador “CLS”

La extensión mostrará:

Puntuación actual de CLS
Si cumple el umbral de 0.1
Elementos que causaron cambios de diseño
Sugerencias de mejora

Próximos Pasos

¿Quieres dominar todas las técnicas avanzadas de optimización de CLS? Lee nuestra guía completa de optimización de CLS donde cubrimos:

Depuración de cambios de diseño con Chrome DevTools
Manejo de embeds y anuncios de terceros
Estrategias avanzadas de carga de fuentes
Skeleton screens y patrones de placeholder
Monitoreo de CLS en producción

Referencias

Este artículo cita las siguientes fuentes autorizadas:

[1] web.dev: Cumulative Layout Shift (CLS) https://web.dev/articles/cls Documentación oficial de Google que define la métrica CLS. Explica cómo se miden los cambios de diseño usando fracciones de impacto y distancia, el umbral de 0.1 para buena estabilidad visual, y por qué CLS es crítico para la experiencia de usuario.

[2] Google Search Central: Documentación de Page Experience https://developers.google.com/search/docs/appearance/page-experience Documentación oficial de Google Search confirmando Core Web Vitals como señales de ranking. Explica cómo CLS, junto con LCP e INP, contribuyen a la evaluación de experiencia de página y rankings de búsqueda.

[3] Chrome Developers: Chrome User Experience Report (CrUX) https://developer.chrome.com/docs/crux/methodology/metrics Documentación técnica sobre cómo se mide CLS en datos reales de usuarios de Chrome. Cubre la metodología del dataset CrUX, recolección de métricas, y cómo los datos de campo capturan los cambios de diseño realmente experimentados por usuarios.

Recursos Adicionales

PageSpeed Insights - Prueba el CLS de tu página y otros Core Web Vitals
Layout Shift GIF Generator - Visualiza cambios de diseño
Extensión Web Vitals - Monitoreo de Core Web Vitals en tiempo real

Nota: Este artículo es parte de nuestra serie de análisis SEO. Explora todos los artículos en el Hub de SEO de Rendimiento.

Fuentes: web.dev (CLS), Google Search Central (Page Experience), Chrome Developers (CrUX)

Cls Explained

CLS (Cumulative Layout Shift): Entendiendo la Estabilidad Visual

Introducción

¿Qué es CLS?

Cómo se Calcula CLS

Umbrales de CLS

Lo Que No Cuenta Como Cambio

¿Por Qué es Importante CLS para el SEO?

Beneficios clave de un buen CLS:

Impacto en el Mundo Real

Causas Comunes de Cambios de Diseño

1. Imágenes Sin Dimensiones

2. Anuncios, Embeds e Iframes

3. Contenido Inyectado Dinámicamente

4. Fuentes Web (FOIT/FOUT)

5. Animaciones que Disparan Layout

Mejores Prácticas Básicas

1. Siempre Establece Dimensiones de Imagen

2. Reserva Espacio para Contenido Dinámico

3. Usa CSS Transform para Animaciones

4. Precarga Fuentes y Usa font-display

Ejemplo Práctico

Cómo Verificar con UXR SEO Analyzer

Próximos Pasos

Artículos Relacionados:

Referencias

Recursos Adicionales

Artículos relacionados

Versión relacionada

Cls Optimization Guide

Hub de categoría

Performance Seo Hub

En la misma categoría

Lcp Explained

Inp Explained