Если в Elementor первый экран выглядит пустым или картинка в hero-блоке догружается позже текста, проблема часто не в самом Elementor, а в связке из lazy load, оптимизатора изображений и настроек темы. На обычных страницах отложенная загрузка полезна, но для главного баннера, фонового изображения секции или логотипа в шапке она может ухудшать LCP и визуальное восприятие.
Ниже разберём, как точечно отключить lazy load для нужных изображений в Elementor, не выключая его глобально на всём сайте.
Когда проблема действительно в lazy load
Сначала стоит убедиться, что задержка вызвана именно отложенной загрузкой, а не тяжёлым файлом, медленным сервером или конфликтом CSS. В DevTools откройте вкладку Network и обновите страницу с отключённым кэшем. Если hero-картинка загружается позже остальных ресурсов или у неё в HTML есть атрибуты вроде loading="lazy", а визуально она появляется с задержкой, это уже хороший кандидат на точечное исключение.
Для Elementor типичные симптомы такие:
- первый экран сначала пустой, потом резко появляется фон секции;
- логотип в шапке подгружается с заметной задержкой;
- видео-постер или изображение в виджете Image появляется после текста;
- после включения оптимизации в плагине кеша проблема стала заметнее.
Что проверить до правки кода
- не включена ли в плагине оптимизации опция lazy load для всех изображений без исключений;
- не используется ли фон секции Elementor вместо обычного
<img>; - не добавляет ли тема или плагин свои атрибуты
loadingиdecoding; - не сжимается ли hero-картинка до слишком маленького размера и не растягивается ли CSS-ом.
Какой подход выбрать: плагин, код или настройка в Elementor
Если на сайте уже стоит плагин оптимизации, сначала ищите исключения там. Это проще и безопаснее, чем править шаблоны. Но если исключение нужно только для нескольких блоков Elementor, удобнее сделать это через код или через точечную разметку в шаблоне.
| Подход | Когда подходит | Минус |
|---|---|---|
| Настройка в плагине кеша | Нужно исключить конкретные URL, классы или изображения | Зависит от возможностей плагина |
| Код через фильтр WordPress | Нужно убрать lazy load для отдельных изображений по атрибуту или классу | Требует аккуратного теста после обновлений |
| Правка шаблона Elementor | Нужно задать приоритет загрузки для hero-блока | Легко ошибиться и сломать верстку |
Пошаговое решение: исключаем hero-изображение из lazy load
Самый надёжный вариант — пометить нужное изображение как приоритетное и убрать отложенную загрузку только для него. Если изображение выводится обычным тегом <img>, можно задать ему класс и исключить по нему обработку в фильтре.
Шаг 1. Добавьте класс к нужному изображению
В Elementor откройте виджет Image или секцию с фоновым изображением, если оно выводится через HTML-элемент. Для обычного изображения проще всего добавить CSS-класс, например hero-no-lazy. Для секции с фоном этот способ работает не всегда, потому что фон часто генерируется не как <img>, а как CSS background-image.
Шаг 2. Исключите изображение из lazy load через фильтр
Если lazy load добавляет WordPress или совместимый плагин, можно убрать его для конкретных изображений через фильтр wp_get_attachment_image_attributes. Этот вариант работает для изображений, которые выводятся через функции WordPress, а не для фоновых картинок секций.
<?php
add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment, $size ) {
if ( empty( $attr['class'] ) ) {
return $attr;
}
if ( strpos( $attr['class'], 'hero-no-lazy' ) !== false ) {
unset( $attr['loading'] );
unset( $attr['decoding'] );
$attr['fetchpriority'] = 'high';
}
return $attr;
}, 10, 3 );Этот код не отключает lazy load глобально. Он только убирает атрибут loading у изображений с нужным классом и повышает приоритет загрузки для первого экрана. Если тема или плагин не выводит класс в атрибуте изображения, фильтр не сработает — тогда нужен другой способ.
Шаг 3. Если это фон секции Elementor, используйте preload
Для фоновых изображений Elementor часто лучше не пытаться отключать lazy load, а заранее подгружать файл через <link rel="preload">. Это особенно полезно для hero-блоков, где изображение критично для первого экрана.
<?php
add_action( 'wp_head', function() {
if ( ! is_front_page() ) {
return;
}
$image_url = 'https://example.com/wp-content/uploads/2026/01/hero.webp';
echo '<link rel="preload" as="image" href="' . esc_url( $image_url ) . '">' . "\n";
}, 1 );Здесь важно не подставлять случайный URL. Preload имеет смысл только для реально используемого изображения первого экрана. Если вы добавите preload для второстепенного файла, можно ухудшить загрузку страницы.
Диагностика после правки: как понять, что всё сработало
Проверять нужно не только визуально. Откройте страницу в режиме инкогнито, сбросьте кэш браузера и посмотрите исходный HTML. У hero-изображения не должно быть loading="lazy", если вы его исключали через фильтр. Для preload в <head> должен появиться соответствующий тег.
Дальше проверьте:
- вкладку Network — hero-файл должен стартовать раньше второстепенных изображений;
- Performance — время появления первого экрана должно стать стабильнее;
- визуально — картинка не должна “прыгать” после текста;
- кэш-плагин — после очистки кэша изменения должны сохраняться.
Если используете Lighthouse или PageSpeed Insights, смотрите не только на общий балл. Важнее, ушла ли задержка у элемента, который реально находится в первом экране.
Частые ошибки и как их исправить
Отключили lazy load глобально
Это частая реакция на проблему, но плохая практика. На длинных страницах вы получите лишнюю нагрузку на сеть и более тяжёлую начальную загрузку. Лучше исключать только hero-изображения, логотип или критичные элементы.
Правят фон секции, а ожидают поведение как у img
Фоновые изображения в Elementor часто не получают атрибут loading вообще. Если вы пытаетесь убрать lazy load через фильтр для <img>, а картинка задана как background-image, результат будет нулевой. Для фона используйте preload или перенесите изображение в обычный виджет Image, если это допустимо по макету.
Класс добавили не туда
Иногда класс ставят на контейнер секции, а фильтр проверяет класс у самого изображения. В таком случае условие не срабатывает. Проверьте итоговый HTML в браузере и убедитесь, что класс действительно присутствует у тега <img>.
Кэш не очищен
После правки PHP-кода старый HTML может продолжать отдаваться из кеша страницы или CDN. Очистите кэш плагина, серверный кеш и, если есть, CDN. Без этого легко сделать неверный вывод, что код не работает.
Что ещё можно сделать для первого экрана в Elementor
Если задача не только в lazy load, а в общей скорости первого экрана, проверьте ещё несколько вещей. Для hero-блока лучше использовать WebP или AVIF, но только если они нормально поддерживаются вашим стеком. Не стоит загружать изображение в размере в два-три раза больше фактической ширины блока. Для текста и кнопок в первом экране полезно минимизировать количество внешних шрифтов и тяжелых анимаций.
Если вы используете Elementor Pro и часто работаете с контентными блоками, имеет смысл держать под рукой плагин вроде Clearfy Pro для чистки лишних дублей и технических мелочей, но даже в этом случае точечная настройка под конкретный hero-блок всё равно остаётся самым надёжным вариантом.
Проверочный чек-лист
- hero-изображение определено: это
<img>или background-image; - для нужного изображения задан уникальный класс;
- lazy load отключён только для критичного элемента;
- кэш сайта и CDN очищены;
- в исходном HTML нет лишнего
loading="lazy"у первого экрана; - в Network hero-файл стартует раньше второстепенных изображений;
- после обновления страницы первый экран не “прыгает”.
Если проблема остаётся даже после исключения lazy load, дальше уже стоит смотреть в сторону размера файла, критического CSS и конфликтов с оптимизатором изображений. Но в большинстве случаев точечное исключение для первого экрана решает именно ту задержку, которую пользователь видит сразу после открытия страницы.