Июл
28
4

Отложенная загрузка изображений — плагины Lazy Load для WordPress

Плагины для ленивой загрузки (lazy load)Скорость загрузки является важным требованием к сайту как со стороны поисковиков, так и с точки зрения пользователей. Люди хотят быстро получать информацию, а не ждать несколько секунд пока отобразится страница. Именно поэтому разработчики пытаются всячески улучшить данный процесс: внедряют подборки рекомендаций как на mkels.com, экспериментируют с сервисами и CMS модулями.

Если говорить про картинки, то тут 2 варианта: оптимизация с помощью веб-решений или графических редакторов, а также ленивая загрузка изображений (англ. — Lazy Load). В WordPress для второго метода имеется целый ряд плагинов, которые сегодня рассмотрим. 

Основной принцип отложенной загрузки картинок заключается в том, дабы показывать их только тогда, когда пользователь прокручивает до места, где они фактически находятся. По умолчанию браузеры скачивают и обрабатывают всю графику сразу, что в свою очередь создает ненужную задержку.

Как работает Lazy Load:

  • браузер подгружает содержимое сайта без медиафайлов;
  • с помощью некого JavaScript определяются какие картинки/видео должны выводиться изначально при запуске страницы;
  • «дополнительная» материалы отображается при прокрутке, когда пользователь доходит до нужного контента.

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

По теме в сети была найдена интересная статья, где автор оценивал эффективность скриптов Lazy Load в WordPress. Для теста был взят максимально простой шаблон TwentySixteen. Некоторыми цифрами из заметки есть смысл поделиться. Во-первых, посмотрим как именно медиафайлы влияют на результат.

Скорость загрузки картинок в WordPress

Сверху показаны данные обычной страницы без оптимизации, кэширования и тому подобных вещей. Снизу — она же, но с добавлением картинок / видео. Общий вес изменился с 115Кб до 1,7Мб — при этом скорость «уменьшилась» с 416мс до 1,28 секунды. Короче говоря, проблема имеет место быть.

Плагины ленивой загрузки в WordPress

Чтобы найти подходящие для задачи модули вводите фразу «lazy load» в Вордпресс репозитории. Жалко там нет сортировки, приходится вручную искать наиболее популярные плагины, хотя по данной нише их и не так много. Подобрал 8 решений, на которые следует обратить взор в первую очередь. Внимание(!) оценку эффективности отложенной загрузки картинок и некоторые технические детали рассмотрю ниже.

Lazy Load

Плагин Lazy Load

Первый модуль основан на скрипте jQuery.sonar (автор Dave Artz, AOL), позволяющем определить какая картинка находится в видимости пользователя. Я использую именно его т.к. в описании сказано, что созданием занималась команда из Automattic (wordpress.com) и другие опытные программисты. К тому же здесь больше всего установок (90 тыс.), хотя он и обновлялся давненько + оценка лишь 4. По личному опыту все работает отлично.

BJ Lazy Load

BJ Lazy Load

Кроме картинок в постах плагин добавляет ленивую загрузку изображений из миниатюр, аватаров пользователей + iframes (включая популярные видеохостинги YouTube / Vimeo). Поддерживается контент в виджетах — особенно актуально после добавления в WP виджетов вставки видео/графики. Пользователи без Javascript будут видеть обычную неоптимизированную страницу. Нормально работает с CDN. Загрузок — 50 тыс, оценка 4, обновление было не так давно.

a3 Lazy Load

Модуль a3 Lazy Load

Одно из самых «новых» решений — апдейт 2 месяца назад + поддержка самой последней версии WordPress. Скачивания — более 10тысяч, оценка 4,5. Отличительной его особенностью есть целый блок настроек в админке, где вы можете вручную выбрать какие типы объектов будут обработаны: миниатюры, виджеты, граватары и т.п.

Аналогичные настройки есть для видео и iframe контента (встроенного кода). Также модуль совместим с CDN, AMP, WooCommerce, WPTouch, WP Super Cache и W3 Total Cache. По ощущениям это самый продвинутый вариант из всех — тут реализована не просто отложенная загрузка картинок, а предоставляется целый комплекс функций по оптимизации.

Rocket Lazy Load

Rocket Lazy Load

Собственно модуль делает то же, что и остальные — улучшает время загрузки и сокращает число HTTP запросов. В описании сказано, что он не использует тяжелые библиотеки по типу jQuery, а скрипт весит 6Кб. Для старта не нужны дополнительные настройки — просто устанавливаете и активируете.

Rocket Lazy Load работает в том числе с аватарами и превью, хотя в отзывах были замечания, что могут возникать ошибки с дизайном — проверяйте работоспособность сайта после внедрения. А еще лучше использовать пример кода с репозитория, позволяющий отключить вызов решения на некоторых ненужных страницах (оставить только single).

Crazy Lazy

https://wordpress.org/plugins/crazy-lazy/

Данный плагин ленивой загрузки контента и изображений обрабатывает все картинки, которые добавлены в медиабиблиотеку, в том числе и миниатюры постов. Работает сразу из коробки, без дополнительных действий, хотя у разработчиков есть настройки: установка картинки-загрузчика и возможность исключить обход некоторых материалов.

Скачиваний — 5000, оценка — 4,5. В описании нет информации, что аватары и виджеты также  «подхватываются» автоматические, уточните при тестировании. С другой стороны, если у вас, например, для комментариев используется сторонний скрипт, то это нормально.

Lazy Load XT

Lazy Load XT

