Резервирование места под изображения и медиа

Важность пространства для визуального контента

Одним из ключевых факторов показателя CLS (Cumulative Layout Shift) в Web Vitals является непредсказуемое смещение элементов страницы при её загрузке. Основной источник таких сдвигов — отсутствие заранее определённых размеров для изображений, видео и других медиа. Когда браузер не знает, сколько места выделить элементу до полной загрузки, страница «прыгает», что ухудшает восприятие пользователем и увеличивает показатель CLS.

Использование атрибутов width и height

Для изображений в HTML рекомендуется явно задавать атрибуты width и height. Эти значения указывают браузеру, сколько места выделять под элемент до загрузки фактического содержимого:

<img src="photo.jpg" width="600" height="400" alt="Описание изображения">

Браузер использует соотношение ширины к высоте (aspect ratio), чтобы корректно зарезервировать пространство и избежать смещения других элементов. Даже если изображение загружается медленно, макет страницы остаётся стабильным.

CSS-подходы к резервированию пространства

Если размеры изображения неизвестны заранее или элемент адаптивен, можно использовать отношение сторон через CSS. Например, при использовании контейнера с соотношением сторон 16:9:

.media-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9/16 * 100% */
}

.media-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Этот подход гарантирует, что элемент занимает заранее определённое пространство, а сдвиги других блоков минимизируются.

Загрузка видео и iframe

Для видео и встроенных iframe также необходимо резервировать место:

<iframe src="video.html" width="560" height="315" title="Пример видео"></iframe>

Для адаптивного дизайна используют CSS-соотношение сторон, аналогично изображению:

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* Соотношение 16:9 */
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Без этих мер, при загрузке видео или iframe блоки страницы будут смещаться, создавая высокий CLS.

Современные HTML-теги и атрибуты

HTML5 предлагает атрибут loading="lazy" для изображений, что позволяет откладывать их загрузку, но при этом важно сохранить зарезервированное пространство:

<img src="large-photo.jpg" width="1200" height="800" loading="lazy" alt="Пример">

Даже при ленивой загрузке браузер корректно выделяет пространство, предотвращая сдвиги макета.

Применение `aspect-ratio` в CSS

Современные браузеры поддерживают свойство aspect-ratio, которое позволяет задавать соотношение сторон без дополнительного padding-хаков:

img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

Эта техника упрощает резервирование места и делает макет более стабильным при динамической загрузке медиа.

Практика измерения и контроля CLS

Для оценки эффективности резервирования можно использовать библиотеку Web Vitals в Jav * aScript:

import {getCLS} from 'web-vitals';

getCLS(console.log);

Если значение CLS стабильно низкое (обычно <0.1), значит пространство под медиа зарезервировано корректно. Любые скачки указывают на элементы без фиксированного размера или некорректно рассчитанное соотношение сторон.