Как использовать ленивую загрузку изображений в WordPress

В данной статье я расскажу, как работает ленивая загрузка и как она может улучшить производительность веб-сайта. А также как реализовать ленивую загрузку в WordPress.

Что такое ленивая загрузка?

Ленивая загрузка – это метод увеличения скорости выведения страницы путем отложенной загрузки некритичных ресурсов, которые расположены ниже видимой области окна браузера. К таким ресурсам относятся картинки, которые мы пока не видим.

Картинки – идеальный вариант для ленивой загрузки, так как они довольно ресурсоемкие. Видео, скрипты и комментарии также можно оставить на потом.

При ленивой загрузке ресурсы не загружаются, пока они не нужны. А если посетитель не прокрутит веб-страницу до конца, то они не будут выводиться на странице вообще.

Почему ленивая загрузка лучше?

Ленивая загрузка картинок в WordPress улучшает производительность веб-сайта, SEO и пользовательский опыт. Она уменьшает вес начальной страницы и подгружает ее элементы по мере необходимости.

При этом браузер сперва создает DOM, чтобы посетитель мог начать взаимодействовать с веб-сайтом, даже если веб-страница ещё не загружена целиком.

При ленивой загрузке файлы картинок и веб-страница не уменьшаются. Если «вес» страницы составляет 3 МБ, то такой она и останется с ленивой загрузкой или без нее.

В Google скорость загрузки страниц будет фактором ранжирования. Так что поисковик рекомендует применять ленивую загрузку картинок для повышения производительности.

Как использовать ленивую загрузку картинок в WordPress

Перед использованием ленивой загрузки при помощи Smush Pro

Я создал веб-страницу с несколькими огромными картинками. Далее провел аудит тестового веб-сайта в Google PageSpeed ​​Insights. Его показатель увеличился с 89 до 91 после того, что я добавил ленивую загрузку в Smush Pro.

Как использовать ленивую загрузку картинок в WordPress

После активации ленивой загрузки при помощи Smush Pro

А ещё ленивая загрузка уменьшает объем передаваемых данных. Пользователи с медленным интернет-соединением буду вам благодарны за это.

Как работает ленивая загрузка?

Прежде всего, надо определить, загрузку каких картинок следует отложить. Это графический контент, который не виден посетителю в данный момент. А также тот, отсутствие которого не повлияет на структуру веб-страницы.

Например, изображение логотипа, используемое в шапке веб-сайта или в баннерах над основным текстом, не следует загружать при помощи ленивой загрузки.

Кроме этого необходимо «лениво» загружать картинки, которые находятся на 500 пикселей ниже от области просмотра, чтобы они смогли в полном объеме загрузиться, прежде чем посетитель дойдет до них.

Запретите обычную загрузку картинок

При использовании ленивой загрузки на веб-сайте надо предотвратить загрузку обычным методом. Один из методов сделать это для тегов <img> состоит в удалении URL-адреса картинки из атрибута src и перемещении этого адреса в атрибут data-src для временного хранения.

Определите, как браузер будет обнаруживать картинки в области просмотра

Необходимо определить, как браузер будет находить картинки в области просмотра. Для этого можно использовать обработчик событий Javascript или API-интерфейс Intersection Observer.

Обработчик событий Javascript

Использование обработчиков событий JavaScript scroll, resize и orientationchange ‒ это идеальный метод определить, достиг ли элемент области просмотра. Поскольку этот подход совместим со всеми браузерами. Но также необходимо реализовать идентификацию видимости элемента при помощи getBoundingClientRect. Это может вызвать небольшую задержку при рендеринге картинок. Пример можно увидеть здесь.

API-интерфейс Intersection Observer

Intersection Observer API ‒ самый эффективный метод для браузеров определять, когда изображение попало в область просмотра. Данный подход работает быстрее, чем использование обработчиков событий. Для его реализации зарегистрируйте наблюдатель, чтобы просмотреть элементы и установить действие браузера, когда изображение попадет в область окна просмотра.

Intersection Observer API имеет в себя хорошую поддержку браузерами, но ещё не получил повсеместного распространения. Так что необходимо использовать обработчики событий Javascript в виде запасного варианта для несовместимых браузеров.

Переместите URL-адрес картинки в атрибут src

Как только браузер обнаружит, что изображение появилось, ему надо будет вставить URL-адрес в атрибут src или srcset для загрузки и выведения рисунка. После этого необходимо удалить классы, добавленные к изображению, чтобы помочь Javascript его идентифицировать. Далее удалить наблюдатель.

Как использовать ленивую загрузку в WordPress

Можно без труда добавить ленивую загрузку на WordPress- веб-сайт при помощи плагинов или Javascript. Оба варианта дают схожие результаты.

Вариант 1. Использование JavaScript для отложенной загрузки скрытых картинок в WordPress

Лучший метод сделать это ‒ создать плагин для JavaScript кода. На данной странице есть два примера. Один показывает, как использовать обработчики событий, а другой – как применять API-интерфейс Intersection Observer.

Вариант 2. Использование JavaScript-библиотеки ленивой загрузки

Если вы хотели бы использовать JavaScript- библиотеку, есть много вариантов:

  • react-lazyload – библиотека отложенной загрузки React, не использует Intersection Observer.
  • js – использует только Intersection Observer, суперлегкая.
  • blazy – тоже легкая, но не использует Intersection Observer.
  • js – использует Intersection Observer и обработчики событий.
  • lazysizes – подходит для ленивой загрузки видео и фреймов.

Также можно использовать jQuery, поскольку эта библиотека содержится в ядре ​​WordPress.

Вариант 3. Использование плагина ленивой загрузки

Самый простой метод добавить ленивую загрузку на веб-сайт – это использовать специализированный WordPress- плагин. Большинство платных плагинов для оптимизации картинок(к примеру, Smush Pro) имеют встроенный функционал ленивой загрузки. Также мы добавили ее в бесплатную версию Smush, размещенную на WordPress.org.

Мы сделали процесс активации ленивой загрузки в плагине Smush предельно простым. Все, что необходимо сделать, это перейти в раздел «Ленивая загрузка» плагина Smush Pro и нажать кнопку «Активировать».

Как использовать ленивую загрузку картинок в WordPress

Установите Smush Pro и активируйте ленивую загрузку меньше, чем за две минуты

Что необходимо знать при использовании ленивой загрузки для картинок

  • Ленивая загрузка не добавляет веб-сайту лишнего веса. Но при неправильной реализации она может мешать поисковым системам сканировать веб-сайт.
  • Имейте ввиду, что линия сгиба веб-страницы меняется в зависимости от пользовательского устройства.
  • Используйте атрибут placeholder вместо того, чтобы оставлять атрибут src пустым. И укажите высоту и ширину картинки, чтобы содержимое не сдвигался при его загрузке.
  • Используйте разметку <noscript> для указания действия, которое должно произойти, если у пользователя отключен JavaScript.

Заключение

Отложенная загрузка – это эффективный и простой метод улучшить производительность веб-сайта. Данный способ будет работать для всех картинок, указанных в теге <img>.

Если необходимо выполнять ленивую загрузку фоновых картинок в CSS, тогда следует использовать аналогичный способ, предназначенный для таргетинга картинок. А также необходимо будет применять CSS-селекторы.

А вы использовали ленивую загрузку на веб-сайте? Это повысило показатели веб-сайта в Google Pagespeed Insights?

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

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