Отложенная загрузка изображений в WordPress

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

Что такое отложенная загрузка изображений?

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

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

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

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

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

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

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

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

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

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

После активации отложенной загрузки с помощью 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 и нажать кнопку «Активировать».

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

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

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

Заключение

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

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

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

Ангелина Писанюкавтор-переводчик статьи «How to Defer Offscreen Images in WordPress With Lazy Loading»