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

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

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

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

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

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

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

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

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

add_filter( 'wp_lazy_loading_enabled', '__return_false') ;

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

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

К сожалению, возможности текстового редактора на сайте vc.ru не позволяют размещать большие фрагменты кода, поэтому более подробно про исправление ситуации с атрибутом loading="lazy" и примерами кода для WordPress читайте в нашей статье Как правильно применять атрибут loading="lazy" для оптимизации LCP.