Хотели бы вы использовать ленивую загрузку изображений в WordPress? Ленивая загрузка позволяет вашему веб-сайту загружать изображения только тогда, когда пользователь прокручивает страницу до определенного изображения. Вы можете увидеть его в действии на многих популярных веб-сайтах, таких как Buzzfeed. В этой статье мы покажем вам, как легко лениво загружать изображения в WordPress.
Почему ленивая загрузка имеет значение?
Огромная полезная нагрузка веб-страницы состоит в основном из изображений, сценариев, таблиц стилей, шрифтов и видео. Однако изображения занимают более 60% размера типичной веб-страницы. Изображения также имеют решающее значение для дизайна веб-страницы, поэтому избавиться от них невозможно.
Без какой-либо оптимизации веб-браузер пользователя загружает все ресурсы, прежде чем полностью отобразить страницу. Это приводит к увеличению времени загрузки, что может отвлекать людей. По оценкам WooCommerce, на каждые 100 мс повышения скорости страницы веб-сайт электронной коммерции может увеличить доход на 1%.
В таком сценарии делать все возможное для оптимизации времени загрузки имеет большой смысл. И поскольку изображения являются основным фактором, влияющим на размер веб-страницы, начать с них — хорошая идея. Здесь в игру вступает ленивая загрузка.
Реализовать ленивую загрузку с нуля
Давайте сначала посмотрим, как это сделать без использования каких-либо плагинов. Этот вариант рекомендуется для тех из вас, кто хорошо разбирается в JavaScript. В идеале необходимо предпринять следующие шаги:
Предотвратить загрузку изображения во время загрузки страницы: если вы укажете URL-адрес или путь к изображению в атрибуте src тега ‹img›, изображение будет загружено браузером во время загрузки страницы. Чтобы браузер не загружал изображение, вам нужно вместо этого указать местоположение изображения в атрибуте data-src тега ‹img›.
Зарегистрируйте функции обработчика событий в JavaScript, чтобы проверять элементы на два события: загрузку и прокрутку. Когда элемент появляется в области просмотра, загрузите значение элемента data-src в элемент src, что инициирует загрузку изображения браузером. Простая реализация этого процесса была объяснена Робином Осборном, а демонстрация доступна на CodePen.
Используйте API-интерфейс Intersection Observer
API-интерфейс наблюдателя пересечения помогает идентифицировать элементы DOM, которые находятся в области просмотра в любой момент времени. Это более чистый способ реализации ленивой загрузки без написания функций обработчика событий. Количество строк кода для реализации ленивой загрузки также значительно уменьшается. Тем не менее, совместимость браузера остается проблемой. Кроме того, в блоге разработчиков Google объясняется реализация API-интерфейса наблюдателя пересечений в этой демонстрации CodePen.
Используйте плагин JavaScript
Два рассмотренных выше варианта требуют знания JavaScript среднего уровня. Если вы ищете более простую реализацию отложенной загрузки без использования тяжелого плагина, который загружает сервер, вы можете попробовать простой плагин JavaScript, bLazy.
Библиотека bLazy размером менее 2 КБ не создает дополнительной нагрузки на полезную нагрузку, позволяя легко справляться с ленивой загрузкой изображений. Итак, чтобы использовать библиотеку bLazy, вам нужно инициализировать элементы ‹img› со следующими атрибутами:
class: установить класс всех тегов ‹img› на b-lazy
src: ссылка на изображение-заполнитель
data-src: ссылка на изображение для загрузки
data-src-small: ссылка на изображение для загрузки на экранах шириной менее 420 пикселей
Наконец, вам нужно инициализировать библиотеку bLazy всего несколькими строчками кода, и все ваши изображения будут загружаться через отложенную загрузку.
‹script src="blazy.js"›‹/script›
‹script›
;(function() {
// Инициализация
var bLazy = new Blazy();
})();
‹/script›
Использование плагинов отложенной загрузки WordPress
Все эти плагины автоматически обрабатывают ленивую загрузку. Каждый из них также имеет несколько приятных побочных функций. Например, Lazy Load от WP Rocket также откладывает загрузку видео с YouTube и заменяет их миниатюрой.
Optimole, помимо того, что является новейшим дополнением к семейству ThemeIsle, также обеспечивает надежную оптимизацию изображений (как проверено здесь) с довольно продвинутыми функциями в этом отношении. Например, он дает вам динамическое изменение размера в зависимости от размера экрана пользователя. Оптимизация изображений и отложенная загрузка с помощью Optimole Оптимизация изображений и отложенная загрузка с помощью Optimole. Как и в случае с большинством плагинов, чтобы получить отложенную загрузку, просто установите плагин и включите функцию в панели управления плагина:
