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

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

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

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

Когда идёт речь про "первый экран", то имеют ввиду то, как отображается сайт на мобильных устройствах. В тесте PageSpeed Insight эмулируется отображение сайта на экране мобильного телефона Moto G4 (размер экрана 360x640 px). Тем не менее нужно помнить, что в тесте мы видим не только результаты лабораторного тестирования, но и результаты полученные от посетителей вашего сайта. А у посетителей могут быть устройства с разным размером экрана. Поэтому "первый экран" реальных посетителей может быть больше, чем 360x640 px.

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

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

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

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

Правильное применение атрибута loading = lazy

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

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

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

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

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

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

function disable_template_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_template_image_lazy_loading',
    10,
    3
);

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *