Ленивая загрузка изоборажений в 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-сценарий, который бы реализовывал бы подобную подгрузку. В интернете, думаю, это не проблема сделать.

Да, это реклама, но надеюсь, она будет полезна вам. GetUniq это сервис для вебмастеров и всех работающих с трафиком людей, с помощью которого можно выгоднее пополнять счета в кабинетах рекламных сетей, таких как Яндекс.Директ, MyTarget, ВК Таргет и другие. Без использования сервиса вам придется заплатить 1180 рублей за пополнение счета в Директе на 1000, а используя возможности Getuniq за эти же 1180 на ваш счет поступит 1100-1200 рублей! То же самое для всех других сетей. Я сам уже начал использовать и порекомендовал всем знакомым вебмастерам, рекомендую и вам. При желании, по этой ссылке вы можете почитать мой обзор сервиса.

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

Основное преимущество 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, позитивно ли вы воспринимаете такой скрипт или нет?

Комментариев: 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 и ищите там картинки, которые ниже первого экрана (по названию можно искать). И если все они найдены, значит либо отложенная загрузка не работает, либо она работает каким-то нестандартным образом.

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