CLS происходит, когда видимое содержимое перемещается после того, как оно уже было отрисовано, сдвигая то, на что смотрел пользователь. Причина почти всегда — содержимое, которое загружается без зарезервированного места.
CLS происходит, когда видимое содержимое перемещается после того, как оно уже было отрисовано, сдвигая то, на что смотрел пользователь. Причина почти всегда — содержимое, которое загружается без зарезервированного места.
top, height) вместо transform.width/height (или aspect-ratio), чтобы место резервировалось до загрузки:<img src="/photo.jpg" width="1200" height="800" alt="..."> <!-- резервирует бокс -->
.hero { aspect-ratio: 16 / 9; } /* резервирует пропорции для адаптивного медиа */
font-display: optional или swap плюс size-adjust/preload, чтобы минимизировать переверстку при поступлении веб-шрифта.position: absolute) или проталкивайте снизу.transform/opacity — они композитятся и не запускают layout.CLS — самый исправимый Core Web Vital: обычно это горстка отсутствующих размеров. Интервьюеры используют его, чтобы проверить, понимаете ли вы конвейер рендеринга: резервирование места заранее означает, что браузеру никогда не приходится переверстывать — вот почему transform лучше, чем анимация top.
Библиотека вопросов для IT-собеседований с подробными ответами — от Junior до Senior.
Поддержать