WordPress Lazy Load: как настроить отложенную загрузку изображений

Несколько месяцев назад ко мне обратился клиент с интернет-магазином на WordPress - около 800 товаров, каждый с 5-10 фотографиями. Страница категории весила под 15 МБ, грузилась 8-12 секунд на мобильных, а конверсия была ниже плинтуса. Когда я открыл DevTools и посмотрел, что браузер загружает при первом открытии страницы - там были все 200+ изображений разом, включая те, что находились в самом низу страницы, куда большинство пользователей вообще не доходило. Именно тогда первое, что я сделал - включил отложенную загрузку изображений. Время загрузки упало до 2,8 секунды без единого изменения в коде, хостинге или размере самих файлов.

Я Андрей Зенков, руководитель веб-студии «Мельница». С 2013 года работаю с WordPress-проектами - от блогов до нагруженных интернет-магазинов. В этой статье разбираю lazy load для WordPress: что это такое, как работает встроенный механизм начиная с версии 5.5, какие плагины стоит использовать (a3 Lazy Load, WP Rocket, Lazy Load for Videos, OmniVideo), как подключить ленивую загрузку без плагина через functions.php, и каких ошибок нужно избегать, чтобы не навредить SEO и Core Web Vitals.

Один из первых и наиболее эффективных шагов для ускорения WordPress-сайта с большим количеством изображений - включить lazy load: встроенный атрибут loading="lazy" работает с версии 5.5 автоматически, а плагины WP Rocket и a3 Lazy Load дают расширенный контроль над отложенной загрузкой видео, iframe и фоновых картинок.

Что не войдёт в статью: сжатие изображений, CDN, кэширование и оптимизация серверной части - это отдельные большие темы. Здесь только про lazy load: механизм, инструменты, настройка и типичные ошибки.

Что такое Lazy Load и как работает отложенная загрузка

Когда браузер открывает обычную HTML-страницу, его движок по умолчанию загружает все ресурсы, которые встречает в разметке - изображения, видео, iframe - независимо от того, видит ли пользователь эти элементы прямо сейчас или они находятся далеко за пределами экрана. На странице с 50 фотографиями это означает 50 HTTP-запросов и мегабайты данных сразу при открытии, даже если посетитель прочитал заголовок и закрыл вкладку.

Lazy load - это принцип отложенной загрузки контента: браузер не запрашивает изображение до тех пор, пока оно не попадает в область видимости пользователя (viewport) или не приближается к ней. Ресурс загружается «по мере необходимости» - то есть в тот момент, когда пользователь прокрутит страницу достаточно близко к этому элементу. Всё остальное остаётся в режиме ожидания.

Технически современный lazy load основан на Intersection Observer API - механизме браузера, который обнаруживает, появляется ли элемент в текущей области видимости. Intersection Observer API работает асинхронно: браузер сам следит за пересечением элемента с viewport и уведомляет JavaScript только тогда, когда элемент попадает в заданную зону. Это эффективнее старых подходов через обработчик события scroll.

Параллельно с JS-подходом существует нативный lazy load - атрибут loading lazy в HTML, записываемый как loading. Его браузерный движок обрабатывает самостоятельно, без единой строки JavaScript. Достаточно добавить атрибут к тегу:

<img src="photo.jpg" alt="Описание" loading="lazy">
<iframe src="video.html" loading="lazy"></iframe>

Атрибут loading принимает два значения: lazy - откладывает загрузку до приближения к viewport, и eager - загружает немедленно независимо от положения на странице. Значение eager используется, когда нужно отменить отложенную загрузку для конкретного элемента - например, для главного изображения в шапке, которое пользователь видит первым.

Ключевое понятие здесь - viewport: видимая область браузера. Браузер начинает загрузку изображения с loading="lazy" чуть заранее - когда до элемента остаётся определённое расстояние. Этот порог зависит от браузера и скорости соединения. В Chrome - примерно 1250 пикселей при медленной сети, чтобы изображение успело загрузиться к моменту, когда пользователь прокрутит до него.

