Как предотвратить layout shift средствами CSS?

Question

Accepted Answer

## CLS глазами CSS

Layout shift — когда элемент появляется/меняется размер и двигает соседей. CSS резервирует место заранее.

## Приёмы

- Явные **`width`/`height`** у img/video или **`aspect-ratio`** + `width: 100%`.
- Скелетоны/плейсхолдеры той же высоты, что контент.
- Шрифты: `font-display: optional` / метрики `@font-face`, чтобы fallback ≈ webfont.
- Избегать вставки баннеров сверху без зарезервированного слота.
- Для иконок/кнопок — фиксированный box, не «прыжок» после загрузки SVG.

```css
.thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #eee;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
```

## Итог

Резервируйте геометрию до загрузки контента и шрифтов — главный CSS-вклад в низкий CLS.