Если на сайте картинка в первом экране подгружается с задержкой, проблема часто не в скорости сервера, а в том, что WordPress или плагин оптимизации навесили loading="lazy" на изображение, которое должно быть видно сразу. Это типичный конфликт между оптимизацией и реальным пользовательским сценарием: браузер откладывает загрузку, а LCP-элемент появляется позже, чем нужно.
Ниже разберём, как быстро найти источник lazy load, отключить его только для нужных изображений и проверить, что правка действительно сработала. Без ломки всей оптимизации сайта.
Когда lazy load мешает, а когда помогает
Отложенная загрузка полезна для длинных страниц, галерей, комментариев и всего, что находится ниже первого экрана. Но для hero-баннера, логотипа, первого слайда и ключевого изображения статьи она часто вредна: браузер ждёт, пока пользователь доскроллит, хотя картинка нужна сразу.
На практике проблема выглядит так:
- в DevTools видно
loading="lazy"у изображения в первом экране; - в отчёте Lighthouse или PageSpeed LCP завязан на картинку, которая грузится с задержкой;
- на мобильных первый экран «пустеет» на доли секунды или дольше;
- после обновления темы или плагина оптимизации поведение меняется без явной причины.
Что обычно включает lazy load в WordPress
С 5.5 WordPress может добавлять loading="lazy" автоматически для изображений в контенте. Плагины кеша и оптимизации часто делают то же самое, но уже на уровне HTML-фильтров, шаблонов или JS. Поэтому отключать нужно не «вообще lazy load», а только в зоне первого экрана или для конкретных элементов.
Диагностика: откуда именно берётся lazy load
Сначала нужно понять, кто добавляет атрибут: ядро, тема или плагин. Иначе можно отключить одно место, а эффект останется из другого.
- Откройте страницу в браузере и посмотрите исходный HTML через «Просмотр кода страницы».
- Найдите нужное изображение и проверьте, есть ли у него
loading="lazy". - Если атрибут есть уже в исходнике, вероятно, его добавляет PHP-код темы, плагин или фильтр WordPress.
- Если в исходнике атрибута нет, а в DOM он появляется позже, виноват JS-оптимизатор или скрипт плагина.
Для проверки удобно временно открыть страницу в режиме инкогнито и сравнить исходник с отрендеренным DOM. Если у вас есть доступ к серверным логам или staging-копии, лучше тестировать там, а не на боевом сайте.
Пошаговое решение: отключаем lazy load только для первого экрана
Самый безопасный путь — не выключать отложенную загрузку глобально, а исключить из неё конкретные изображения. Для этого можно использовать фильтр wp_img_tag_add_loading_attr, который есть в WordPress и позволяет управлять атрибутом loading для отдельных картинок.
Вариант 1: исключить логотип и hero-изображение по классу
Если в теме у изображения есть понятный CSS-класс, можно убрать lazy load выборочно. Например, для логотипа или баннера первого экрана:
<?php
add_filter( 'wp_img_tag_add_loading_attr', function( $value, $image, $context ) {
if ( false !== strpos( $image, 'site-logo' ) || false !== strpos( $image, 'hero-image' ) ) {
return false;
}
return $value;
}, 10, 3 );Этот код лучше разместить в дочерней теме или в небольшом mu-plugin, а не в файле основной темы. Тогда обновление темы не затрёт правку.
Вариант 2: отключить lazy load для первого изображения в записи
Если проблема касается первого изображения в контенте статьи, можно ориентироваться на контекст. Например, для первого изображения в the_content:
<?php
add_filter( 'wp_img_tag_add_loading_attr', function( $value, $image, $context ) {
if ( 'the_content' === $context ) {
static $first_image_seen = false;
if ( ! $first_image_seen ) {
$first_image_seen = true;
return false;
}
}
return $value;
}, 10, 3 );Это решение полезно, если первый контентный блок — это крупное изображение, которое влияет на восприятие страницы. Но у него есть нюанс: если в контенте несколько картинок выше первого экрана, логика «первое изображение» может не совпасть с реальным LCP-элементом.
Вариант 3: отключить lazy load через шаблон изображения
Если вы контролируете шаблон, иногда проще явно задать атрибут loading="eager" или убрать его совсем у конкретного изображения:
<?php
echo wp_get_attachment_image(
$hero_image_id,
'full',
false,
array(
'class' => 'hero-image',
'loading' => 'eager',
'fetchpriority' => 'high',
)
);Для первого экрана это обычно лучше, чем полагаться на автоматические правила. Атрибут fetchpriority="high" уместен именно для действительно важного изображения, а не для всех подряд.
Сравнение подходов: плагин, код или настройка темы
| Подход | Когда подходит | Минус |
|---|---|---|
| Настройка в плагине оптимизации | Если плагин умеет исключать изображения по селектору или классу | Зависимость от интерфейса и логики конкретного плагина |
| Код через фильтр WordPress | Если нужен точный контроль над отдельными изображениями | Нужно аккуратно тестировать после обновлений темы |
| Правка шаблона темы | Если hero-блок полностью под вашим контролем | Можно потерять изменения при обновлении без дочерней темы |
Если у вас уже стоит плагин оптимизации, сначала проверьте его настройки. Многие решения позволяют исключить изображения по CSS-классу, ID или селектору. Код нужен тогда, когда интерфейс плагина не даёт достаточно точного контроля.
Проверка результата после внедрения
После правки важно убедиться, что lazy load действительно отключён только там, где нужно. Проверять стоит не на глаз, а по нескольким признакам.
- В исходном HTML у hero-изображения нет
loading="lazy". - У нужного изображения появился
loading="eager"или атрибут отсутствует, если так задумано. - В DevTools вкладка Network показывает ранний запрос к картинке первого экрана.
- В Lighthouse/LCP-отчёте основной элемент не ждёт отложенной загрузки.
- На мобильном первый экран появляется без заметной паузы именно на изображении.
Если картинка всё ещё грузится поздно, проверьте, не подменяет ли её JS-скрипт плагин слайдера, lazy load для фоновых изображений или CSS-секция с background-image. Для фона логика другая: атрибут loading там не работает.
Частые ошибки и как их исправить
Отключили lazy load глобально
Это самая частая ошибка. В итоге страница начинает грузить слишком много изображений сразу, особенно если на ней длинный контент. Исправление простое: возвращайте lazy load для всех изображений, кроме тех, что реально нужны в первом экране.
Правят не тот слой
Иногда разработчик меняет шаблон, но плагин кеша всё равно переписывает HTML на выходе. В таком случае нужно искать настройку в плагине, а не в теме. Если атрибут появляется после рендера, PHP-правка может вообще не сработать.
Используют fetchpriority="high" для всего подряд
Этот атрибут не ускоряет всё автоматически. Если пометить им десяток изображений, браузер не станет умнее, а приоритеты ресурсов могут только ухудшиться. Используйте его для одного главного изображения на странице.
Не учитывают обновления темы и плагинов
После обновления тема может поменять классы, а плагин — логику генерации HTML. Поэтому исключение по строке hero-image или site-logo нужно перепроверять после апдейта. Если селектор изменился, код перестанет работать молча.
Что учесть для безопасности и производительности
Если правка делается через functions.php, лучше вынести её в дочернюю тему или отдельный mu-plugin. Так вы не потеряете настройку при обновлении основной темы. Для сайтов с регулярными обновлениями это особенно важно: такие мелкие оптимизации чаще всего и ломаются первыми.
Не стоит пытаться лечить проблему через сторонний «ускоритель» с неизвестной логикой, если можно решить её штатным фильтром WordPress. Чем меньше кода переписывает HTML на лету, тем проще отлаживать сайт после обновлений.
Если вы используете редактор блоков и часто меняете шаблоны, проверьте, не дублируется ли hero-изображение в блоке Cover, в шапке темы и в Open Graph-разметке. Иногда кажется, что тормозит lazy load, а на деле страница тянет сразу несколько версий одной и той же картинки.
В проектах, где важно не только ускорение, но и чистота разметки, полезно держать под рукой инструменты для удаления дублей и лишних атрибутов. Например, в Clearfy Pro есть набор функций для технической чистки WordPress: https://wpshop.ru/plugins/clearfy?utm_source=wpupdate.ru&utm_medium=article&utm_campaign=kak-otklyuchit-otlozhennuyu-zagruzku-izobrazhenij-dlya-pervogo-ekrana-v-wordpress
Если после обновления WordPress или темы поведение lazy load изменилось, действуйте по короткому чек-листу:
- проверьте исходный HTML страницы;
- сравните поведение без плагинов оптимизации;
- убедитесь, что исключение привязано к стабильному классу или шаблону;
- перепроверьте LCP на мобильном и десктопе;
- после обновления темы повторно откройте тестовую страницу.
Такой подход обычно надёжнее, чем попытка «выключить всё и посмотреть». В WordPress технические правки лучше делать точечно: тогда обновления не превращаются в лотерею.