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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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