{"id":13505,"url":"\/distributions\/13505\/click?bit=1&hash=ca3734639136826288c9056e5c8fa03a05e87c4060ae84df200f2c90f5262470","title":"\u0412\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a? \u0410 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435 \u0447\u0442\u043e-\u0442\u043e \u0432 \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435 \u043a\u043e\u0434\u0430?","buttonText":"\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c","imageUuid":"f5f0e11f-fefd-52f5-8712-82164a59b7ce","isPaidAndBannersEnabled":false}

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

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

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

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

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

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

  • в содержимом поста
  • в отрывках сообщений (excerpt)
  • в текстовых виджетах
  • к аватарам
  • ко всем изображениям, которые добавляются с помощью wp_get_attachment_image ()
  • Отключение ленивой загрузки первого изображения в тексте статьи привело к среднему улучшению LCP на 7%.
  • Отключение ленивой загрузки первых двух изображений в тексте статьи привело к среднему улучшению LCP на 5%. Пропуск первых двух изображений контента дает худшие результаты, чем пропуск только первого, то есть лучше отключить ленивую загрузку только для первого изображения контента.
  • В обоих случаях показатели LCP лучше, по сравнению с результатами с полностью отключенной ленивой загрузкой. Таким образом полное отключение отложенной загрузки не является решением проблемы.
Правильное использование атрибута loading="lazy" wp-booster.com

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

Как и говорилось выше, полностью отключать добавление атрибута 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.

0
6 комментариев
Написать комментарий...
Дмитрий Лаговчин

За материал - спасибо!
Классный пример как доходчиво и наглядно обозначить и разобрать далеко неочевидный нюанс.
"Некоторые плагины для отложенной загрузки изображений позволяют избирательно добавлять атрибуты для изображений на странице. Таким же образом работает и наш плагин для оптимизации изображений True Image & Lazy Load."
Поясните, по возможности, в чем принципиальный + по сравнению, например, с a3 Lazy Load?
Спасибо.

Ответить
Развернуть ветку
Евгений Калинский
Автор

Большинство плагинов lazy load, чтобы отложить загрузку картинок вот так изменяют тег <img>:
<img srs="placeholder.gif" srcset="/moya-kartinka.jpg 1x" />

Наш плагин изменяет:
<img srs="/moya-kartinka.jpg" srcset="placeholder.gif 1x" />

Так как Google бот при анализе страницы "смотрит" атрибут src, то в 1ом случае он "видит" на странице только заглушки placeholder.gif
А во 2ом случае - реально картинки.

Об этой проблеме уже писал здесь https://vc.ru/seo/169540-kak-lazy-load-ubivaet-vashi-sayty-i-chto-s-etim-delat 

А вот пример как должно работать Как правильно реализовать Lazy Load изображений на сайте  

Ответить
Развернуть ветку
โอเล-ก สีเงิน

Неужели бот настолько тупой, что от перемены мест он пугается и "не видит" картинки? LCP - это быстрота сервера, а потом уже всё остальное...

Ответить
Развернуть ветку
Михаил Кобзарёв

Похоже вы не в курсе, что такое LCP, путаете с TTFB

Ответить
Развернуть ветку
Евгений Калинский
Автор

Бот не может быть тупым или не тупым. Бот - это алгоритм, который по заданным правилам ищет контент на странице. И бот ищет адрес картинки в атрибуте src. И если там его нет, то тупым является владелец сайта, который допустил это, а не бот.

Ответить
Развернуть ветку
YouTube Streamer Junky

Спасибо

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Читать все 6 комментариев
null