Пока изображение ещё не попало в зону загрузки, на его месте могут показываться плейсхолдеры - пустое пространство, блок с цветом фона, размытая миниатюра (техника LQIP - Low Quality Image Placeholder) или анимированный спиннер. Это зависит от реализации: нативный атрибут просто оставляет пустое место, а JavaScript-плагины позволяют настраивать внешний вид заглушки.

Практический эффект заметный: отложенная загрузка изображений сокращает время загрузки первого экрана, снижает потребление трафика (особенно важно для мобильных пользователей), уменьшает нагрузку на сервер. Особенно ощутим для сайтов с большим числом изображений: объём данных при первой загрузке сокращается в 3-8 раз.

Важно понимать разницу между двумя подходами к реализации. Нативный атрибут - проще, надёжнее, работает без JavaScript, поддерживается всеми современными браузерами. JavaScript-реализация через Intersection Observer - даёт больше контроля: кастомные плейсхолдеры, управление порогом загрузки, поддержка фоновых изображений в CSS, которые нативный атрибут не обрабатывает. В большинстве WordPress-проектов разумно использовать нативный атрибут как основу и добавлять JS-плагин только если нужны дополнительные возможности.

Как WordPress реализует Lazy Load встроенными средствами

До версии 5.5 WordPress не имел встроенной поддержки lazy load. С 5.5 (август 2020) на сайте WordPress отложенная загрузка изображений работает автоматически из коробки.

Как это работает на практике: функция wp_lazy_loading_enabled() в ядре проверяет, нужно ли добавлять атрибут, а функция wp_filter_content_tags() проходит по HTML-контенту и добавляет loading="lazy" к тегам <img>, у которых этого атрибута ещё нет. Все изображения, вставленные через стандартный редактор блоков или классический редактор, получают атрибут автоматически.

Вот как выглядит результат в HTML-коде страницы после обработки WordPress:

<img src="wp-content/uploads/2024/01/photo.jpg"
 class="wp-image-123"
 width="800"
 height="600"
 alt="Описание фото"
 loading="lazy">

Атрибут loading="lazy" добавляется ко всем изображениям в теле записи, в виджетах и в других местах, которые проходят через стандартные фильтры WordPress. Проверить, что механизм работает, можно прямо в браузере: откройте любую страницу сайта, щёлкните правой кнопкой по любому изображению ниже первого экрана, выберите «Просмотр кода элемента» - атрибут loading="lazy" должен быть там.

В WordPress 5.7 (март 2021) поддержка была расширена на теги <iframe>. Атрибут loading="lazy" стал применяться к iframe, встроенная загрузка изображений и iframe через WordPress отложенная загрузка изображений теперь охватывает оба типа элементов. Это важно для страниц, где используются встроенные видео через iframe - например, вставки с YouTube через стандартный блок «Видео» в Gutenberg.

Самое важное изменение пришло с WordPress 5.9 (январь 2022). Разработчики добавили логику исключения первого изображения страницы из lazy load. Вместо loading="lazy" оно получает loading="eager", что означает немедленную загрузку без ожидания. Это архитектурное решение напрямую связано с метрикой LCP (Largest Contentful Paint) из Core Web Vitals - главное изображение на странице часто оказывается именно LCP-элементом, и его задержка из-за lazy load напрямую ухудшала показатели скорости в Google Search Console и PageSpeed Insights.

Кроме первого изображения, WordPress также исключает из lazy load изображения с атрибутом fetchpriority="high" - они тоже получают loading="eager", потому что браузер сам определяет их как приоритетные.

Если по каким-то причинам встроенный lazy load мешает (конфликт с темой или плагином), его можно отключить через functions.php:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Встроенный механизм закрывает базовую потребность, но имеет ограничения: не обрабатывает фоновые изображения в CSS, не даёт контроль над порогом загрузки и не помогает с видео на YouTube, Vimeo, RuTube. Для этих задач нужны плагины.

