Что такое Lazy Loading?
Техника подгрузки изображений и контента только при приближении к области видимости пользователя.
Lazy loading — техника отложенной загрузки ресурсов, при которой изображения, видео, iframe и другие тяжёлые элементы страницы не загружаются сразу при открытии, а лишь в момент, когда пользователь прокручивает контент до них. Это позволяет браузеру сначала отрисовать видимую часть страницы, не тратя трафик и время на объекты, до которых пользователь может и не добраться.
Техника реализуется несколькими способами: нативным атрибутом loading="lazy" в HTML (поддерживается всеми современными браузерами), через Intersection Observer API на JavaScript, а также с помощью популярных библиотек. Сегодня нативный атрибут считается предпочтительным подходом — он работает без лишнего JS и понятен браузеру на уровне разбора разметки.
Влияние на Core Web Vitals и ранжирование
Google использует метрики Core Web Vitals — в первую очередь LCP (Largest Contentful Paint) и FID/INP — как сигналы ранжирования. Lazy loading напрямую влияет на LCP: если главный экран страницы загружается быстрее, потому что браузер не тратит полосу пропускания на изображения внизу страницы, показатель улучшается. Однако здесь кроется важная ловушка: если добавить loading="lazy" к изображению-герою в верхней части страницы, LCP ухудшится — браузер начнёт загружать ключевое изображение позже, чем мог бы.
Яндекс также учитывает скорость загрузки в своём алгоритме. Проверить реальную скорость можно через PageSpeed Insights (который использует данные Chrome UX Report) или через отчёты Яндекс Метрики о скорости сайта. Важно анализировать именно полевые данные реальных пользователей, а не только лабораторные тесты.
Правильная настройка: что откладывать, а что нет
Главное правило: lazy loading применяется только к элементам за пределами первого экрана (below the fold). Изображения в шапке, логотип, главный баннер и любой контент, видимый при загрузке без прокрутки, должны загружаться немедленно. Для них рекомендуется противоположная директива — fetchpriority="high" или preload через тег link в head.
Под отложенную загрузку хорошо подходят: галереи изображений, карточки товаров в нижней части листинга, встроенные карты, iframe с видео с YouTube или Kinescope, виджеты отзывов. Отдельная практика — использовать placeholder (размытую миниатюру или цветовой блок нужных размеров) до момента загрузки реального изображения: это устраняет скачки макета и снижает CLS (Cumulative Layout Shift).
Как проверить корректность реализации
Откройте DevTools в Chrome, перейдите на вкладку Network и отфильтруйте запросы по типу Img. Обновите страницу и проверьте, какие изображения загрузились сразу, а какие — только при прокрутке. Изображения с атрибутом loading="lazy" должны появляться в Network именно в момент приближения к ним, а не при начальной загрузке.
Для системного аудита удобно использовать Lighthouse в PageSpeed Insights: он выдаёт конкретные рекомендации с указанием URL изображений, которые стоит отложить, и примерной экономией времени. Google Search Console в разделе «Основные интернет-показатели» покажет, у какой доли реальных страниц сайта есть проблемы с LCP и CLS — именно там чаще всего проявляются ошибки неправильно настроенного lazy loading.
Частые вопросы
Влияет ли lazy loading на индексацию изображений в Google и Яндексе?
Современные краулеры Google умеют выполнять JavaScript и индексируют изображения с отложенной загрузкой, однако рекомендуется использовать нативный атрибут loading="lazy" — он надёжнее для индексации, чем сложные JS-решения. Яндекс также поддерживает рендеринг JS, но скорость обхода может быть ниже, поэтому нативный подход предпочтительнее.
Чем lazy loading отличается от preloading?
Preloading — противоположная техника: браузеру явно указывают загрузить ресурс как можно раньше, до того как он встретится в разборе HTML. Preload используют для критических ресурсов первого экрана (шрифты, главное изображение), lazy loading — для всего остального, что можно отложить.
Обязательно ли указывать атрибуты width и height у изображений при использовании lazy loading?
Да, это важно. Без явных размеров браузер не резервирует место под изображение до его загрузки, что приводит к скачкам макета (CLS). Укажите width и height в HTML или задайте aspect-ratio в CSS — это устраняет проблему независимо от способа загрузки.
Какие инструменты помогут найти изображения, которые стоит перевести на lazy loading?
Запустите аудит в PageSpeed Insights или Lighthouse — раздел «Defer offscreen images» покажет конкретные ресурсы с потенциальной экономией. Дополнительно можно использовать расширение Web Vitals для Chrome, чтобы видеть метрики в реальном времени при прокрутке страницы.
Технический аудит сайта
Найдём и устраним технические ошибки, которые мешают росту позиций.
Помогаю бизнесу расти за счёт SEO, рекламы и продвижения в AI-поиске. Если нужно не просто понять термин, а применить его и получить заявки — расскажу, как это сделать в вашей нише.
