Как сделать отложенную загрузку изображений в WordPress без поломки первого экрана

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

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

Когда lazy load нужен, а когда он мешает

Если на странице много изображений ниже первого экрана — статьи, каталоги, архивы, длинные лендинги — отложенная загрузка почти всегда полезна. Браузер не расходует ресурсы на то, что пользователь ещё не видит, и быстрее показывает верх страницы.

Проблемы начинаются, когда lazy load применяют ко всему подряд:

• логотип в шапке грузится с задержкой и портит восприятие бренда;
• главный баннер или hero-картинка появляется слишком поздно;
• слайдеры и галереи инициализируются до загрузки нужных изображений;
• вёрстка прыгает из-за отсутствия width и height у картинок;
• плагины оптимизации дублируют друг друга и добавляют лишние атрибуты.

Быстрая диагностика проблемы

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

Ещё один признак: в HTML у изображений есть атрибут loading="lazy", но при этом важные элементы первого экрана тоже помечены как lazy. В таком случае браузер честно делает то, что ему сказали, и проблема не в браузере, а в разметке.

Какой способ выбрать: код, плагин или нативная настройка

В WordPress есть нативная отложенная загрузка изображений через атрибут loading. Для большинства сайтов этого достаточно. Если нужно точечно исключить отдельные изображения, удобнее править шаблон или фильтры. Плагины имеют смысл, когда нужно управлять не только картинками, но и iframe, видео и фоновыми изображениями.

Пошаговое решение через код

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

1. Исключите важные изображения из lazy load

Ниже пример для темы или мини-плагина. Логика простая: если картинка относится к шапке, логотипу или hero-блоку, убираем loading="lazy". Для остальных изображений оставляем поведение по умолчанию.

<?php
add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment, $size ) {
    if ( is_admin() ) {
        return $attr;
    }

    // Пример: исключаем изображения первого экрана по CSS-классу.
    if ( ! empty( $attr['class'] ) && strpos( $attr['class'], 'no-lazy' ) !== false ) {
        unset( $attr['loading'] );
        unset( $attr['decoding'] );
    }

    return $attr;
}, 10, 3 );

Чтобы этот код работал предсказуемо, добавьте класс no-lazy в нужный вывод изображения в шаблоне:

<?php echo wp_get_attachment_image( $image_id, 'full', false, array(
    'class' => 'hero-image no-lazy',
) ); ?>

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

2. Для изображений в контенте проверьте размер и разметку

Даже при правильном lazy load страница может дёргаться, если у картинок нет размеров. WordPress обычно добавляет width и height автоматически, но кастомный HTML в редакторе или вставки из сторонних источников часто приходят без них.

Если вы вставляете изображения вручную, убедитесь, что в разметке есть размеры:

<img src="/wp-content/uploads/2026/01/example.jpg" width="1200" height="800" alt="Пример" loading="lazy">

Это не косметика. Без размеров браузер не может заранее зарезервировать место, и layout shift становится заметнее.

3. Не дублируйте оптимизацию в нескольких местах

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

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

Если нужен контроль через шаблон темы

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

<?php
$image_id = get_field( 'hero_image' );
if ( $image_id ) {
    echo wp_get_attachment_image( $image_id, 'full', false, array(
        'loading' => 'eager',
        'fetchpriority' => 'high',
        'class' => 'hero-image',
    ) );
}

Здесь важен нюанс: fetchpriority="high" стоит использовать только для действительно главного изображения первого экрана. Если раздать высокий приоритет всем картинкам подряд, браузер перестанет понимать, что важнее.

Проверка результата после внедрения

После правки не ограничивайтесь визуальным просмотром. Нужно проверить и HTML, и поведение загрузки.

• Откройте страницу в браузере и посмотрите исходный HTML: у второстепенных изображений должен быть loading="lazy".
• У hero-изображения, логотипа и других элементов первого экрана lazy load должен отсутствовать либо быть заменён на eager.
• В DevTools → Network проверьте, что важная картинка загружается в начале, а изображения ниже экрана — позже.
• Посмотрите на CLS в Lighthouse или PageSpeed Insights: если метрика ухудшилась, проблема часто в размерах изображений, а не в самом lazy load.
• Проверьте мобильную версию отдельно: на узком экране первый экран обычно короче, и картинка, которая была «ниже фолда» на десктопе, может оказаться видимой сразу.

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

Частые ошибки и как их исправить

Lazy load включили для логотипа и баннера

Это самая частая ошибка. Решение простое: помечайте важные изображения отдельным классом или выводите их с loading="eager". Для первого экрана приоритет у скорости показа, а не у экономии запросов.

Плагин и тема делают одно и то же

Если плагин уже добавляет lazy load, а тема ещё и вручную ставит атрибуты, появляются конфликты. Оставьте один механизм. Обычно проще отключить дублирующую функцию в плагине, чем переписывать шаблоны.

Нет размеров у картинок

Без width и height браузер не может стабильно зарезервировать место. Исправляется либо через правильный вывод WordPress-медиа, либо через ручную разметку, если изображение вставлено нестандартно.

Ожидали ускорения, а стало хуже

Так бывает, если lazy load применили к слишком малому числу изображений или если главная проблема сайта вообще не в картинках. Тогда сначала смотрите на тяжёлые скрипты, шрифты, сторонние виджеты и кэширование.

Практические советы по безопасности и производительности

Если правите тему, делайте это в дочерней теме или через небольшой mu-plugin, а не в исходниках родительской темы. Иначе обновление затрёт изменения.

Для производительности полезно держать в голове несколько правил:

• не включайте lazy load для всех изображений без исключений;
• не используйте несколько плагинов оптимизации одновременно;
• проверяйте мобильную версию отдельно от десктопа;
• для hero-изображения задавайте fetchpriority="high" только при реальной необходимости;
• после любых изменений очищайте кэш страницы, объекта и CDN, если они есть.

Если у вас уже стоит комплексный плагин для чистки и SEO-оптимизации, например Clearfy Pro, проверьте, не включена ли там отдельная оптимизация медиа вместе с другими функциями. В таких настройках важно не дублировать один и тот же механизм в нескольких местах: это проще отладить и легче поддерживать.

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