Лучшие плагины Lazy Load для WordPress: сравнение

За годы работы в студии я перепробовал десятки плагинов для отложенной загрузки. Расскажу о тех, которые реально используются на проектах клиентов - с честными плюсами и минусами каждого.

a3 Lazy Load

Бесплатный и надёжный вариант, который я чаще всего рекомендую малому бизнесу. Поддерживает изображения, iframe, видео. Установка занимает пять минут, конфигурации минимальны - всё работает сразу после активации. Из плюсов: давно на рынке, стабильный, не конфликтует с популярными темами. Из минусов: интерфейс устаревший, продвинутое управление исключениями требуется делать вручную через CSS-классы.

WP Rocket

Премиальный комбайн для производительности. Включает lazy load для видео и изображений как одну из многих функций - кэширование, минификацию, предзагрузку. Если на сайте уже используется WP Rocket, отдельный плагин не нужен: просто включаешь галочку в настройках. Минус один - цена. Для небольшого информационного сайта платить за полный пакет только ради lazy load нецелесообразно.

Lazy Load by WP Rocket

Бесплатный субплагин от команды WP Rocket. Делает ровно одно: добавляет отложенную загрузку изображений и iframe. Никаких лишних функций, лёгкими движениями настраивается за две минуты. Хороший выбор, если нужен надёжный инструмент без переплаты. Фактически это stripped-down версия функционала WP Rocket, которая хорошо работает сама по себе.

Lazy Load for Videos

Узкоспециализированный инструмент: Lazy Load for Videos заменяет iframe YouTube/Vimeo на превью-изображение с кнопкой воспроизведения. Реальный iframe загружается только после клика пользователя. На проектах, где много встроенных онлайн-видео, это даёт заметный прирост скорости - каждый youtube vimeo embed без обработки тянет дополнительные запросы к серверам платформ при загрузке страницы.

OmniVideo

Аналог Lazy Load for Videos, но с поддержкой российских платформ: RuTube, ВК Видео, Vimeo, YouTube. Для клиентов, которые размещают контент на отечественных платформах, это единственный вариант с нормальной поддержкой без ручной доработки.

Loading Page with Loading Screen

Нестандартный участник списка. Добавляет прелоадер (экран загрузки) поверх страницы и совмещает его с отложенной загрузкой изображений. Подходит для портфолио, лендингов, где важно визуальное впечатление от загрузки. Для интернет-магазинов или блогов - избыточно, требуется осторожность с настройками, чтобы прелоадер не раздражал пользователей.

Плагин	Цена	Тип контента	Ключевые возможности	Для кого
a3 Lazy Load	Бесплатный	Фото, iframe, видео	Простые конфигурации, стабильная работа, исключения по CSS-классу	Малый бизнес, блоги, магазины
WP Rocket	Платный (от $59/год)	Фото, видео, скрипты	Комплексная оптимизация, продвинутое управление кэшем, lazy load в комплекте	Сайты с высокими требованиями к скорости
Lazy Load by WP Rocket	Бесплатный	Фото, iframe	Лёгкими настройками, без лишних функций, надёжный код	Все, кому нужен минимализм
Lazy Load for Videos	Бесплатный	Видео (YouTube, Vimeo)	Замена iframe на превью, загрузка по клику	Сайты с большим количеством встроенных видео онлайн
OmniVideo	Бесплатный	Видео (RuTube, ВК, YouTube, Vimeo)	Поддержка российских платформ, замена iframe на превью	Русскоязычные проекты с видео
Loading Page with Loading Screen	Freemium	Фото + прелоадер	Экран загрузки, визуальное управление переходом	Портфолио, лендинги

Как настроить Lazy Load через плагин: пошаговые инструкции

Покажу на примере a3 Lazy Load - бесплатный выбор, который я чаще всего рекомендую клиентам, когда нужен lazy load на сайте WordPress без лишних вложений.

Шаг 1: установка

1. Заходи в «Плагины» → «Добавить новый».
2. Ищи «a3 Lazy Load» в поиске.
3. Нажимай «Установить», потом «Активировать».

После активации в меню появится пункт «a3 Lazy Load». Открывай его - увидишь несколько секций настроек.

Шаг 2: основные конфигурации

В первом разделе - переключатели для разных типов контента. Я обычно включаю все три: изображения, iframe и видео. Если сайт работает на шорткодах для вывода галерей - проверь, корректно ли подхватываются картинки из шорткода (иногда требует тестирования).

Поле «Load threshold» - это расстояние в пикселях до изображения, при котором начинается загрузка. По умолчанию стоит 200px. В моей практике я чаще поставил значение 300-400px для сайтов с длинными страницами - пользователь не успевает увидеть «мерцание» появляющихся картинок.

Шаг 3: настройка исключений

Это важный момент, который часто упускают. Некоторые изображения нельзя откладывать - логотип, первый экран, баннер акции. Для них используй CSS-класс исключения.

В настройках a3 Lazy Load есть поле для CSS-классов, которые выводятся из отложенной загрузки. По умолчанию там прописан no-lazy. Добавляй этот класс к нужным изображениям в редакторе или через код темы:

<img src="banner.jpg" class="no-lazy" alt="Акция">

Условия исключения можно расширить - например, добавить собственный класс типа skip-lazy через запятую в том же поле.

Шаг 4: проверка результата

После сохранения настроек открывай страницу в браузере в режиме инкогнито (чтобы кэш не мешал). Открывай DevTools → вкладка «Network» → фильтр «Img».

Прокручивай страницу вниз и смотри: изображения должны появляться в списке запросов по мере прокрутки, а не все сразу при загрузке. Если при открытии страницы загружается сразу 50 картинок - что-то пошло не так.

Ещё один способ проверки: посмотри на атрибуты тегов <img> через «Inspect Element». У изображений за пределами экрана должен быть атрибут data-src вместо обычного src - плагин подменяет его и возвращает настоящий адрес только при загрузке.

Опубликовано изменение - убедись, что кэш страницы сброшен. Если используешь кэширующий плагин, очисти кэш вручную сразу после настройки a3 Lazy Load.

Как добавить Lazy Load в WordPress без плагина: код в functions.php

Иногда плагин - лишнее. На лёгкие сайты без сложных конфигураций, или когда какой-то плагин подводил и создавал конфликты с темой, я предпочитаю решать задачу кодом. Это надёжнее и прозрачнее.

Важно: перед правками functions.php сделайте бэкап сайта. Ошибка в этом файле приводит к белому экрану.

Добавление loading="lazy" через PHP

WordPress с версии 5.5 сам добавляет атрибут loading="lazy", но только к изображениям, вставленным через стандартные функции. Если в теме или шорткодах используются дополнительные пути вывода картинок - атрибут может не применяться автоматически.

Решение через functions.php:

function add_lazy_load_to_images( $attr, $attachment, $size ) {
 if ( ! isset( $attr['loading'] ) ) {
 $attr['loading'] = 'lazy';
 }
 return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'add_lazy_load_to_images', 10, 3 );

Фильтр wp_get_attachment_image_attributes срабатывает при формировании тега <img>. Код проверяет, не применялось ли уже значение loading, и добавляет «lazy» если нет - так исключаются конфликты с темой.

Замена YouTube/Vimeo iframe на превью-заглушку

Каждый встроенный YouTube-iframe без обработки тянет 150-200 Кб данных при загрузке страницы ещё до того, как пользователь нажал «Воспроизвести». Попробуйте открыть DevTools - сразу видно.

Решение - заменить iframe на статичное превью с кнопкой play. Пользователь кликает - JS динамически вставляет настоящий iframe. Вот базовая реализация:

function replace_youtube_with_preview( $content ) {
 $pattern = '~<iframe[^>]+src=["\']https?://(www\.)?youtube\.com/embed/([a-zA-Z0-9_-]+)[^"\']*["\'][^>]*></iframe>~';
 $replacement = '<div class="yt-preview" data-id="$2" style="cursor:pointer;position:relative;">'
 . '<img src="https://img.youtube.com/vi/$2/hqdefault.jpg" alt="Видео" loading="lazy" style="width:100%;">'
 . '<span style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:48px;">&#9654;</span>'
 . '</div>';
 return preg_replace( $pattern, $replacement, $content );
}
add_filter( 'the_content', 'replace_youtube_with_preview' );

// JS для замены превью на iframe по клику
add_action( 'wp_footer', function() {
 ?><script>
 document.querySelectorAll('.yt-preview').forEach(function(el) {
 el.addEventListener('click', function() {
 var id = this.getAttribute('data-id');
 this.innerHTML = '<iframe width="100%" height="400" src="https://www.youtube.com/embed/' + id + '?autoplay=1" frameborder="0" allowfullscreen></iframe>';
 });
 });
 </script><?php
} );

Для Vimeo - меняешь паттерн на vimeo\.com/video/ и URL превью на API Vimeo.

Когда код лучше плагина

Из практики студии: на лёгкие сайты-визитки и небольшие блоги я почти всегда добавляю lazy load кодом. Был случай - клиент Александр из Краснодара, строительный сайт - когда a3 Lazy Load конфликтовал с темой Divi. Слайдер перестал работать. Убрали плагин, написали три строчки кода - проблема ушла назад, всё заработало.

Если нужны дополнительные возможности - исключения по категориям, разные пороги загрузки для мобильных и десктопа, поддержка временной анимации появления - нужен плагин. Но для большинства задач код в functions.php - это чисто, быстро и никогда не подводил.

Что нельзя делать с Lazy Load: типичные ошибки и их влияние на SEO

За годы работы с WordPress-проектами я видел одну и ту же картину: lazy load подключают, но настраивают так, что он начинает мешать продвижению вместо того, чтобы помогать. Разберу главные ошибки, которые реально задерживает рост позиций в поисковых системах.

Ошибка 1: применять lazy load к LCP-изображению

LCP (Largest Contentful Paint) - это самый крупный элемент, который пользователь видит при загрузке страниц. Чаще всего это главный баннер, первое фото товара или обложка поста. Если вы вешаете на него lazy load, браузер не загружает его сразу - он ждёт, пока элемент попадёт во вьюпорт. Но он уже во вьюпорте. Получается искусственная задержка там, где её быть не должно.

Штраф конкретный: LCP-метрика в Core Web Vitals падает, PageSpeed Insights фиксирует это как проблему. Google напрямую учитывает Core Web Vitals в ранжировании. Я видел проекты, где одна эта ошибка роняла LCP с «хорошего» в «требует улучшения».

Что делать: обязательно добавьте loading="eager" или CSS-класс исключения для первого изображения на странице. В a3 Lazy Load это поле «Skip images with CSS class» - укажите там no-lazy и добавьте этот класс в редакторе к LCP-изображению.

Ошибка 2: прятать контент от краулеров Google

Google Search Central прямо указывает: lazy-load контент должен быть одинаково доступен как для пользователей, так и для поисковых роботов. Если изображения подгружаются через JavaScript без noscript-fallback или через нестандартные атрибуты вроде data-src без корректной реализации - Googlebot их не увидит.

Проверяю это так: открываю Google Search Console → «Проверка URL» → «Просмотреть как Google». Если в скриншоте краулера изображений нет - они не индексируются. Это прямые потери трафика из Google Images и снижение веса страниц с большим количеством изображений.

Ошибка 3: lazy load элементов выше сгиба (above the fold)

Всё, что видно пользователю без прокрутки сверху, должно грузиться немедленно. Логотип, навигационные иконки, первый экран слайдера - это не кандидаты для ленивой загрузки. Применять к ним lazy load одинаково бессмысленно и вредно: пользователь видит пустые блоки при открытии страницы, что разрушает впечатление и влияет на показатель отказов.

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

Что следует исключать из lazy load, а что - включать обязательно:

Элемент	Рекомендация	Почему
LCP-изображение (главный баннер, первое фото)	Загружать eager	Прямое влияние на LCP Core Web Vitals, штраф к ранжированию
Логотип в шапке	Загружать eager	Виден сверху без прокрутки, lazy создаёт видимую задержку
Первый слайд слайдера	Загружать eager	Above the fold, пользователь видит пустое место при открытии
Иконки в навигации	Загружать eager	Интерфейсные элементы, задержка затрат пользовательского опыта
Изображения в тексте статьи (ниже 1-го экрана)	Lazy load	Пользователь доберётся до них только после прокрутки
Галерея товаров (2-я и последующие строки)	Lazy load	Много изображений, экономия трафика без потери UX
Фото в отзывах внизу страницы	Lazy load	Редко просматриваются, нет смысла грузить сразу
YouTube/Vimeo в середине статьи	Lazy load	Тяжёлые embeds, без lazy load тормозят загрузки страниц

Влияние Lazy Load на Core Web Vitals и позиции в поиске

Когда клиенты спрашивают, даёт ли lazy load реальный результат для продвижения, я не отвечаю «зависит». Я открываю их PageSpeed Insights до и после - и показываю цифры. Связь между lazy load и позициями в поисковых системах работает через конкретные метрики, и её можно измерить.

Как lazy load влияет на LCP и CLS

LCP напрямую зависит от того, как быстро загружается самый крупный видимый элемент. На сайтах с большим количеством изображений без lazy load браузер пытается загрузить всё одновременно - это создаёт конкуренцию за пропускную способность. LCP-изображению приходится «ждать очереди». Lazy load убирает эту конкуренцию: браузер сначала загружает только то, что нужно прямо сейчас.

CLS (Cumulative Layout Shift) - сдвиги макета - тоже зависит от загрузки изображений. Если изображения загружаются без зарезервированных размеров, они «раздвигают» страницу при появлении. Правильные плейсхолдеры с width и height в атрибутах тега img обеспечивают стабильность макета и нулевой CLS. WordPress с версии 5.5 добавляет эти атрибуты автоматически.

Реальные цифры по проектам

На одном из проектов студии - интернет-магазин с каталогом 400+ товаров - после настройки lazy load через WP Rocket получил такие цифры по данным GTmetrix и PageSpeed Insights:

• LCP сократился с 4,2 сек до 1,8 сек (PageSpeed Mobile)
• Объём данных на первой загрузке уменьшился с 6,8 МБ до 1,1 МБ
• GTmetrix Grade поднялся с C до A за счёт оптимального времени загрузки
• Позиции по основным запросам за 6 недель выросли в среднем на 4-7 пунктов

Важный момент: рост позиций не мгновенный. Google переоценивает Core Web Vitals по данным CrUX (реальные пользователи за 28 дней), а не по лабораторным тестам. Эффект проявляется через 4-8 недель после накопления реальных данных.

Мобильные пользователи выигрывают больше всего

Я всегда объясняю это клиентам на конкретном примере. На мобильных устройствах два ограничивающих фактора: более медленный процессор и нестабильная сеть (4G вместо проводного интернета). Потребление трафика критично - многие пользователи на тарифах с ограниченным интернетом. Lazy load сокращает объём данных при первой загрузке в 3-6 раз на типичном лендинге с изображениями.

Google использует Mobile-First Indexing: оценивает сайт именно с мобильной точки зрения. Поэтому скорость загрузки на мобильных - это не дополнительный бонус, это основной фактор ранжирования в поисковых системах.

Как измерять результат

GTmetrix и PageSpeed Insights измеряют эффективность lazy load по-разному, и оба нужны. PageSpeed Insights показывает реальные данные пользователей (Field Data) и лабораторный тест - смотрю оба. GTmetrix даёт временной водопад запросов: на нём видно, какие изображения грузятся при открытии страницы, а какие - только при прокрутке. Именно по этому водопаду я проверяю, что LCP-изображение действительно загружается первым и без задержки, а все остальные - отложенно.