Авторы охарактеризовали свое творение как самый быстрый, легкий и производительный метод отложенной загрузки в Вордпресс. Лучше бы они, конечно, детальнее рассказали о списке настроек, которые получит пользователь после установки. Здесь есть: выбор типов графики для обработки, использование минифицированных версий скриптов, а также перемещение их в футер, добавление эффектов прелоадеру и некоторые другие аддоны. Таким образом, модуль позволяет дополнительно реализовать некоторые SEO рекомендации для WordPress, что весьма удобно.

Плюсом Lazy Load XT можно назвать использование прозрачной картинки-загрузчика, поэтому на странице пользователи не увидят «белых блоков» вместо подгружаемых изображений. Также здесь есть поддержка фоновой графики при желании (но это уже выходит за рамки контента, и нужно быть внимательным).

Loading Page with Loading Screen

Loading Page with Loading Screen

Напоследок парочка нестандартных решений. Данный плагин кроме функции Lazy Load в Вордпресс добавляет парочку интересный штук. Во время генерации контента появляется полупрозрачный экран загрузки, где будет отображен процент завершения процесса. Все это идет с анимацией и разными настройками: цвет/изображение для фона, срабатывание один раз на страницу/сессию, исключения и т.п. В целом, воспринимается больше как WOW эффект, но после нескольких раз может начать раздражать.

Lazy Load for Videos

https://wordpress.org/plugins/lazy-load-for-videos/

Модуль заменяет встроенные видео с Vimeo и Youtube на кликабельные изображения. Загрузка ролика начнется только после клина пользователя на превью. Используется jQuery поэтому никаких дополнительных скриптов не нужно. В принципе, у него есть достаточно много функций, он активно развивается + показатели скачивания (6тыс.) и оценка (4,5) весьма неплохие. В предыдущих модулях вы могли видеть также поддержку видеоконтента и iframes, но здесь гораздо больше разных опций. Думаю, Lazy Load for Videos идеально подойдет для видео-сервисов с подборками клипов, трейлеров, смешных роликов и т.п.

Эффективность отложенной загрузки

Как я уже сказал, работаю с модулем Lazy Load — проблем пока не возникает, картинки грузятся только при прокрутке, причем достаточно быстро. Лично я никаких специальных замеров не проводил, ориентируюсь исключительно на визуальный эффект, который наблюдаю «до» и «после».

Однако автор статьи, которую упоминал выше, проводил анализ результатов по трем разным плагинам, и вот что получилось:

Эффективность lazy load загрузки

Можно заметить, как ленивая загрузка изображений и контента с помощью a3 Lazy Load значительно отличается по показателям у других методов. Все дело в обработке картинок:

  • По умолчанию WordPress передает браузеру все доступные значения размеров изображений, которые имеются. Тот в свою очередь загружает наименьшую версию, доступную для текущего размера окна.
  • Модули BJ Lazy Load, Lazy Load XT подменяют базовую функцию системы и атрибуты в коде, что позволяет использовать полноценную версию картинки.
  • Решение a3 Lazy Load полностью копирует логику Вордпресс — то есть считываются минимально возможные по объему файлы.

Не смотря на меньшее число запросов и итоговый вес в последнем варианте, BJ Lazy Load все равно оказывается быстрее. Дело в том, что плагин отправляет в браузер информацию вида data:image/gif, которая вынуждают его создавать gif файлы локально, а не скачивать с сервера (через HTTP запросы).

Однако тут есть один очень важный момент — отложенная загрузка изображений в BJ Lazy Load будет хорошо работать, если сами картинки были оптимизированы ранее. То есть, допустим, пользователь добавляет на сайт 10 фоток 3000х2000 пикселей — в таком случае вы рискуете получить глюк, когда при прокрутке страницы во время загрузки графики будут выводится белые непрозрачные блоки-прелоадеры.

Глюк плагина BJ Lazy Load

Так не случится, если фон у вас белый изначально. В противном случае нужно будет добавить другой прелоадер (почти все модули позволяют это сделать). В Lazy Load XT даже предусмотрена прозрачная картинка для подобных целей.

Итого

Можно сделать следующие выводы:

  • Если вы используете оптимизированные изображения через программы или Tinypng, то самый быстрый вариант BJ Lazy Load (при сравнении трех модулей).
  • Когда фото вставляются на сайте «как есть» (с большим разрешением), оптимальнее будет решение a3 Lazy Load, которое кроме ленивой загрузки использует встроенную в WP логику работы с графикой.
  • Могу также посоветовать плагин, которым пользуюсь я — Lazy Load. Каких-либо тестов не проводил, но там крутые разработчики и максимум скачиваний.
  • Если будете пробовать другие решение, желательно проверять их эффективность.

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

комментария 4 к статье “Отложенная загрузка изображений — плагины Lazy Load для WordPress”

  • ForKids   31.07.2017

    Протестировал «BJ Lazy Load» и «a3 Lazy Load » на своих сайтах в том числе и на интернет-магазине. Действительно, самый быстрый вариант загрузки показывает — BJ Lazy Load, оставил его, буду дальше наблюдать, как он в работе.

  • Миха   20.08.2017

    Для сайта с обоями — самое тое! Пригодилась подборка. Поставил a3 Lazy Load т.к. оптимизировать картинки времени нет, пусть само как-нибудь там)

  • Димон   04.09.2017

    Все использовал BJ Lazy Load.. в принципе, работал нормально, не подводил.. тесты только подтвердили мои догадки.

  • Блог Александра Гаврина   18.10.2019

    Благодарю автора, за интересную и полезную статью! Установил плагин BJ Lazy Load посмотрим как будет работать.

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости