CLS mide movimiento inesperado después de que el contenido ya es visible, así que el diagnóstico útil consiste en identificar qué elemento se movió y qué información tardía cambió su geometría. Imágenes, fuentes, banners y embeds fallan por motivos distintos aunque la métrica sea la misma.
Captura el origen del layout shift
Usa las herramientas de layout shift o una grabación para identificar el elemento que se mueve y el que provoca el movimiento. La víctima visible no siempre es la causa.
Reserva dimensiones para medios
Imágenes, vídeo, anuncios y embeds necesitan aspect ratio o espacio mínimo estable antes de cargar. El responsive debe cambiar dimensiones de forma predecible, no después del load.
Revisa cambios métricos de fuentes
Una webfont tardía puede redimensionar texto y mover contenido. Compara métricas de fallback/final, line-height y `font-display` en vez de pre-cargar todas las fuentes.
Trata banners y consentimiento como layout
Cookie banners, promos y personalización deben superponerse de forma intencional o tener espacio reservado. Insertarlos arriba después de cargar crea desplazamientos evitables.
Vigila componentes renderizados por cliente
Carruseles, reviews, relacionados y widgets cambian altura tras API. Dales geometría estable o un placeholder realista.
Valida breakpoints y estados
Prueba login/logout, estados de consentimiento y viewports habituales. Un test desktop puede perder shifts móviles por wrapping, sticky UI o ratios distintos.
Para medios pesados combínalo con la sustitución segura de imágenes; si afecta a la hero, revisa también su comportamiento de LCP.