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

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

Когда lazy load мешает, а не помогает

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

Проверить, что проблема именно в этом, можно без догадок:

• откройте страницу в Chrome DevTools и посмотрите, есть ли у hero-изображения loading="lazy";
• вкладка Network: изображение первого экрана не должно стартовать слишком поздно;
• в Lighthouse / PageSpeed посмотрите, какой ресурс указан как LCP-элемент;
• сравните поведение с отключёнными плагинами оптимизации, если они добавляют собственный lazy load.

Что именно может ломать первый экран

Чаще всего мешают не только встроенные механизмы WordPress, но и:

• плагины оптимизации, которые переписывают img на лету;
• темы с собственным lazy load для слайдеров и баннеров;
• скрипты, которые подменяют src на data-src;
• фоновые изображения в hero-секции, если они загружаются через JS.

Как отключить lazy load только для нужных изображений

Если вы контролируете шаблон, самый надёжный путь — убрать ленивую загрузку у конкретного изображения в коде темы. Для обычного <img> это делается через атрибут loading="eager" или полным отсутствием loading в разметке.

<img src="/wp-content/uploads/hero.jpg"
     alt="Главный экран"
     width="1600"
     height="900"
     loading="eager"
     fetchpriority="high">

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

Если изображение выводит WordPress-функция

Когда картинка формируется через wp_get_attachment_image(), можно передать атрибуты через массив. Это удобно, если вы правите шаблон темы или дочернюю тему.

<?php
$hero_id = 123;
echo wp_get_attachment_image(
    $hero_id,
    'full',
    false,
    array(
        'loading' => 'eager',
        'fetchpriority' => 'high',
        'class' => 'hero-image',
    )
);
?>

Такой вариант лучше, чем править HTML вручную, если изображение приходит из медиабиблиотеки и может меняться.

Как исключить изображения из lazy load через фильтр

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

<?php
add_filter( 'wp_img_tag_add_loading_attr', function( $value, $image, $context ) {
    if ( 'the_content' === $context ) {
        return $value;
    }

    return $value;
}, 10, 3 );

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

Для точечной правки HTML в контенте можно использовать фильтр wp_content_img_tag и менять атрибуты только у нужных изображений. Это полезно, если hero-картинка вставляется в редакторе и вы не хотите переписывать шаблон.

<?php
add_filter( 'wp_content_img_tag', function( $image, $context, $attachment_id ) {
    if ( is_front_page() ) {
        $image = str_replace( 'loading="lazy"', 'loading="eager" fetchpriority="high"', $image );
    }

    return $image;
}, 10, 3 );

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

Сравнение подходов: плагин, код, ручная настройка

Пошагово: что делать на практике

1. Найдите изображение, которое влияет на первый экран: баннер, логотип, hero-фото, обложку записи.
2. Проверьте, кто добавляет lazy load: WordPress, тема или плагин оптимизации.
3. Для hero-изображения уберите loading="lazy" и поставьте loading="eager".
4. Добавьте fetchpriority="high" только для одного ключевого изображения.
5. Если изображение выводится через шаблон, правьте код там, а не через поиск/замену в базе.
6. После правки проверьте HTML в браузере и результат в Lighthouse.

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

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

• откройте страницу в режиме инкогнито;
• в DevTools посмотрите HTML первого экрана;
• убедитесь, что у нужного изображения нет loading="lazy";
• в Network проверьте, что запрос к hero-изображению стартует сразу после загрузки HTML;
• сравните LCP до и после на одной и той же странице.

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

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

Отключили lazy load для всех изображений

Это частая ошибка после установки плагина или правки темы. В результате страница начинает тянуть слишком много ресурсов сразу, особенно на длинных статьях. Исправление простое: оставьте eager только для первого экрана, а остальным изображениям верните ленивую загрузку.

Добавили fetchpriority="high" на несколько картинок

Браузер не любит, когда всё объявляют приоритетным. Если приоритетов слишком много, смысл атрибута теряется. Используйте его только для одного изображения, которое реально влияет на LCP.

Правили HTML в редакторе, а тема всё переписала

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

Не проверили фоновые изображения

Hero-блок часто сделан не через <img>, а через background-image. Тогда атрибуты loading и fetchpriority не помогут. Нужно либо заменить фон на обычное изображение в разметке, либо пересмотреть способ загрузки этого блока.

Что учесть для безопасности и производительности

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

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

Если вам нужно одновременно чистить сайт от лишних технических эффектов и контролировать SEO-атрибуты, удобно держать это в одном инструменте. Например, Clearfy Pro уместен там, где нужно управлять техническими настройками WordPress без разрозненных плагинов: https://wpshop.ru/plugins/clearfy?utm_source=wpchecker.ru&utm_medium=article&utm_campaign=kak-otklyuchit-otlozhennuyu-zagruzku-izobrazheniy-v-wordpress-dlya-pervogo-ekrana

Когда лучше не отключать lazy load вручную

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

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