Ленивая загрузка (lazy loading) — это техника отложенной подгрузки изображений, видео и iframe только при приближении к области видимости. Простыми словами, браузер не тянет всё сразу, а ждёт, пока пользователь доскроллит до элемента. Нативная поддержка через атрибут loading="lazy" появилась в Chrome 76 (2019), затем в Firefox 75 и Safari 15.4.
Отложенная загрузка напрямую влияет на Core Web Vitals: ускоряется первая отрисовка, экономится трафик мобильных пользователей. Что это значит на практике — LCP падает на 20–40%, а вес стартовой страницы снижается в 2–3 раза. Проверить эффект можно в PageSpeed Insights и отчёте CrUX.
§ 01Зачем нужен
Ленивая загрузка решает задачу экономии ресурсов: на странице с 50 фото браузер скачивает только 5–7 видимых, остальные — по мере скролла. Зачем это нужно — мобильный трафик дорогой, а Google с июня 2021 учитывает LCP ≤ 2.5 с как фактор ранжирования. Как работает механизм: браузер использует IntersectionObserver и подгружает ресурс при подходе к viewport за 1250 px (порог Chrome).
§ 02Как настраивается
Нативный способ — атрибут loading="lazy" на тегах <img> и <iframe>. Для видео используют preload="none". Что делает разработчик дополнительно:
- задаёт
widthиheight— иначе CLS вырастет; - для первого экрана ставит
loading="eager"иfetchpriority="high"; - через библиотеку lazysizes покрывает старые браузеры.
Отложенная загрузка LCP-картинки — частая ошибка, John Mueller предупреждал об этом в 2022.
LCP 3.8 → 1.9 c — Интернет-магазин одежды на Shopify подключил native lazy-loading через loading='lazy' для карточек товара ниже первого экрана. LCP упал с 3.8 до 1.9 с за 4 недели, трафик с мобильных +12%. Замер через PSI и CrUX-75th.
вес страницы −58% — Медиа-портал про автомобили на WordPress внедрил IntersectionObserver для 40+ изображений и YouTube-iframe в лонгридах. Вес первой загрузки упал с 4.6 до 1.9 МБ за 3 недели, отказы −18%. Динамика по GA4 и WebPageTest.
§ 03Где смотреть результат
Эффект ленивой загрузки виден в трёх инструментах. PageSpeed Insights показывает LCP, Total Blocking Time и вес страницы до и после. Search Console → Core Web Vitals агрегирует полевые данные за 28 дней. Chrome DevTools → вкладка Network с фильтром Img покажет, какие картинки реально отложились. Что это значит для аудита — если после внедрения LCP не снизился, значит, отложен сам hero-баннер.
§ 04Подводные камни
Отложенная загрузка ломает SEO, если применить её к LCP-элементу — Google в 2023 явно указал на это в документации web.dev. Другие грабли: отсутствие width/height даёт CLS > 0.1, а скрипты-полифиллы на старых проектах конфликтуют с нативным loading="lazy". Зачем это знать — Screaming Frog и Ahrefs Site Audit отдельно флагают изображения без размеров и lazy-LCP как ошибки приоритета 1.