Минимальный набор метрик для оценки: LCP (цель - до 2,5 сек), CLS (цель - менее 0,1), общий вес страницы на первой загрузке. Проверяю до внедрения lazy load, через 2 недели и через 6 недель - чтобы видеть реальную динамику, а не случайный всплеск.

Итог: как реализовать Lazy Load на WordPress правильно

Ниже - всё, что проверяю сам и рекомендую клиентам. Чек-лист, который экономит время и защищает от типичных ошибок.

Чек-лист внедрения

1. Проверьте версию WordPress. Если у вас 5.5 и выше - встроенный lazy load уже работает. Убедитесь, что в коде нет loading="lazy" на LCP-изображении. Это видно через DevTools → Elements: найдите первое изображение на странице и проверьте атрибут loading. Если там «lazy» - исправьте через фильтр wp_lazy_loading_enabled в functions.php или плагин.
2. Выберите подход в зависимости от задачи. Встроенный lazy load в WordPress зависит от браузера и работает только для <img>. Если нужен контроль над видео, фонами и порогом срабатывания - плагин (a3 Lazy Load для простых сайтов, WP Rocket если уже используете его кэширование). Кастомный код в functions.php - когда плагины конфликтуют или нужна специфичная логика.
3. Исключите LCP-элементы обязательно. Первое изображение на странице, главный баннер, обложка поста - всё это загружает eager. Не полагайтесь на то, что плагин сам определит LCP. В a3 Lazy Load - поле «Skip First Image» плюс ручной CSS-класс для надёжности. Загрузка изображений выше сгиба должна быть мгновенной.
4. Проверьте элементы выше сгиба. Откройте сайт на мобильном, запишите первый экран без прокрутки. Всё видимое - логотип, навигационные иконки, первый слайд - должно грузиться без lazy load. Дополнительные плейсхолдеры здесь вредят, а не помогают.
5. Добавьте атрибуты размеров для изображений. width и height в теге img - обязательное условие для нулевого CLS. WordPress добавляет их автоматически при загрузке медиа через встроенный загрузчик. Если используете сторонние изображения или хардкод в шаблонах - проверьте вручную.
6. Проверьте результат в PageSpeed Insights. Запустите тест до и после. Смотрите LCP (цель - менее 2,5 сек на мобильных), раздел «Удалите ресурсы, блокирующие рендеринг» и предупреждение «Используйте lazy load для изображений за пределами экрана». Если предупреждение исчезло и LCP улучшился - всё сделано верно. Онлайн-тест занимает 30 секунд и даёт конкретные цифры.
7. Проверьте индексируемость через Google Search Console. Инструмент «Проверка URL» → «Просмотреть как Google» покажет, видит ли краулер ваши изображения. Если на скриншоте есть пустые блоки - lazy load реализован с ошибкой и время загрузки WordPress-страниц оптимизировано, но SEO страдает.

Что делать после lazy load

Lazy load - первый шаг, не последний. После него логично: конвертировать изображения в WebP (Squoosh онлайн или плагин Imagify), подключить CDN, настроить кэширование страниц. Реализовать lazy load - это начало, а не конец работы со скоростью загрузки.

Если прошли по чек-листу и что-то пошло не так - пишите в комментарии. Покажите домен и какой подход использовали - разберём конкретно.

Данная статья основана на личном опыте автора и актуальна на момент публикации. Интерфейсы сервисов и алгоритмы поисковых систем регулярно меняются - рекомендую проверять актуальность инструкций на официальных ресурсах. Если у вас остались вопросы - задайте их в комментариях.

Список литературы

1. Felix Arntz - Lazy-loading images in 5.5 - Make WordPress Core, 2020
2. Google Search Central - Fix lazy-loaded content - developers.google.com
3. Google Search Central - Google image SEO best practices - developers.google.com
4. DebugBear - Fix your website's Largest Contentful Paint by optimizing image loading - MDN Blog, 2025