Что такое lazy loading

Что проверяют

Понимаете ли вы, что именно откладывается и чем за это платит страница. От фронтендера ждут, что он различит три разных механизма: отложенные изображения и фреймы, разделение бандла на части и отложенную подгрузку данных.

Как отвечать

Изображения и фреймы: атрибут loading="lazy" без единой строчки кода. Браузер сам не тянет их, пока они далеко от вьюпорта. Для случаев сложнее (бесконечный список, тяжёлый виджет) берут IntersectionObserver, для длинных однотипных блоков подходит content-visibility: auto.

Код: динамический import(), в React связка lazy и Suspense, в маршрутизации разбиение по роутам. Важная деталь: React.lazy грузит часть бандла при первом рендере компонента, а не при появлении в зоне видимости, привязку к прокрутке пишут сами.

Данные: подгрузка по мере прокрутки и пагинация вместо выдачи всего списка сразу.

Главная мысль ответа: приём не ускоряет страницу сам по себе, он переносит работу на потом. Выигрыш появляется, когда отложенное действительно не нужно сразу, и превращается в проигрыш, когда отложили то, что видно на первом экране.

Где спотыкаются

Вешают loading="lazy" на все изображения подряд, включая главное на первом экране. Оно и есть кандидат в LCP, ленивая загрузка прямо ухудшает метрику: такой картинке нужен fetchpriority="high" и обычная загрузка.

Не резервируют место. Без width и height или явного соотношения сторон подгружаемое изображение раздвигает вёрстку, и хорошая метрика загрузки оплачивается плохой метрикой сдвигов макета.

Забывают про запасной путь. Содержимое, которое появляется только после прокрутки и только скриптом, краулер может не увидеть, а пользователь на медленной сети остаётся перед пустым блоком: нужны состояние загрузки, скелет и разумный запас по расстоянию срабатывания.