Ленивая загрузка изоборажений в WordPress — плагин a3 Lazy Load

Всех приветствую. Продолжаю тему скорости загрузки сайтов (в прошлом посте я сравнивал WordPress с YII2), сегодня хочу рассказать про ленивую загрузку изображений в WordPress — почему это скорее хорошо, чем плохо и какие именно преимущества дает lazy лоадинг.

Что такое lazy loading?

Ленивая загрузка это преднамеренное откладывание загрузки некоторых элементов веб-страницы до определенного события. Чаще всего откладывается загрузка изображений, так как на большинстве страниц в интернете именно графика занимает львиную долю размера. Событие же, по которому активизируется загрузка каждого конкретного изображения — это когда оно попадает в поле зрения человека при скролле страницы.

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

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

Таким образом, с помощью ленивой загрузки мы добиваемся существенной разгрузки сервера, т.к. ему не надо делать запросы ко всем картинкам, которые где-то там внизу. Естественно, при этом растет и общая скорость загрузки страницы.

Хотя я говорю об изображениях, лениво можно подгружать и другие сущности. Например, видео. Или какие-то сайты в iframe. Те же видео с ютуба, которые вставляются тоже iframe-ами, тоже можно подгружать лениво. Давайте разберемся, как это делать в wordpress.

Как реализовать ленивую подгрузку медиаконтента в движке WordPress?

К счастью, в движке wordpress с этим все очень просто. Даже не исследуя эту тему глубоко я видел как минимум 5 плагинов реализующих lazy load, но самым основным я считаю A3 Lazy Load. Хотя, конечно, если вас эта тема заинтересовала, вы можете провести свое исследование, возможно найдете лучшее решение.

Итак, ставим и активируем плагин, тут ничего необычного, все банально. Хочу заметить, что плагин явно не мертв и до сих пор обновляется хотя бы 1-2 раза в несколько месяцев.

После установки идем в Настройки a3 lazy load и смотрим:

Тут у нас под спойлеры спрятано немало разных опций. Чтобы не вдаваться в подробности думаю есть смысл прокомментировать лишь основные:

  1. Lazy Load Activation — эта опция, собственно, включает ленивую загрузку. Должна быть в положении on.включение lazy load
  2. Lazy Load Images — основной блок настроек, кроме него вам возможно больше ничего и не понадобится. настройки картинокТут можно включить глобально ленивую подгрузку для картинок, а потом настроить более детально — для изображений в контенте (то есть в статьях/страницах), в виджетах, граватарах, а также для миниатюр постов. Также нужно оставить включенным Noscript support.
    По умолчанию будет включено все, можете обновить кэш и посмотреть, как теперь работает загрузка сайта. Если у вас все корректно, то можно радоваться. Я выключил ленивую загрузку в виджетах так как у меня там немного ломается отображение, потом исправлю и возможно включу, т.к. картинок в правой колонке тоже немало.
  3. Lazy Load Videos and iframes. Тут, в принципе, без комментариев, потому что я думаю, вам понятно и так — можно включить ленивую загрузку видео, вставленных с помощью html5 (тег video если что) или iframe. Сколько это сэкономит времени при загрузке страницы расскажу ниже.настройки видео в плагине a3 lazy load
  4. Effect & Style. Можно выбрать 1 из двух эффектов появления изображений — spinner (это gif-анимация) будет выглядеть так:

    Либо Fade in, мне этот эффект понравился больше. Если же выбран эффект spinner, то для него можно выбрать цвет gif-картинки.настройка эффекта загрузки в a3 lazy load

Собственно, это все по настройке в wordpress.

Реализация в других движках/фреймворках?

Если вы разрабатываете сайт с помощью одного из популярных фреймворков то вам просто надо найти jquery-плагин или просто чистый javascript-сценарий, который бы реализовывал бы подобную подгрузку. В интернете, думаю, это не проблема сделать.

Что касается других популярных движков, то лично я мало с какими из них работал, думаю гугление поможет и там.

Основное преимущество lazy load-а

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

Чем больше у вас среднее количество картинок и видео на статью, тем больше вы выиграете от использования лейзи лоада.

Вот если в среднем:

  • 1 изображение весом от 50 килобайт займет от 100 миллисекунд
  • 1 видео, выведенное через html5 тег video грузится 2-3 секунды
  • загрузка 1 iframe это минимум 1-4 секунды, ютубовские видео в iframe грузятся 5-7 секунд!

Особенно снижение http-запросов важно при оптимизации под смартфоны и планшеты, потому что мобильные браузеры работают не так быстро как десктопные и большое количество «реквестов» (request с английского это запрос) сильнее тормозит загрузку на мобильных.

Итоги — замеры скорости загрузки и http-запросов до и после применения a3 lazy load

