🖼 Почему сайт «прыгает», пока загружаются картинки?
Открываете страницу, начинаете читать текст — и вдруг всё содержимое смещается вниз. Кнопка, на которую собирались нажать, оказывается в другом месте.
Причина часто не в медленном интернете, а в том, что браузер заранее не знает, сколько места потребуется изображению.
Что происходит технически?
Когда браузер получает HTML, он начинает строить страницу. Если у изображения не указаны размеры, место под него может не резервироваться.
Затем фотография загружается, браузер узнаёт её пропорции и перестраивает расположение элементов.
Это явление называется Layout Shift — сдвиг макета.
📐 Как предотвратить смещение?
Есть несколько технических решений:
• Указывать атрибуты width и height у изображений. Например: <img src="photo.jpg" width="800" height="600">.
• Использовать CSS-свойство aspect-ratio, чтобы браузер заранее знал пропорции блока.
• Для адаптивных изображений задавать max-width: 100% и height: auto, сохраняя правильное соотношение сторон.
• Для динамического контента заранее резервировать пространство под изображения.
💡 Как проверить результат?
В Google Lighthouse есть метрика CLS (Cumulative Layout Shift), которая оценивает визуальную стабильность страницы.
Хорошим считается показатель CLS не выше 0,1.
Важно понимать: даже быстро загружающийся сайт может иметь плохой CLS, если элементы неожиданно меняют положение.
Поэтому оптимизация изображений — это не только сжатие файлов и выбор WebP или AVIF.
Это ещё и правильное резервирование пространства, благодаря которому интерфейс остаётся стабильным с первых мгновений загрузки.
21 октября 2026 г. 4
