Ленивая загрузка – это один из способов оптимизации изображений в целях увеличения скорости загрузки страницы. В условиях WordPress ленивую загрузку можно легко реализовать с помощью плагина, не вникая в программирование. Для этой цели есть большое количество готовых решений. В этой статье рассмотрим самый простой, но при этом самый функциональный и надёжный плагин ленивой загрузки WordPress, а также разберёмся в том, как именно это способ помогает увеличить скорость загрузки страницы.
Оглавление
Что такое ленивая загрузка изображений и как она работает
Изображения – это самые тяжёлые элементы страницы. Они больше всего замедляют загрузку. Если на странице много изображений, то их суммарный вес может быть несколько мегабайт, или даже несколько десятков мегабайт.
При посещении страницы все эти изображения начинают загружаться сразу же одновременно. Это увеличивает скорость загрузки. Но проблема в том, что посетитель страницы не видит сразу все картинки, потому что 90% из них находятся ниже, и чтобы их увидеть, страницу надо прокрутить. Получается, что браузер загружает изображения, которые ещё не видны посетителю. Тогда зачем их загружать, если никто на них не смотрит?
Ленивая загрузка – это отложенная загрузка изображений. При посещении страницы с ленивой загрузкой, браузер загружает только те картинки, которые сейчас видны на экране посетителю. По мере прокрутки страницы, браузер подгружает те картинки, которые находятся ниже. Таким образом, при посещении такой страницы, браузеру её не нужно загружать сразу всю, а достаточно загрузить только один экран, который сейчас виден. От этого намного увеличивается скорость загрузки.
Так и работает ленивая загрузка. В WordPress это можно сделать с помощью плагинов. Один из лучших – a3 Lazy Load.
Плагин для ленивой загрузки изображений WordPress – a3 Lazy Load
a3 Lazy Load по праву является лидером среди плагинов для ленивой загрузки изображений WordPress, это выбор многих. У плагина хорошая оценка вебмастеров и множество положительных отзывов. Достоинство плагина в том, что он полностью бесплатный, без скрытых функций, которые доступны только в платной версии. Также он полностью переведён на русский и многие другие языки. И ещё в нём есть всё, что нужно для создания оптимизированной ленивой загрузки.
Другое достоинство плагина a3 Lazy Load в его простоте. Он хорошо подходит тем, кто не хочет долго разбираться в настройках. Плагин работает “из коробки”. То есть, вы его скачиваете, устанавливаете и активируете, и он уже без настроек сразу работает и делает ленивую загрузку изображений.
А те, кто хотят глубже изучить этот плагин или произвести специфическую настройку, могут познакомиться с его опциями.
Настройки плагина находятся в разделе “Настройки”, в подразделе “a3 Lazy Load”. Они разделены на несколько секций. Напомним, что плагин работает и без предварительной настройки. И если вас всё устраивает в его работе, то лезть в опции не обязательно.
- Глобальные настройки плагина – это первая секция настроек. Эти опции не влияют на работу плагина во фронт-энде, а нужны только для выбора метода сохранения настроек и очистки сведений из базы данных при удалении плагина.
- Активация ленивой загрузки – здесь включается и выключается ленивая загрузка. По умолчанию она включена.
- Ленивая загрузка изображений – в этой секции опций настраивается то, какие изображения будут работать с этим эффектом и можно добавлять исключения. По умолчанию, лениво загружаются все картинки и ничего не добавлено в исключения.
- Ленивая загрузка для видео и iframe – опции, которые управляют ленивой загрузкой видео-плееров и других элементов, которые публикуются в iframe. Также здесь можно выбрать, в каких частях сайта будет применён данный эффект к этим элементам. И можно добавить исключения По умолчанию всё включено и исключений нет.
- Исключить по URL и типу страниц – в этих настройках можно сделать так, чтобы ленивая загрузка не работала на некоторых страницах и типах страниц.
- Оптимизация скрипта загрузки – здесь можно управлять тем, где будет размещён скрип плагина ленивой загрузки WordPress: в подвале или в шапке сайта. От этого зависит скорость загрузки страницы. Часто эффективнее вариант в подвале.
- Плагины мобильных шаблонов WordPress – управляет поддержкой ленивой загрузки в мобильных темах.
- Эффекты и стили – можно выбрать из двух вариантов стиль появления картинки: спиннер – вращающийся круг; и плавное появление. Также здесь задаётся цвет фона изображения.
- Порог старта загрузки изображения – определяет то, насколько должна быть прокручена страница, чтобы картинка начала загружаться. По умолчанию 0 пикселей. То есть картинка начнёт загружаться сразу же, как только её часть появится в зоне видимости на экране.
- Совместимость с Jetpack Site Accelerator (Photon) – включите, если пользуетесь плагином Jetpack.
Необходимость лезть в настройки плагина как правило возникает очень редко. В большинстве случаев всё работает как нужно с настройками по умолчанию.