El CLS ocurre cuando el contenido visible se mueve después de haber sido pintado, desplazando lo que el usuario estaba mirando. La causa es casi siempre contenido que carga sin espacio reservado.
El CLS ocurre cuando el contenido visible se mueve después de haber sido pintado, desplazando lo que el usuario estaba mirando. La causa es casi siempre contenido que carga sin espacio reservado.
top, height) en lugar de transform.width/height (o aspect-ratio) para que el espacio se reserve antes de la carga:<img src="/photo.jpg" width="1200" height="800" alt="..."> <!-- reserves the box -->
.hero { aspect-ratio: 16 / 9; } /* reserves ratio for responsive media */
font-display: optional o swap más size-adjust/preload para minimizar el reflow cuando llega la web font.position: absolute) o empújalo desde abajo.transform/opacity: se componen (composited) y no disparan layout.El CLS es la Core Web Vital más corregible: normalmente es un puñado de dimensiones que faltan. Los entrevistadores lo usan para comprobar si entiendes el pipeline de renderizado: reservar espacio por adelantado significa que el navegador nunca tiene que reajustar el layout, que es por lo que transform supera a animar top.
Una biblioteca de preguntas de entrevista de IT con respuestas detalladas — de Junior a Senior.
Donar