Нативная поддержка Lazy Loading станет частью ядра WordPress для ускорения загрузки сайтов

Отключите ручную подгрузку. Удалите сторонние скрипты. Всё уже встроено в версию 5.5 и выше. Браузеры Chrome, Firefox и Edge автоматически откладывают загрузку контента, если он вне экрана. Звучит просто. Но есть нюансы.

Каждому тегу <img> и <iframe> ядро присваивает атрибут loading=\"lazy\". Автоматически. Без участия разработчика. Без фильтров? Нет. Можно вмешаться.

Важно: фильтр wp_lazy_loading_enabled отключает отложенную загрузку глобально. Но это топорное решение. Точечнее – wp_img_tag_add_loading_attr и wp_iframe_tag_add_loading_attr.

Пример. Хотите исключить логотип в шапке?


add_filter( \'wp_img_tag_add_loading_attr\', function( $value, $image, $context ) {
  if ( strpos( $image, \'logo\' ) !== false ) {
    return false;
  }
  return $value;
}, 10, 3 );


SVG не участвуют. <source> внутри <picture> – тоже. Ожидаемо. Невозможно отложить то, что не поддаётся браузерной оптимизации. Не все картинки – равны.

Внимание! У плагинов и тем своя логика. Если используется кастомный рендер, отложенная загрузка может не примениться. Проверьте шаблоны. Особенно template-parts и виджеты.

Резюме. Ускорение происходит. Но только при соблюдении условий. Не загромождайте сайт костылями. Используйте встроенные фильтры. И всегда тестируйте результат. Lighthouse, Chrome DevTools, WebPageTest – ваши союзники.

Как WordPress автоматически добавляет атрибут loading=\»lazy\» к изображениям

Система внедряет loading=\"lazy\" к каждому изображению, которое вставляется через редактор блоков или функцию wp_get_attachment_image(). Это не требует вмешательства пользователя или регистрации фильтров – механизм встроен в функцию wp_filter_content_tags().

Важно: если вы вручную удаляете атрибуты width и height, браузер не будет инициировать отложенную загрузку.

Примеры:

<img src=\"example.jpg\" width=\"600\" height=\"400\">

Будет преобразовано в:

<img src=\"example.jpg\" width=\"600\" height=\"400\" loading=\"lazy\">

Если же:

<img src=\"example.jpg\">

– никакой атрибут не будет добавлен. Всё, как на ладони.

Дополнительно, фильтр wp_lazy_loading_enabled позволяет отключить эту функцию. Но зачем? Только если вам критично важно управление вручную или используется кастомный скрипт лени.

add_filter( \'wp_lazy_loading_enabled\', \'__return_false\' );

Помните: отключая встроенный механизм, вы берете на себя полную ответственность за оптимизацию производительности.

И еще. Система не трогает изображения, которые уже содержат атрибут loading – вручную или сгенерированный сторонним кодом. Это значит: приоритет за автором.

• Галерея через блоки? Автоматически добавится.
• Изображение в кастомной HTML-вставке без размеров? Пропускается.
• Сторонний плагин установил loading=\"eager\"? Переписывания не будет.

Кодовая логика без эмоций. Без фанатизма. Хочешь контроль – используй фильтры. Хочешь автомат – обеспечь размеры.

Какие элементы кроме img получают поддержку ленивой загрузки

С начала версии 5.5 автоматически откладывается не только загрузка изображений. Ключевой элемент – фреймы. Любой тег <iframe>, добавленный через контент или шорткоды, получает параметр loading=\"lazy\" при рендеринге.

Пример с видео через YouTube:


<iframe src=\"https://www.youtube.com/embed/ID\" width=\"560\" height=\"315\"></iframe>


Что ещё? <iframe> из внешних сервисов, вроде Vimeo, Yandex или Dailymotion, также участвуют в механизме. Но! Есть исключения – если тег содержит loading=\"eager\", принудительная загрузка произойдёт немедленно.

Внимание! Любые фреймы внутри админки или кастомных мета-блоков не обрабатываются – они игнорируются, потому что не участвуют в публичном рендеринге.

Скрытые элементы, например через display:none или visibility:hidden, всё равно получают атрибут loading=\"lazy\". Это может привести к неожиданным задержкам в отображении, особенно при использовании JavaScript-анимаций на скролле. Проверяйте поведение!

Кроме фреймов, другие HTML-теги вроде video, audio, source, picture или embed – не затронуты. Только img и iframe. Всё. Остальные игнорируются, даже если вручную добавить loading=\"lazy\" – браузеры проигнорируют.

Не работает и с SVG, встроенными напрямую. Их браузер не обрабатывает как ресурс, требующий отложенной загрузки. Это важно при использовании иконок и графики на мобайле.

Как отключить или изменить поведение Lazy Loading через фильтры

Отключение встроенного отложенного отображения изображений начинается с фильтра wp_lazy_loading_enabled. Он применяется ко всем элементам с поддержкой атрибута loading, включая <img> и <iframe>.

Пример полного отключения:


add_filter( \'wp_lazy_loading_enabled\', \'__return_false\' );


Нужно оставить отложенную загрузку только для iframes? Применяем условие по тегу:


add_filter( \'wp_lazy_loading_enabled\', function( $default, $tag_name ) {
return $tag_name === \'iframe\';
}, 10, 2 );


Бывает, что фильтр wp_get_attachment_image_attributes используется для тонкой настройки. Удалить атрибут loading из отдельных изображений можно так:


add_filter( \'wp_get_attachment_image_attributes\', function( $attr ) {
unset( $attr[\'loading\'] );
return $attr;
} );


Нужна селективная логика? Например, не применять к первому изображению в посте:


add_filter( \'wp_get_attachment_image_attributes\', function( $attr, $attachment, $size ) {
static $count = 0;
if ( $count++ === 0 ) {
unset( $attr[\'loading\'] );
}
return $attr;
}, 10, 3 );


Можно переопределить атрибут на eager, если требуется немедленная подгрузка:


add_filter( \'wp_get_attachment_image_attributes\', function( $attr ) {
$attr[\'loading\'] = \'eager\';
return $attr;
} );


Важно: фильтр wp_lazy_loading_enabled применяется глобально. Логика должна быть чётко ограничена, иначе получите каскадное поведение по всей теме.

Существуют также внутренние фильтры внутри функций шаблона, например get_avatar имеет свой:


add_filter( \'get_avatar\', function( $avatar ) {
return str_replace( \'loading=\"lazy\"\', \'\', $avatar );
} );


Помните: удаление атрибута не отменяет остальные оптимизации. Браузеры могут по-прежнему пытаться применять свою логику.

Разработчики плагинов должны учитывать фильтр wp_content_img_tag – применяется к любому <img> внутри контента. Здесь можно модифицировать HTML напрямую:


add_filter( \'wp_content_img_tag\', function( $image ) {
return str_replace( \'loading=\"lazy\"\', \'\', $image );
} );


Хаос начинается, когда тема, плагин и ядро вмешиваются одновременно. Проверяйте результат на выходе HTML – отладка только через визуальный контроль и var_dump.

Хотите оставить отложенную загрузку только для мобильных? Придётся оборачивать фильтр в детекцию устройства и кэшировать результат. Не делайте это в лоб – увеличите время генерации страницы.

Влияние нативного Lazy Loading на производительность сайта в реальных условиях

Отключите загрузку изображений по умолчанию там, где она не требуется. WordPress автоматически добавляет атрибут loading=\"lazy\" ко всем изображениям и iframe, но это может привести к ненужной задержке при отрисовке первого экрана. Начальные изображения должны загружаться сразу. Используйте фильтр wp_img_tag_add_loading_attr:


add_filter( \'wp_img_tag_add_loading_attr\', function( $value, $image, $context ) {
if ( $context === \'the_content\' && strpos( $image, \'hero-image.jpg\' ) !== false ) {
return false;
}
return $value;
}, 10, 3 );


Профилирование показало: прирост времени загрузки для страниц с 30+ изображениями – до 1.2 секунды по Lighthouse при включении отложенной подгрузки. Но при этом LCP метрика может ухудшиться, если первые изображения обрабатываются отложенно.

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

На мобильных устройствах поведение браузеров отличается. Chrome откладывает загрузку изображений, даже если они находятся всего на 100 пикселей ниже линии сгиба. Это критично для баннеров и CTA-блоков. Используйте fetchpriority=\"high\" для принудительной загрузки нужных элементов:


<img src=\"hero.jpg\" fetchpriority=\"high\" alt=\"...\" />


WebPageTest фиксирует: сокращение времени до первого байта не влияет на TTI, если отрисовка блокируется ожиданием медиа. Это значит, что автоматическая стратегия загрузки может играть против, если используется без анализа.

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

Не дублируйте изображения в блоках Gutenberg, где используется Cover или Media & Text. Каждый такой блок дублирует обертку и создает лишнюю загрузку. Оптимизируйте через шаблоны и кастомные блоки без автогенерации атрибутов.

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


wp_get_attachment_image( $id, \'large\', false, array( \'loading\' => \'eager\' ) );


Резюме: технология помогает, но только при точной настройке. Без ручного контроля деградация UX почти неизбежна. Настраивайте, тестируйте, проверяйте. Всегда вручную.