Что такое Lazy Load? Лучшие плагины для использования.
Опубликовано: 01.09.2018
Читатели WPNICE периодически интересуются — как можно организовать постепенную или как её еще называют «ленивую» (Lazy Load) подгрузку изображений на сайте. Вашему вниманию сегодня отличная статья от Jon Penland, где он по полочкам рассказывает о том, что это такое, как работает и рекомендует лучшие плагины если в вашей теме такой функции нет по умолчанию. Приятного чтения, друзья.
Когда нам нужно поделиться медиа-файлами или сделать их частью дизайна сайта, то WordPress всегда готов нам в этом помочь. Однако, проблема заключается в том, что на загрузку всей этой тяжеловесной визуальной составляющей тратится довольно много времени. Ведь, на деле, чтоб просмотреть страницу, пользователь должен дождаться загрузки абсолютно всего контента (и даже того, что находится вне его поля зрения).
Реализация Lazy Load на Jquery
Здесь нам и пригодится так называемая «ленивая» загрузка (Lazy Load), которая представляет собой метод оптимизации страниц, заключающейся в загрузке только видимого пользователю контента. В то время, как контент, который находится ниже поля зрения загружается с задержкой.
How to lazyload images
Эта одни из тех вещей, которая нравится Гуглу и Яндексу, да и, вообще, очень полезная техника, если на страницах вашего сайта много вставленных видео и картинок с высоким разрешением.
Как работает Lazy Load (ленивая загрузка)?
Браузер создает DOM веб-страницы без скачивания изображений и предзагрузки видео. JavaScript используется, чтоб определить, какие картинки скачать, и какие видео предзагрузить, основываясь на том, какой контент сразу попадается на глаза пользователю, когда тот открывает страницу. Такие картинки и видео становиться приоритетными. В итоге, ненужный в данный момент контент не загружается сразу, что в свою очередь и приводит к росту производительности сайта.
Использование Lazy Load на WordPress
Как и в случае многих других проблем WordPress производительности, эта проблема также легко решается плагином. В хранилище WordPress-плагинов вы найдете много расширений, которые обеспечат ленивую загрузку медиа-файлов на вашем сайте.
Мы выделили сегодня три лучших расширения, на которых и рекомендуем остановиться, если вам нужна функция ленивой загрузки.
Картинки и видео реально тормозят сайт?
Нам понадобилась чистая отправная точка, чтоб позже мы могли увидеть, как повлияли на такую основу добавленные картинки и видео.
Для теста я установил обычную, стандартную инсталляцию WordPress. Была использована тема Twenty Sixteen без всяких плагинов и техник, типа кэширования, для улучшения оптимизации.
Вот, как выглядел тест производительности сайта Pingdom перед добавлением картинок и видео.
Как видите, страница очень легкая. Она весит примерно 155 kb и загружается менее чем за полсекунды. Что случится с такой страницей, если добавить тяжелые изображения и вставить YouTube-видео? Как это повлияет на скорость ее загрузки?
Страница «раздулась» и стала весить 1.7 MB, а время ее загрузки увеличилось до 1.3 секунд. TwentySixteen очень хорошо написанная тема, и даже, когда мы нашпиговали ее медиа-файлами, сайт все равно загружается довольно быстро, но, справедливости ради, нужно сказать, что скорость загрузки страниц все-таки уменьшилась.
Увеличиваем скорость загрузки страниц с Lazy Load
Вот три плагина, которые увеличивают скорость загрузки медиа-контента: BJ Lazy Load, Lazy Load XT, и a3 Lazy Load. Остальные плагины, которые мы тестировали, особо не повлияли на увеличение производительности сайта.
BJ Lazy Load
BJ Lazy Load – очень популярный плагин, с инсталляцией и настройкой которого справится даже ребенок. Просто найдите плагин прямо в WP-админке, установите его и активируйте. После активации плагина у вас появится новый пункт в левостороннем меню, который так и называется — BJ Lazy Load. Если после активации плагина никаких проблем фронтэнда не возникло, то настройки по умолчанию трогать не следует.
Данный плагин дает нам доступ к уникальной функции, которой не могут похвастаться другие два: вы можете добавить URL изображения, которое будет использовано в качестве подстановочной замены для лениво загружающихся изображений и видео, до тех пор, пока те не загрузятся. Я бы рекомендовал вам создать однотонное изображение того же цвета, что и ваш фон, и сохранить его в png-формате.
У вас есть возможность обозначить HTML класс, который будет исключен из ленивой загрузки. Вы можете затем применить этот класс к любым изображениям и видео, которые вы желаете исключить из ленивой загрузки. Кроме того вы можете выбрать то, насколько близко должно находится изображение к зоне просмотра, чтоб стать загружаемым.
Давайте посмотрим, как быстро загрузилась страница после установки BJ Lazy Load
Сайт тестировался множество раз в течение дня, и время загрузки всегда было между 300 и 400 миллисекунд. И эта скорость загрузки не единственное «последствие».
Не смотря, на то, что страницы загружаются очень быстро, их вес вырос. После небольшого расследования, удалось понять, почему возникла такая странность.
Как WordPress доставляет изображения?
Стандартное поведение WordPress заключается в том, что он предоставляет браузеру несколько вариантов файла разного размера на выбор. И для этого используется атрибут srcset элемента img, который нужен для вставки изображений.
Это значит, что если вы загрузили довольно большой файл, то WordPress автоматически предложит посетителю выбрать одну из более легких версий изображения. Пользовательский браузер захватит картинку поменьше, основываясь на количестве пикселей, доступных для заполнения изображением.
Как BJ Lazy Load изменяет это поведение WordPress?
BJ Lazy Load переписывает поведение WordPress определенным образом. Атрибут srcset заменяется атрибутом data-lazy-srcset. В результате чего, вместо того, чтоб скачать изображение уменьшенного размера, плагин скачивает изображение с полным разрешением. Конечно, это не идеальный результат, но если вы оптимизируете ваши картинки, прежде чем загрузить их на сайт, то ничего страшного.
Если говорить о визуальном тесте, то он показывает, что если вы просто используете плагин BJ Lazy Load и фон вашего сайта не чисто белый, то вам определенно нужна картинка-подстановочная замена файлов, которые подвергаются ленивой загрузке, так как по умолчанию плагин подменяет медиа-файлы белой подстановочной gif-картинкой
Lazy Load XT
В процессе тестирования Lazy Load XT показал себя довольно хорошо.
После активации плагина в левостороннем меню вы увидите новый пункт: Lazy Load. Вы быстро поймете, что плагин делает гораздо больше, чем просто лениво загружает изображения и видео. Вы можете использовать этот плагин для того, чтоб минимизировать файлы JS и CSS, загружать JavaScript и CSS библиотеки, используя Cloudflare CDN. Кроме того, вы можете переместить скрипты в «подвал» сайта.
Во время тестирования я оставил настройки по умолчанию, не использовал прочие описанные выше функции и очистил кэш сервера.
Страница до сих пор весит в районе 2 MB, и загружается не так быстро, как это было с плагином BJ Lazy Load, но все-таки она стала загружаться на 50% быстрее. Так же, как и предыдущий плагин, это расширение загружает изображение с высоким разрешением, вместо его уменьшенной версии.
Но с подстановочной заменой здесь дело обстоят гораздо лучше, так как это расширение использует прозрачную «подстановку». В результате нет белых пустых боксов, и нет нужды загружать собственное подходящее изображение.
a3 Lazy Load
a3 Lazy Load – это еще один популярный плагин ленивой загрузки. Опять же, после активации плагина слева мы увидим новый пункт меню под названием a3 Lazy Load. Для тестирования я оставил настройки по умолчанию без изменений, за исключением одной опции. Я изменил настройки Loading Background Colour, чтоб подстановочная замена соответствовала цвету фона сайта. Плагин проявил себя очень хорошо: страница загрузилась примерно за полсекунды.
Сравнение результатов
Заметно, что размер страницы и количество запросов к ней значительно увеличились. Чем же объяснить эту разницу? Давайте сначала взглянем на снимок размера контента при активированном плагине a3 Lazy Load.
Картинки занимают совсем мало места: чуть более 150 kb. Оба плагина — BJ Lazy Load и Lazy Load XT — выдают страницу весом в 2.0 MB. Вот, как выглядит скриншот контента, который весит 2.0 MB.
Размер скриптов, HTML, CSS и другого контента практически идентичный. А вот изображения стали весить 1.86 MB, что значительно превышает 150 kb. Так что же произошло?
Как уже было упомянуто ранее, WordPress автоматически выбирает самый легкий вариант изображения.
Оба плагина BJ Lazy Load и Lazy Load XT изменяют это поведение WordPress, доставляя изображение с высоким разрешением, в то время, как a3 Lazy Load не изменяет это поведение, и соответственно вес страницы здесь не увеличивается.
Не смотря на увеличение размера страниц, быстрее всего сайт загружается с плагином BJ Lazy Load, а не с a3 Lazy Load.
На первый взгляд, кажется, что BJ Lazy Load посылает больше запросов. Но, если мы посмотрим на файловую структуру, то поймем, что на самом деле происходит.
Если BJ Lazy Load активирован, то посылается 20 запросов, которые начинаются с data:image/gif. Это скорее данные URI, нежели HTTP-запросы. Таким образом, они говорят браузеру создавать gif локально, вместо того, чтоб запрашивать с сервера. В результате BJ Lazy Load нужно только 17 HTTP запросов, а a3 Lazy Load – аж, 27, и это объясняет, почему страницы загружаются так быстро.
Заключение и рекомендации
Все три плагина отлично справляются с поставленной задачей, так что выбор здесь зависит от личных предпочтений и от того, как именно вы подготавливаете изображения к загрузке на сайт. Если вы не оптимизируете картинки перед загрузкой на сайт, то вам больше подойдет a3 Lazy Load. Если вы оптимизируете изображения перед загрузкой и хотите еще больше разогнать сайт, то ваш выбор – это BJ Lazy Load. Если вы оптимизируете картинки и хотите помимо ленивой загрузки получить и другие функции, то Lazy Load XT – это то, что вам нужно.
Источник
