Lazy loading: руководство по настройке для Wordpress

Скорость загрузки сайта была и будет одной из важных факторов ранжирования сайта. С увеличением количества мобильного трафика на сайт скорость его загрузки должна только уменьшаться. Одним из способов уменьшения скорости есть настройка браузерной ленивой загрузки изображений. Наша команда Plerdy подготовила для Вас подробное руководство с 4 разними способами как легко и просто внедрить Lazy loading для своего сайта.

Lazy loading: руководство по настройке для Wordpress

Что Вам нужно знать о “Lazy loading”?

Lazy loading (браузерная ленивая загрузка картинок) - один из методов ускорения скорости загрузки сайта, который начинает загружать фото на странице тогда, когда пользователь при скролле дошел до определённой части страницы, где есть изображения.

Обратите внимание! Атрибут loading Googlebot поддерживает и работает только на базе от Chrome 76. Как правило, сейчас у всех пользователей база Chrome 83 или Chrome 84.

Когда нужно внедрять “Lazy loading”?

Ленивая браузерная загрузка изображений нужна если:

  • Скорость загрузки Вашего сайта больше 5-7 секунд и все рекомендации от сервисов проверки скорости были исполнены.
  • Сайт конкурентов значительно быстрее Вашего.
  • Вы используете много изображений на страницах сайта / блога.
  • Ваш сайт размещен на слабом сервере.
  • Количество посетителей з мобильного телефона превышает 50-60%.
  • В PageSpeed Insights оценка Вашего сайта ниже 50 балов.

Решения по настройке Lazy loading

В интернете Вы можете найти множество разных рекомендаций по внедрению и настройке Lazy loading. В большинстве случаев Вам нужно будет заручиться поддержкой программистов, которые с помощью функций смогут это реализовать. Есть и другие решения, например если сайт на WordPress, можно воспользоваться уже готовимы плагинами. Есть одно, но. При установке плагина в код сайта добавляются его функции и стили. Таким образом сайт может дольше загружаться. А нашим заданием есть улучшение скорости. Вот в чем парадокс. По этому, мы подготовили 4 решения, которые использовали для нашего сайта и можем с уверенностью сказать, что это работает.

Учтите, что при полном копировании кода размещенного в примерах Lazy loading на Вашем сайте не заработает. Эти примеры просто смогут помочь Вашим программистам реализовать Lazy loading для Вашего сайта.

Настройка Lazy loading - способ №1

Один из способов настройки Lazy loading есть добавить функцию в тему “functions.php”, которая автоматически при сохранении нового поста или страницы ко всем тегам <img> и <iframe> будет добавлять атрибут loading=”lazy”.

Реализация выглядит следующим образом:

add_filter( 'save_post', 'add_lazy_load', 10, 3 ); function add_lazy_load($post_id, $post, $update) { if (wp_is_post_revision($post_id)) { return; } if ( ! class_exists( 'DOMDocument', false ) ) return; remove_action('save_post', 'add_lazy_load'); $post_status = get_post_status(); if ($post_status != 'draft') { $document = new DOMDocument(); $document->loadHTML(mb_convert_encoding($post->post_content, 'HTML-ENTITIES', 'UTF-8')); $images = $document->getElementsByTagName('img'); foreach ($images as $image) { $image->getAttribute('load'); if (!$image->getAttribute('loading') || $image->getAttribute('loading') != 'lazy') { $image->setAttribute('loading', 'lazy'); } } $iframes = $document->getElementsByTagName('iframe'); foreach ($iframes as $iframe) { $iframe->getAttribute('load'); if (!$iframe->getAttribute('loading') || $iframe->getAttribute('loading') != 'lazy') { $iframe->setAttribute('loading', 'lazy'); } } $html = $document->saveHTML(); wp_update_post(array( "ID" => $post_id, "post_content" => html_entity_decode($html), )); } add_action('save_post', 'add_lazy_load', 10, 3); }

Этот метод подойдет только для новых страниц, которые будут только создаваться. Во втором способе я покажу еще один вариант настройки Lazy loading, но уже для сознанных страниц и постов.

