Lazy Load — это техника отложенной загрузки контента, при которой изображения, видео и другие ресурсы подгружаются только когда пользователь прокручивает страницу до них. Вместо того чтобы грузить всё сразу при открытии сайта, браузер скачивает лишь то, что сейчас видно на экране.
Результат ощутим: страница открывается в 2–3 раза быстрее, особенно на мобильных устройствах и при слабом интернете. Google учитывает скорость загрузки в ранжировании, поэтому внедрение Lazy Load напрямую влияет на SEO и поведенческие факторы.
Как работает отложенная загрузка
Браузер загружает страницу сверху вниз. Без Lazy Load он скачивает все картинки и видео сразу, даже те, что находятся в самом низу. С включённой ленивой загрузкой браузер ставит ресурсы в очередь и подгружает их по мере прокрутки.
Технически это реализуется двумя способами. Первый — нативный атрибут loading="lazy", который поддерживают современные браузеры. Второй — JavaScript-скрипты, отслеживающие положение элементов через Intersection Observer API. Когда элемент попадает в зону видимости (viewport), скрипт заменяет заглушку на реальный URL ресурса.
Браузер обычно начинает подгрузку чуть раньше, чем элемент появляется на экране — за 1–2 экрана до него. Это создаёт эффект мгновенной загрузки: пользователь скролит, а картинки уже на месте.
Что можно загружать отложенно
Самый очевидный кандидат — изображения. Особенно критично для блогов, интернет-магазинов, портфолио, где на странице десятки картинок. Отложенная загрузка сокращает начальный вес страницы с 3–5 МБ до 300–500 КБ.
Дальше идут видео и iframe — встроенные YouTube-ролики, карты Google Maps, виджеты соцсетей. Iframe с видео может весить 1–2 МБ, даже если пользователь его не смотрит. Lazy Load откладывает загрузку до клика или прокрутки.
Фоновые изображения CSS тоже поддаются оптимизации, но требуют отдельной логики. JavaScript проверяет видимость блока и динамически подставляет свойство background-image через inline-стили или добавление класса.
Некоторые внедряют отложенную загрузку для скриптов и стилей, не критичных для первого экрана. Например, виджет чата или форму подписки можно подгружать через 2–3 секунды после загрузки основного контента.
| Тип контента | Экономия трафика | Прирост скорости |
|---|---|---|
| Изображения | 60–80% | 2–3 секунды на LCP |
| Видео и iframe | до 90% | 1–2 секунды |
| Фоновые изображения | 30–50% | 0,5–1 секунда |
Встроенные решения браузеров
С 2019 года Chrome, Edge и Firefox поддерживают нативную отложенную загрузку через атрибут loading="lazy". Достаточно добавить его к тегу <img> или <iframe>, и браузер сам решает, когда подгружать ресурс.
<img src="photo.jpg" alt="Описание" loading="lazy"> <iframe src="https://www.youtube.com/embed/video" loading="lazy"></iframe>
Преимущества: не нужен JavaScript, работает быстро, не влияет на вёрстку. Недостатки: Safari добавил поддержку только в версии 15.4 (2022 год), старые браузеры игнорируют атрибут. Если ваша аудитория на 10–15% сидит с устаревших устройств, потребуется фолбэк.
Браузеры используют разные пороги срабатывания. Chrome начинает подгрузку за 3000 пикселей до элемента на быстром соединении, за 1250 пикселей на медленном. Firefox действует консервативнее — за 200 пикселей, что может вызывать мелькание заглушек при быстрой прокрутке.
Как проверить поддержку
Откройте DevTools (F12), вкладка Network, отфильтруйте по Img. Прокрутите страницу — новые запросы должны появляться по мере скролла. Если все картинки грузятся сразу, либо атрибут не сработал, либо браузер его не поддерживает.
Плагины и скрипты для внедрения
Для WordPress самые популярные плагины — a3 Lazy Load, Lazy Load by WP Rocket, встроенные функции в Jetpack. Они автоматически добавляют атрибуты или JS-обработчики ко всем изображениям, iframe, видео.
Если вы не используете WordPress или хотите полный контроль, подключите библиотеку lazysizes (6 КБ в сжатом виде). Добавьте класс lazyload к элементам, замените src на data-src, и скрипт сам подгрузит ресурсы.
<img data-src="image.jpg" class="lazyload" alt="Описание"> <script src="lazysizes.min.js" async></script>
Альтернативы: lozad.js (1,5 КБ, использует Intersection Observer), vanilla-lazyload (3 КБ, поддерживает фоновые изображения и responsive-картинки). Все три библиотеки работают без jQuery.
Для iframe с видео есть специализированное решение — lite-youtube-embed. Оно заменяет тяжёлый iframe на лёгкую превью-картинку (20 КБ против 1,5 МБ), настоящий плеер подгружается только при клике.
Настройка порога загрузки
В lazysizes можно задать, за сколько пикселей до элемента начинать загрузку:
window.lazySizesConfig = window.lazySizesConfig || {};
lazySizesConfig.expand = 500; // 500px до элемента
Для медленных сайтов ставьте 700–1000, чтобы картинки успевали подгружаться. Для быстрых хватит 200–300, это снижает избыточный трафик.
Измерение результата в PageSpeed Insights
PageSpeed Insights (PSI) — бесплатный инструмент Google, который показывает реальное влияние оптимизаций на скорость. Откройте pagespeed.web.dev, вставьте URL, запустите анализ.
До внедрения Lazy Load PSI часто ругается на рекомендацию «Отложите загрузку скрытых изображений». После внедрения эта подсказка исчезает, а ключевые метрики улучшаются:
- LCP (Largest Contentful Paint) — время загрузки самого большого элемента на экране. Lazy Load снижает конкуренцию за канал, LCP ускоряется на 1–3 секунды.
- TBT (Total Blocking Time) — время блокировки главного потока. Меньше ресурсов = меньше работы браузеру = ниже TBT.
- Speed Index — скорость визуального заполнения экрана. Картинки выше фолда грузятся первыми, остальные ждут, индекс падает на 20–40%.
Обратите внимание на вкладку «Возможности» (Opportunities). Там PSI покажет, сколько килобайт и секунд вы сэкономили конкретно на отложенной загрузке. Типичная экономия для блога на WordPress — 1,5–2,5 секунды на мобильном 3G.
Частые ошибки после внедрения
Если Score упал или появились новые предупреждения, проверьте:
- Первый экран не должен лениво загружаться. Изображения выше фолда ставьте
loading="eager"или вообще без атрибута. - Убедитесь, что у всех
<img>прописаны атрибутыwidthиheight. Иначе браузер не резервирует место, страница прыгает при загрузке (высокий CLS). - Если используете JS-библиотеку, подключайте её с атрибутом
asyncилиdefer, чтобы не блокировать рендеринг.
Сравните результаты до и после на одном устройстве и одном типе соединения (Mobile 3G). Разница в 20–30 баллов Score и 2–3 секунды LCP — норма для страницы с 10+ изображениями.
Частые вопросы
Ускоряет. Страница загружается быстрее, потому что браузер скачивает только то, что сейчас на экране. Остальное подгружается по мере прокрутки, экономя трафик и время.
Да, достаточно добавить атрибут loading="lazy" к тегам img и iframe. Современные браузеры поддерживают это нативно, JavaScript не нужен.
Те, что находятся в первом экране (above the fold). Если применить Lazy Load к главному баннеру или логотипу, они появятся с задержкой, это ухудшит LCP и пользовательский опыт.
Откройте DevTools (F12), вкладка Network, фильтр Img. Обновите страницу и прокрутите вниз — новые запросы должны появляться по мере скролла, а не все сразу при загрузке.
Положительно. Google учитывает скорость загрузки в ранжировании, особенно для мобильных устройств. Быстрее сайт — лучше позиции. Главное — не применяйте отложенную загрузку к контенту первого экрана.
