Отложенная загрузка изображений — плагины Lazy Load для WordPress
Скорость загрузки является важным требованием к сайту как со стороны поисковиков, так и с точки зрения пользователей. Люди хотят быстро получать информацию, а не ждать несколько секунд пока отобразится страница. Именно поэтому разработчики пытаются всячески улучшить данный процесс: внедряют подборки рекомендаций как на mkels.com, экспериментируют с сервисами и CMS модулями.
Если говорить про картинки, то тут 2 варианта: оптимизация с помощью веб-решений или графических редакторов, а также ленивая загрузка изображений (англ. — Lazy Load). В WordPress для второго метода имеется целый ряд плагинов, которые сегодня рассмотрим.
Основной принцип отложенной загрузки картинок заключается в том, дабы показывать их только тогда, когда пользователь прокручивает до места, где они фактически находятся. По умолчанию браузеры скачивают и обрабатывают всю графику сразу, что в свою очередь создает ненужную задержку.
Как работает Lazy Load:
- браузер подгружает содержимое сайта без медиафайлов;
- с помощью некого JavaScript определяются какие картинки/видео должны выводиться изначально при запуске страницы;
- «дополнительная» материалы отображается при прокрутке, когда пользователь доходит до нужного контента.
Все очень даже логично — зачем изначально скачивать информацию с сервера, которую человек физически не видит и, возможно, даже к ней не дойдет. Отложенная загрузка изображений может значительно улучшить ситуацию со скоростью работы сайтов, в которых используется много высококачественных иллюстраций или видеороликов.
По теме в сети была найдена интересная статья, где автор оценивал эффективность скриптов Lazy Load в WordPress. Для теста был взят максимально простой шаблон TwentySixteen. Некоторыми цифрами из заметки есть смысл поделиться. Во-первых, посмотрим как именно медиафайлы влияют на результат.
Сверху показаны данные обычной страницы без оптимизации, кэширования и тому подобных вещей. Снизу — она же, но с добавлением картинок / видео. Общий вес изменился с 115Кб до 1,7Мб — при этом скорость «уменьшилась» с 416мс до 1,28 секунды. Короче говоря, проблема имеет место быть.
Плагины ленивой загрузки в WordPress
Чтобы найти подходящие для задачи модули вводите фразу «lazy load» в Вордпресс репозитории. Жалко там нет сортировки, приходится вручную искать наиболее популярные плагины, хотя по данной нише их и не так много. Подобрал 8 решений, на которые следует обратить взор в первую очередь. Внимание(!) оценку эффективности отложенной загрузки картинок и некоторые технические детали рассмотрю ниже.
Lazy Load
Первый модуль основан на скрипте jQuery.sonar (автор Dave Artz, AOL), позволяющем определить какая картинка находится в видимости пользователя. Я использую именно его т.к. в описании сказано, что созданием занималась команда из Automattic (wordpress.com) и другие опытные программисты. К тому же здесь больше всего установок (90 тыс.), хотя он и обновлялся давненько + оценка лишь 4. По личному опыту все работает отлично.
BJ Lazy Load
Кроме картинок в постах плагин добавляет ленивую загрузку изображений из миниатюр, аватаров пользователей + iframes (включая популярные видеохостинги YouTube / Vimeo). Поддерживается контент в виджетах — особенно актуально после добавления в WP виджетов вставки видео/графики. Пользователи без Javascript будут видеть обычную неоптимизированную страницу. Нормально работает с CDN. Загрузок — 50 тыс, оценка 4, обновление было не так давно.
a3 Lazy Load
Одно из самых «новых» решений — апдейт 2 месяца назад + поддержка самой последней версии WordPress. Скачивания — более 10тысяч, оценка 4,5. Отличительной его особенностью есть целый блок настроек в админке, где вы можете вручную выбрать какие типы объектов будут обработаны: миниатюры, виджеты, граватары и т.п.
Аналогичные настройки есть для видео и iframe контента (встроенного кода). Также модуль совместим с CDN, AMP, WooCommerce, WPTouch, WP Super Cache и W3 Total Cache. По ощущениям это самый продвинутый вариант из всех — тут реализована не просто отложенная загрузка картинок, а предоставляется целый комплекс функций по оптимизации.
Rocket Lazy Load
Собственно модуль делает то же, что и остальные — улучшает время загрузки и сокращает число HTTP запросов. В описании сказано, что он не использует тяжелые библиотеки по типу jQuery, а скрипт весит 6Кб. Для старта не нужны дополнительные настройки — просто устанавливаете и активируете.
Rocket Lazy Load работает в том числе с аватарами и превью, хотя в отзывах были замечания, что могут возникать ошибки с дизайном — проверяйте работоспособность сайта после внедрения. А еще лучше использовать пример кода с репозитория, позволяющий отключить вызов решения на некоторых ненужных страницах (оставить только single).
Crazy Lazy
Данный плагин ленивой загрузки контента и изображений обрабатывает все картинки, которые добавлены в медиабиблиотеку, в том числе и миниатюры постов. Работает сразу из коробки, без дополнительных действий, хотя у разработчиков есть настройки: установка картинки-загрузчика и возможность исключить обход некоторых материалов.
Скачиваний — 5000, оценка — 4,5. В описании нет информации, что аватары и виджеты также «подхватываются» автоматические, уточните при тестировании. С другой стороны, если у вас, например, для комментариев используется сторонний скрипт, то это нормально.
Lazy Load XT
Авторы охарактеризовали свое творение как самый быстрый, легкий и производительный метод отложенной загрузки в Вордпресс. Лучше бы они, конечно, детальнее рассказали о списке настроек, которые получит пользователь после установки. Здесь есть: выбор типов графики для обработки, использование минифицированных версий скриптов, а также перемещение их в футер, добавление эффектов прелоадеру и некоторые другие аддоны. Таким образом, модуль позволяет дополнительно реализовать некоторые SEO рекомендации для WordPress, что весьма удобно.
Плюсом Lazy Load XT можно назвать использование прозрачной картинки-загрузчика, поэтому на странице пользователи не увидят «белых блоков» вместо подгружаемых изображений. Также здесь есть поддержка фоновой графики при желании (но это уже выходит за рамки контента, и нужно быть внимательным).
Loading Page with Loading Screen
Напоследок парочка нестандартных решений. Данный плагин кроме функции Lazy Load в Вордпресс добавляет парочку интересный штук. Во время генерации контента появляется полупрозрачный экран загрузки, где будет отображен процент завершения процесса. Все это идет с анимацией и разными настройками: цвет/изображение для фона, срабатывание один раз на страницу/сессию, исключения и т.п. В целом, воспринимается больше как WOW эффект, но после нескольких раз может начать раздражать.
Lazy Load for Videos
Модуль заменяет встроенные видео с Vimeo и Youtube на кликабельные изображения. Загрузка ролика начнется только после клина пользователя на превью. Используется jQuery поэтому никаких дополнительных скриптов не нужно. В принципе, у него есть достаточно много функций, он активно развивается + показатели скачивания (6тыс.) и оценка (4,5) весьма неплохие. В предыдущих модулях вы могли видеть также поддержку видеоконтента и iframes, но здесь гораздо больше разных опций. Думаю, Lazy Load for Videos идеально подойдет для видео-сервисов с подборками клипов, трейлеров, смешных роликов и т.п.
Эффективность отложенной загрузки
Как я уже сказал, работаю с модулем 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 пикселей — в таком случае вы рискуете получить глюк, когда при прокрутке страницы во время загрузки графики будут выводится белые непрозрачные блоки-прелоадеры.
Так не случится, если фон у вас белый изначально. В противном случае нужно будет добавить другой прелоадер (почти все модули позволяют это сделать). В Lazy Load XT даже предусмотрена прозрачная картинка для подобных целей.
Итого
Можно сделать следующие выводы:
- Если вы используете оптимизированные изображения через программы или Tinypng, то самый быстрый вариант BJ Lazy Load (при сравнении трех модулей).
- Когда фото вставляются на сайте «как есть» (с большим разрешением), оптимальнее будет решение a3 Lazy Load, которое кроме ленивой загрузки использует встроенную в WP логику работы с графикой.
- Могу также посоветовать плагин, которым пользуюсь я — Lazy Load. Каких-либо тестов не проводил, но там крутые разработчики и максимум скачиваний.
- Если будете пробовать другие решение, желательно проверять их эффективность.
У кого есть что еще добавить по теме отложенной загрузки картинок и контента, пишите в комментариях.
комментария 4 к статье “Отложенная загрузка изображений — плагины Lazy Load для WordPress”
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Як сховати відсутні товари в Woocommerce шорткодах та схожих товарах
- Сервіс AdMaven + плагін для монетизації трафіка на WordPress сайтах
- Плагіни для створення стрічки новин з біжучим рядком в WordPress
- Як змінити розміщення кнопки оформлення замовлення в WooCommerce
- Плагін WHWS Display In Stock Products First – відображення товарів в наявності першими
- Підписка MonsterONE: чи варто використовувати цей сервіс у 2023 році? (+5 продуктів, які треба скачати в першу чергу)
- Онлайн генератор ссылок на мессенджеры для WordPress и не только
- WooCommerce (46)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (246)
- Сервисы (87)
- Хаки и секреты (87)
- Шаблоны (45)
- Записи и посты wordpress, оформление записи (5,91 из 7, голосов - 47)
- Проблема с адаптивными изображениями в Gutenberg редакторе WordPress (3,93 из 7, голосов - 44)
- Умный копирайт в footer.php для wordpress (5,63 из 7, голосов - 30)
- Обновление плагинов и тем в WordPress: автоматическое, через FTP, скрытие уведомлений (5,19 из 7, голосов - 31)
- Polylang — плагин для мультиязычных сайтов на нескольких языках в WordPress (4,42 из 7, голосов - 31)
- Плагин TinyMCE Advanced – wordpress текстовый редактор (6,35 из 7, голосов - 20)
- Рубрики и категории wordpress, функция wp_list_categories (6,05 из 7, голосов - 20)
- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Советы по выбору холодильника LG с технологией No Frost
- Зачем нужны Wi-Fi ретрансляторы и как выбрать подходящую модель
- Введение в онлайн-казино Slotor777: многообразие игр и привлекательные бонусы
- Необходимость использования облачного хранилища в наше время, что важно и как выгодно?
- Спрощення процесу звітності за допомогою програми BAS Бухгалтерія
- Технологія підключення інтернету GPON та її переваги
- За що гравці найбільше цінують Lineage 2
- Для каких проектов нужна аренда виртуального сервера и что такое VPS
Протестировал «BJ Lazy Load» и «a3 Lazy Load » на своих сайтах в том числе и на интернет-магазине. Действительно, самый быстрый вариант загрузки показывает — BJ Lazy Load, оставил его, буду дальше наблюдать, как он в работе.
Для сайта с обоями — самое тое! Пригодилась подборка. Поставил a3 Lazy Load т.к. оптимизировать картинки времени нет, пусть само как-нибудь там)
Все использовал BJ Lazy Load.. в принципе, работал нормально, не подводил.. тесты только подтвердили мои догадки.
Благодарю автора, за интересную и полезную статью! Установил плагин BJ Lazy Load посмотрим как будет работать.