Что lazy loading делает на самом деле
Lazy loading откладывает загрузку всего, что вне экрана, до того момента, пока посетитель действительно не долистает до него. Странице с сорока изображениями не нужно скачивать все сорок до того, как станет видно первое — только несколько сверху.
Это лёгкая победа, и именно поэтому хочется применить её везде по умолчанию — привычка, которая создаёт столько же проблем, сколько решает.
Ловушка: lazy loading на элементе LCP
Самая частая ошибка — применить lazy loading к хиро-изображению или чему бы ни был другой элемент Largest Contentful Paint. Отложить загрузку именно того, что измеряет Lighthouse, значит ухудшить балл, а не улучшить его — браузер даже не начинает его загружать, пока посетитель не прокрутит, а этого по определению ещё не произошло.
Всё, что выше первого экрана, должно грузиться сразу. Lazy loading окупается, начиная чуть ниже — там, куда посетитель действительно ещё не дошёл.
Как сделать правильно для изображений и видео
Для изображений у каждого элемента с lazy loading всё равно должны быть явно заданы width и height, чтобы браузер заранее зарезервировал место до прихода изображения. Пропустите это — и страница будет «прыгать» при появлении каждой картинки — именно это измеряет и штрафует Cumulative Layout Shift.
Видео нужна та же логика, но в своём виде: poster-изображение, чтобы было что показать до начала воспроизведения, и preload в none или metadata вместо auto, чтобы видео, которое никто пока не смотрит, незаметно не расходовало трафик в фоне.
Настройка по умолчанию, а не вручная
Ни одной из этих вещей команда не должна вспоминать настраивать на каждой новой странице. Это настройка по умолчанию, которая либо заложена в то, как проект собран, либо тихо пропадает. Остальную картину того, что нужно высокому баллу, мы разобрали в Оптимизации сайта на Webflow до 95+ баллов Lighthouse.
Если медиа на сайте тянет балл вниз или страница заметно «прыгает» при загрузке, напишите нам, и мы настроим стратегию загрузки.