Настройка Lazy loading - способ №2

Этот способ настройки Lazy loading аналогичен первому способу, но здесь происходит обновление в базе только для сохранённых постов.

В базе в таблице постов ко всем тегам <img> и <iframe> добавляем атрибут 'loading="lazy"". Если для тегов уже не используется атрибут 'loading' это можно сделать простой заменой:

UPDATE `wp_posts` t1, `wp_posts` t2 SET t1.`post_content`= REPLACE(t2.`post_content`, '<img ', '<img loading="lazy" ') WHERE t1.id = t2.id UPDATE `wp_posts` t1, `wp_posts` t2 SET t1.`post_content`= REPLACE(t2.`post_content`, '<iframe ', '<iframe loading="lazy" ') WHERE t1.id = t2.id

Если в базе в тегах <img> или <iframe> уже есть прописан атрибут 'loading', тогда следует использовать запросы с использованием регулярных выражений для замены.

Проверить это можно запросу:

SELECT * FROM `wp_posts` WHERE `post_content` REGEXP '<img[A-Za-z\'\"\= ]+loading' SELECT * FROM `wp_posts` WHERE `post_content` REGEXP '<iframe[A-Za-z\'\"\= ]+loading'

Первый и второй способы относятся к работам с базой данных. В следующих примерах я покажу как настроить Lazy loading через верстку в темах.

Настройка Lazy loading - способ №3

Если в темах Вашего сайта вызывается функция “the_post_thumbnail()” Вы можете с ее помощью передать параметром атрибут 'loading' => 'lazy'.

Реализация выглядит следующим образом:

the_post_thumbnail('full', array('loading' => 'lazy'));

Минус такого способа в тому, что эта функция “the_post_thumbnail()” может отсутствовать на Вашем сайте.

Настройка Lazy loading - способ №4

Третий способ заключается в добавлении в теги <img> и <iframe> во всех темах сайта атрибута 'loading' => 'lazy'.

Реализация выглядит следующим образом:

<img src="https://test.com/wp-content/speed.svg" loading="lazy" data-src="https://test.com/wp-content/speed.svg" >

“Lazy loading” и проблемы при настройке

Случается такое, что при реализации Lazy loading были допущены ошибки. Как правило, это приводит к закрытию медиа контента для поисковых ботов. Таким образом картинки с Вашего сайта пользователи не смогут найти в поисковой выдаче.

Чтобы убедится в правильной реализации и настройке атрибута Lazy loading Вы можете воспользоваться следующими методами:

  • В поиске по картинкам введите alt картинки и попробуйте найти ее среди всех результатов.
  • Воспользуйтесь следующим скриптом. С помощью этих команд Вы сможете запустить скрипт:
git checkout https://github.com/GoogleChromeLabs/puppeteer-examples cd puppeteer-examples npm i node lazyimages_without_scroll_events.js -h

Выводы

Если до сих пор Вы не реализовали ленивую браузерную загрузку картинок Lazy loading лучше не откладывать это в долгий ящик. С их помощью Вы точно сможете улучшить показатель загрузки страницы, а также юзабилити сайта.

33
8 комментариев

Супер! Пост с кодом и описанием:"что", "куда" и "как". Пример для будующих постов ;)

3
Ответить

Спасибо Вам! Нам очень приятно! 

1
Ответить

К счастью можно не тратить время добавляя коды, так как нами разработан плагин Helper Lite for PageSpeed https://ru.wordpress.org/plugins/helper-lite-for-pagespeed/ который добавляет этот атрибут и не только к <img>.
Будем рады если протестируете и установите!

1
Ответить

Спасибо, будем посмотреть.

Ответить

Что вы несёте? Функция the_post_thumbnail() появилась еще в WordPress 2.9.0, вы о каком тысячелетии пишете)))

Ответить

Варианты, где правите базу - за такое руки ломают и как быть в случае, если данные атрибуты там уже есть, например, если у вас WordPress 5.5, где это из коробки работает?

Ответить