Ну и теперь я покажу самое интересное — как поменялись показатели скорости веб-страницы с использованием lazy load. Покажу на примере этой статьи, она большая и в ней много картинок, так что это подходящий пример.

Показатели страницы без lazy load при первом и повторном посещении на WebPageTest


Как видите, на загрузку ушло 9,3 сек в первый раз и 3,2 сек во второй. Всего было выполнено 125 http-запросов, что достаточно много.

Показатели страницы с lazy load при первом и повторном посещении на WebPageTest:


Примерно удалось выиграть 1-1,5 секунды времени в первый раз и 0,5 сек во второй. Количество запросов снижено со 125 до 91.

Google PageSpeed — до включения плагина выдавал оценку 71, после — 73.

PageSpeed не покажет большого прироста, если у вас на странице были хорошо оптимизированные картинки (в моем случае графика уже была хорошо сжата). А вот если были очень тяжелые, в неправильном формате и плохо оптимизированные под web, то можно ожидать прироста на 10-30 пунктов.

Результаты теста в GTMetrix, показываю чисто за компанию:

Заметьте, насколько мало весит страница. Со всеми изображениями это было бы за мегабайт. Здесь время 9 секунд из-за того, что у них тест из Канады, так что можно смело отнимать 1,5-2 секунды за счет расстояния. И получаем что реальное время загрузки через этот тест примерно такое же — около 7 секунд.

Итоги

Как видите, lazy load это еще 1 способ ускорить загрузку, даже когда вы уже сделали все остальное, что только можно было. Я считаю, что он имеет право на жизнь для всех тех случаев, когда пользователь имеет дело с большими страницами, размером от трех экранов. Если же у вас все содержимое везде помещается в 1-2 экрана, особого смысла в ленивой загрузке нет.

Оставляйте свои комментарии, мне интересно, кто что думает о lazy load, позитивно ли вы воспринимаете такой скрипт или нет?

Платное/бесплатное по WordPress на других сайтах

Бесплатные уроки по созданию шаблона на WordPress

Платный курс по созданию шаблонов Wordpress

Платный курс по созданию плагинов Wordpress

Шикарный платный плагин для оптимизации WordPress сайта

Премиум шаблон для WordPress, сделанный для людей

Комментариев: 7
  1. Александр

    Спасибо за информацию, с этим плагином не сталкивался, но для себя протестирую.

    1. Михаил (автор)

      Я пришел к выводу, что плагин полезен только для статей с 20+ картинками и если их вес от 300-400 килобайт. В противном случае, для статей полегче он почти бесполезен, т.к. сами файлы плагина будут подгружаться столько же по времени, сколько те 5-10 картинок.

  2. webdizcomua

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

  3. Александр Каратаев

    Интересный плагин! Действительно заслуживает внимания. Надо будет его обязательно попробовать. Спасибо, Михаил.

    1. Михаил (автор)

      Я тут на втором сайте протестировал его и хотел бы дополнить. На первом проекте он мне улучшил и чистое время загрузки страницы, и показатели Google PageSpeed, а на другом сайте только что проверял, время загрузки на секунду лучше, запросов делается на 10-50 меньше в зависимости от кол-ва картинок за первым экраном. А вот в PageSpeed на пару пунктов меньше. Все дело в том, что плагин подгружает в head 2 своих css-файла и их загрузка идет где-то 0,4 сек + аж 4 js-файла, но их хотя бы в футер.

      В общем, файлы самого плагина грузятся тоже не так уж и мало. В любом случае, применение обоснованно там, где много контента с изображениями. Но вот какие выводы я сделал еще:

      1. A3 lazy load возможно не самый легковесный среди ленивых загрузчиков, просто он популярный, если поискать то может и есть реализации получше.

      2. Если покопаться в самом плагине то можно попробовать все скрипты и стили соединить, сжать и вынести в футер, тогда PageSpeed будет ругаться меньше.

  4. Валерий

    По всей видимости плагин заслуживает особого внимания. Спасибо за информацию Михаил! Будем пробовать! Скажите, а если например в моей теме оформления уже есть отложенная загрузка изображений, значит этот плагин скорее всего будет бесполезен?

    1. Михаил (автор)

      Вы можете проверить в сервисе WebPageTest — поставьте на анализ любую страницу, на котором хотя бы 5-10 картинок и после проверки зафиксируйте кол-во запросов (requests) и время загрузки страницы. А потом включите плагин и проверьте во второй раз, если кол-во запросов снизилось ровно на количество картинок ниже первого экрана, то плагин успешно включил ленивую подгрузку.

      Можно проверить и сразу без активации плагина, просто после теста на Webpagetest идите во вкладку Perfomance Review и ищите там картинки, которые ниже первого экрана (по названию можно искать). И если все они найдены, значит либо отложенная загрузка не работает, либо она работает каким-то нестандартным образом.

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