Как правильно применять атрибут loading="lazy" для оптимизации LCP

Отложенная загрузка изображений на уровне браузера появилась в 2019 году с введением атрибута loading="lazy". В 2020 году функция отложенной загрузки изображений была добавлена ​​в ядро ​​WordPress версии 5.5.  Но этот атрибут добавлялся ко всем изображениям, без учета того, отображается ли изображение выше или ниже сгиба (ниже первого экрана). Контроль над отключением этого атрибута для определенных изображений был переложен на разработчиков тем и шаблонов, поскольку положение изображений сильно зависит от текущего макета темы. 

Как атрибут loading="lazy" влияет на Large Contentful Paint

Недавно было обнаружено, что текущая базовая реализация ленивой загрузки WordPress имеет недостатки, так как ухудшает показатель Large Contentful Paint (LCP), когда изображения на первом экране загружаются отложено. Сейчас показатель LCP один из самых важных в метриках PageSpeed Insight, поэтому его оптимизации необходимо уделять пристальное внимание. 

Некоторые плагины для отложенной загрузки изображений позволяют избирательно добавлять атрибуты для изображений на странице. Таким же образом работает и наш плагин для оптимизации изображений True Image & Lazy Load.

Сейчас WordPress по-умолчанию добавляет атрибут loading к изображениям:

• в содержимом поста
• в отрывках сообщений (excerpt)
• в текстовых виджетах
• к аватарам
• ко всем изображениям, которые добавляются с помощью wp_get_attachment_image ()

Тестирование отключения атрибута loading для изображений на первом экране показало, что:

• Отключение ленивой загрузки первого изображения в тексте статьи привело к среднему улучшению LCP на 7% .
• Отключение ленивой загрузки первых двух изображений в тексте статьи привело к среднему улучшению LCP на 5%. Пропуск первых двух изображений контента дает худшие результаты, чем пропуск только первого, то есть лучше отключить ленивую загрузку только для первого изображения контента.
• В обоих случаях показатели LCP лучше, по сравнению с результатами с полностью отключенной ленивой загрузкой. Таким образом полное отключение отложенной загрузки не является решением проблемы.

Быстрое решение проблемы

У этой проблемы есть простое и быстрое решение - переверстать шаблон так, чтобы на первом экране не было больших картинок. Вы скажете "а как же дизайн? UX? А что же скажут посетители?". Поверьте, на многих сайтах картинка в первом экране только вредит конверсиям. Убрав её можно сразу решить несколько проблем со скоростью загрузки и баллами в тесте PageSpeed.

Как отключить автоматическое добавление атрибута loading="lazy" в WordPress?

Если же картинка на первом экране необходима - есть несколько путей решения. Можно отключить полностью добавление этого атрибута. Хотя, как и говорилось выше, полностью отключать добавление атрибута loading="lazy" нецелесообразно, но если Вы хотите это сделать, то добавьте в свой файл function.php:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

У каких изображений нужно отключить автоматическое добавление атрибута loading="lazy"?
В стандартных темах WordPress это:

• логотип (если используется)
• первое изображение статьи (Post Thumbnail), если оно реализовано через тег <img>
• первые изображения в тексте статьи (если они попадают в первый экран)
• на главной странице, на странице архивов и категорий - все изображения которые попадают в первый экран

Отключить у логотипа

Существует несколько методов удаления атрибута у логотипа. Например, в теме Astra логотипу присвоены классы "attachment-150x150 size-150x150 ". Поэтому можно проверять изображение по классу и отключать атрибут. Пример:

add_filter( 'wp_get_attachment_image_attributes', 'disable_loading_lazy_for_logo', 99, 2 );
function disable_loading_lazy_for_logo( $attr, $attachment ) {	
  if( isset( $attr['class'] )  && 'attachment-150x150 size-150x150' === $attr['class'] )  {
  	unset( $attr['loading'] );	  
  }
	return $attr;
	
}

Отключить у Миниатюры поста

Чтобы отключить у миниатюры поста (Post Thumbnail) используйте фрагмент кода ниже. Кстати он будет отключать добавление loading="lazy" у всех изображений: логотипа, миниатюры поста, миниатюры в похожих записях ... то есть у всех изображений, к которым можно применить фильтр wp_get_attachment_image. Это может быть неудобно, потому что похожие записи находятся в конце страницы и атрибут loading="lazy" у них отключать не нужно. В этом случае проще отключать атрибут, проверяя классы у изображения, как в примере для логотипа.

function disable_thumbnail_image_lazy_loading( $default, $tag_name, $context ) {
    if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) {
        return false;
    }
    return $default;
}
add_filter( 'wp_lazy_loading_enabled', 'disable_thumbnail_image_lazy_loading', 99, 3);

Отключить у изображений в контенте

Чтобы отключить атрибут у изображений внутри текста поста, используйте немного модифицированный код:

function disable_content_image_lazy_loading( $default, $tag_name, $context ) {
    if ( 'img' === $tag_name && 'the_content' === $context ) {
        return false;
    }
    return $default;
}
add_filter( 'wp_lazy_loading_enabled', 'disable_content_image_lazy_loading', 99, 3);

Недостаток этого кода в том, что он отключит атрибут у ВСЕХ изображений в посте. Можно переписать сниппет таким образом, чтобы атрибут удалялся лишь у ПЕРВОГО изображения в тексте:

add_filter('the_content', 'the_end');
function the_end( $post_content ){
    $pos = strpos($post_content, 'loading="lazy"');
  return $pos!==false ? substr_replace($post_content, '', $pos, strlen('loading="lazy"')) : $post_content;
}

Удалять атрибут у первого изображения есть смысл только если оно попадает на первый экран. Если же оно ниже, то можно ограничиться первыми двумя примерами кода. Второе, третье и т.д. изображения в записи уже не влияют на Large Contentful Paint (LCP). Так что этого достаточно, чтобы гибко настроить нативный lazy load в WordPress и решить проблему LCP. Если вы не владеете навыками программирования, то можете воспользоваться плагином True Image & Lazy Load в котором это всё уже реализовано.