Lazy loading изображений сокращает время загрузки страницы, экономит трафик и улучшает Core Web Vitals. Как настроить атрибут loading=lazy, проверить работу и исправить типичные ошибки.
Пользователь открывает страницу, а браузер начинает загружать все изображения подряд — даже те, которые находятся внизу страницы и которые пользователь, возможно, никогда не увидит. Это замедляет загрузку, тратит трафик и ухудшает Core Web Vitals. Ленивая загрузка (lazy loading) решает эту проблему: изображения загружаются только тогда, когда пользователь доскролливает до них. Страница открывается быстрее, сервер испытывает меньшую нагрузку, пользователь доволен. Для SEO это критично, потому что скорость загрузки — доказанный фактор ранжирования. Более того, lazy loading напрямую влияет на LCP (Largest Contentful Paint) — один из трёх показателей Core Web Vitals, которые Google использует при оценке сайта. В этой статье разберём, как работает ленивая загрузка, как её настроить и как проверить, что она работает правильно.
Что такое lazy loading и как он работает
Lazy loading — это техника отложенной загрузки контента. Вместо того чтобы загружать все изображения при открытии страницы, браузер загружает только те, которые находятся в видимой области экрана. Остальные изображения подгружаются по мере прокрутки страницы, когда пользователь приближается к ним. Работает это так: в HTML-коде изображения вместо обычного атрибута src используется data-src. Браузер не загружает изображение, пока оно не понадобится. Когда пользователь доскролливает до места, где находится изображение, JavaScript-код подставляет data-src в src, и браузер начинает загрузку. Либо используется нативный атрибут loading=lazy, который поддерживается всеми современными браузерами и не требует JavaScript. При нативной ленивой загрузке браузер сам решает, когда загрузить изображение, основываясь на его позиции относительно видимой области. Современный стандарт — именно нативный loading=lazy, потому что он простой, быстрый и не зависит от JavaScript. Проверить, использует ли ваш сайт ленивую загрузку, можно через Проверка ленивой загрузки изображений.
Зачем нужна ленивая загрузка для SEO
Ленивая загрузка влияет на три ключевых аспекта. Первый — скорость. Страница с 20 изображениями без lazy loading загружает все 20 сразу. Даже если они оптимизированы, это сотни килобайт трафика. С lazy loading страница загружает 3-5 изображений, видимых на первом экране, а остальные подгружаются по мере прокрутки. Время до полной загрузки сокращается в разы. Второй аспект — Core Web Vitals. LCP (Largest Contentful Paint) измеряет, как быстро появляется самое большое изображение в видимой области. Если это изображение загружается с задержкой, LCP ухудшается. Ленивая загрузка позволяет загрузить LCP-изображение в первую очередь, а остальные — потом. Третий аспект — экономия трафика. Если пользователь не доскролливает до конца страницы, изображения внизу не загружаются вообще. Он экономит мобильный трафик, а вы — ресурсы сервера. Для мобильных пользователей это особенно важно, потому что у них часто медленный интернет и ограниченный трафик. Поисковики учитывают все эти факторы при ранжировании, поэтому lazy loading — это не просто техническая фишка, а SEO-инструмент.
Как настроить нативную ленивую загрузку
Нативный lazy loading — это самый простой способ. Достаточно добавить атрибут loading=lazy в тег img. Синтаксис: img src=image.jpg alt=Описание loading=lazy. Всё. Браузер сам обработает отложенную загрузку. Никакого JavaScript не нужно. Поддержка: Chrome с 76 версии (2019 год), Firefox с 75, Safari с 15.4 (2022 год). Сегодня нативный lazy loading поддерживают все актуальные браузеры, поэтому использовать его можно без ограничений. Для изображений, которые должны загружаться сразу (например, LCP-изображение на первом экране), используйте loading=eager или просто не указывайте атрибут. Важно: не применяйте loading=lazy к LCP-изображению. Если самое большое изображение на первом экране имеет loading=lazy, браузер может отложить его загрузку, и LCP ухудшится. Правило простое: изображения выше линии сгиба (первый экран) — loading=eager, ниже — loading=lazy. Если вы используете WordPress, ленивая загрузка включена по умолчанию с версии 5.5 для всех изображений, кроме первого на странице. В других CMS она может требовать ручной настройки. Проверить, работает ли lazy loading на вашем сайте, можно через Проверка ленивой загрузки.
Ленивая загрузка через JavaScript-библиотеки
Если нативный loading=lazy по какой-то причине не подходит (например, нужно поддерживать очень старые браузеры или нужна более тонкая настройка), используются JavaScript-библиотеки. Самая популярная — Lozad.js, лёгкая библиотека на 1 КБ, которая использует IntersectionObserver API. Другая — Vanilla LazyLoad, более функциональная, с поддержкой фоновых изображений, видео и iframe. Ещё одна — yall.js, библиотека, которая поддерживает не только изображения, но и отложенную загрузку скриптов. Принцип работы всех библиотек одинаковый: изображения получают data-src вместо src, библиотека отслеживает позицию изображений и подставляет src, когда изображение попадает в зону видимости. Важно: при использовании JavaScript-библиотек ленивая загрузка не работает, если JavaScript отключён или не загрузился. Поэтому нативный loading=lazy предпочтительнее — он работает всегда. Если вы используете JavaScript-библиотеку, добавьте fallback: тег noscript с обычным img для пользователей без JavaScript. Иначе изображения вообще не загрузятся. Подробнее об оптимизации JavaScript читайте в статье Оптимизация JavaScript и CSS для скорости сайта.
Ленивая загрузка фоновых изображений и видео
Атрибут loading=lazy работает только для тега img и iframe. Фоновые изображения, заданные через CSS (background-image), не могут использовать нативный lazy loading. Для них нужно использовать JavaScript. Принцип тот же: вместо background-image в CSS используется data-bg, а скрипт подставляет значение при прокрутке. Либо можно использовать CSS-свойство content-visibility: auto, которое указывает браузеру отложить рендеринг невидимых элементов. Для видео ленивая загрузка также важна. Видеофайлы тяжелее изображений в десятки раз, и их отложенная загрузка даёт максимальный эффект. Для iframe с YouTube или Rutube используйте loading=lazy в теге iframe. Это отложит загрузку плеера до момента, когда пользователь доскроллит до видео. Но помните: если вы используете фасад (заглушку) для видео — превью-изображение с кнопкой Play, то сам iframe загружается только после клика. Это ещё более эффективный подход, чем lazy loading, потому что плеер не грузится вообще, пока пользователь не нажмёт.
Типичные ошибки при настройке lazy loading
Ошибка первая: lazy loading на LCP-изображении. Как мы уже говорили, это ухудшает Largest Contentful Paint и, как следствие, позиции. Решение: для изображения на первом экране используйте loading=eager или fetchpriority=high. Ошибка вторая: lazy loading на всех изображениях без разбора. Если на странице 100 изображений и все с loading=lazy, браузер всё равно будет загружать их по мере прокрутки, но если пользователь быстро скроллит, изображения могут не успевать загружаться, и он увидит пустые места. Решение: применяйте lazy loading только к изображениям ниже второго экрана. Ошибка третья: отсутствие размеров у изображений. Если у img не указаны width и height, браузер не знает, сколько места резервировать. При ленивой загрузке это приводит к сдвигам макета (CLS — Cumulative Layout Shift), что ухудшает Core Web Vitals. Решение: всегда указывайте width и height или используйте CSS aspect-ratio. Ошибка четвёртая: использование data-src без fallback. Если JavaScript не загрузился, изображения не загрузятся вообще. Решение: добавьте noscript-fallback для критичных изображений. Ошибка пятая: проверка lazy loading «на глаз». Человек не может визуально определить, работает ли отложенная загрузка. Используйте Проверка ленивой загрузки изображений — инструмент покажет, какие изображения имеют loading=lazy, а какие нет.
Как проверить, что lazy loading работает
Самый простой способ — открыть инструменты разработчика в браузере (F12), перейти на вкладку Network и обновить страницу. Вы увидите список загружаемых файлов. Если lazy loading работает, изображения ниже первого экрана не появятся в списке до тех пор, пока вы не прокрутите страницу вниз. Прокрутите страницу — и вы увидите, как новые изображения появляются в Network. Это значит, что отложенная загрузка функционирует. Более точный способ — инструмент Проверка ленивой загрузки изображений в SerpMax. Он анализирует HTML-код страницы и показывает: сколько изображений используют loading=lazy, сколько используют data-src с JavaScript, сколько не используют ничего. Если инструмент показывает, что ленивая загрузка не используется — пора настраивать. Также проверьте Core Web Vitals через Скорость загрузки сайта и Core Web Vitals — улучшение LCP и CLS после настройки lazy loading будет заметно в отчётах.
Ленивая загрузка и мобильные устройства
Для мобильных устройств lazy loading особенно важен. Мобильный интернет медленнее, трафик ограничен, а пользователи нетерпеливы. По данным Google, 53% мобильных пользователей покидают сайт, если он грузится дольше 3 секунд. Ленивая загрузка сокращает время загрузки мобильной страницы на 30-50%, особенно если на странице много изображений. Кроме того, mobile-first индексация Google означает, что именно мобильная версия сайта определяет его позиции. Если мобильная версия тормозит из-за изображений, страдают позиции. Нативный loading=lazy работает одинаково хорошо на мобильных и десктопных браузерах, потому что это стандарт HTML. Никаких дополнительных настроек для мобильных не требуется. Просто добавьте атрибут к изображениям — и они будут лениво загружаться на всех устройствах. Проверьте мобильную версию сайта через Мобильная оптимизация сайта — убедитесь, что ленивая загрузка работает и на мобильных.
Часто задаваемые вопросы
Обязательно ли использовать ленивую загрузку изображений?
Да, если на странице больше 3-5 изображений. Ленивая загрузка сокращает время загрузки, экономит трафик и улучшает Core Web Vitals. Для сайтов с большим количеством изображений (интернет-магазины, блоги, каталоги) lazy loading — это обязательная практика.
Как проверить, работает ли lazy loading на сайте?
Откройте инструменты разработчика в браузере (F12 → Network), обновите страницу и прокрутите вниз. Изображения ниже первого экрана должны появляться в списке загрузки только после прокрутки. Либо используйте инструмент проверки ленивой загрузки в SerpMax.
Улучшает ли lazy loading позиции в поиске?
Напрямую lazy loading не фактор ранжирования. Но он улучшает скорость загрузки и Core Web Vitals — а это доказанные факторы ранжирования. Поэтому косвенно lazy loading помогает позициям.
Можно ли использовать loading=lazy для всех изображений?
Нет. Изображения на первом экране, особенно LCP-изображение, должны загружаться сразу — используйте loading=eager или не указывайте атрибут. Lazy loading применяется только к изображениям ниже линии сгиба.
