Detecta los movimientos inesperados
El CLS no excluye todo movimiento intencionado. La métrica deja fuera los desplazamientos que ocurren dentro de los 500 ms posteriores a una entrada cualificada del usuario, pero una respuesta retrasada a una entrada sí puede contar. Usa ventanas de sesión, así que inspecciona las entradas reales de desplazamiento de diseño en lugar de suponer que una sola animación explica la puntuación.
Cómo inspeccionarlo
Usa los datos de campo para saber si el problema afecta a visitantes reales, y después reprodúcelo en una traza de rendimiento con los marcadores de desplazamiento de diseño. Inspecciona el elemento que se movió y el elemento que provocó el movimiento: pueden ser distintos. Prueba las visitas en frío y las repetidas, porque las fuentes y los recursos en caché pueden ocultar un problema de la primera carga.
Cómo implementarlo o mejorarlo
Reserva el ancho, el alto o la relación de aspecto de los medios, asigna una región fija o acotada a los módulos dinámicos y evita inyectar contenido encima de un control ya visible. Si una fuente cambia sus métricas, elige un respaldo compatible o ajusta la estrategia de carga de fuentes. Vuelve a comprobar el foco del teclado y los puntos de ruptura responsive después de cada cambio.
Límites y errores habituales
No elimines transiciones legítimas iniciadas por el usuario solo para mejorar una métrica. El objetivo es una maquetación predecible antes y durante la lectura, no una puntuación sintética desligada de la interfaz.
Una comprobación centrada del CLS tiene tres pasadas: carga en frío, estado de interacción y punto de ruptura responsive. En la traza de carga en frío, anota qué elemento se movió y qué recurso tardío lo causó. En un estado de interacción, distingue una expansión iniciada por el usuario de una inserción inesperada encima del control activo. En un punto de ruptura, comprueba si una imagen, un espacio publicitario o un banner de consentimiento pierde su geometría reservada. Una corrección concreta es definir el ancho y el alto, o la relación de aspecto, del contenedor de la imagen antes de que lleguen sus bytes, y después verificar que la rejilla, el orden de foco y la posición del scroll se mantienen estables en una pantalla estrecha. No reserves espacio excesivo y arbitrario solo para bajar la métrica: la página debe seguir pareciendo intencionada.