WordPress Lazy Load для изображений и видео

• Что такое Lazy Load и как она работает?
• WordPress Lazy Load
• Ускорение загрузки страницы с помощью плагинов Lazy Load для WordPress
• Влияние Lazy Load на SEO

Что такое отложенная загрузка и как она работает?

Lazy Load — это метод оптимизации, который загружает видимый контент, но задерживает загрузку и рендеринг контента, который находится ниже области видимости. Это одна из рекомендаций по призводительности от Google и этот метод следует использовать, если на страницах сайта много встроенных видео и изображений с высоким разрешением.

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

• Браузер создает DOM страницы без загрузки изображений и предварительной загрузки видео.
• JavaScript используется для определения того, какие изображения и видео загружать предварительно, основываясь на контенте, который изначально отображается при загрузке страницы. 
• Загрузка и рендеринг дополнительных медиа элементов откладываются до тех пор, пока посетитель сайта не прокрутит страницу вниз и не появится дополнительный контент.

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

WordPress Lazy Load

Как и во многих других проблемах с производительностью сайта, когда речь идет о Lazy Load в WordPress, для ее решения можно использовать плагин. На самом деле, в каталоге плагинов WordPress есть много бесплатных плагинов, которые можно использовать для отложенной загрузки изображений и видео. Рассмотрев несколько десятков плагинов и опробовав несколько из них, мы определили три плагина, которые дают ощутимое улучшение производительности сайта. Если вы готовы реализовать отложенную загрузку на своем сайте, начните с рассмотрения этих трех вариантов.

Действительно ли загрузка изображений и видео замедляет работу сайта?

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

Чтобы видеть влияние изображений и видео, нам нужен базовая оценка производительности. Нет смысла исправлять проблему, если ее нет. Чтобы проверить это, установим стандартную установку WordPress на хостинг. Активная тема TwentySixteen, не активируем никаких плагинов или методов оптимизации, например кэширование.

Вот как тест Pingdom оценивает сайт перед добавлением каких-либо картинок или видео.

Как видим, страница очень легкая, ее размер составляет менее 155 КБ, и она загружается менее чем за полсекунды. Трудно придраться к этим оценкам. Что произойдет, если мы вставим на страницу большие файлы изображений и встроим видео YouTube?

Размер страницы увеличился до 1,7 МБ, а время загрузки страницы почти утроилось до почти 1,3 секунды. TwentySixteen — хорошо написанная легкая тема, поэтому даже после добавления нескольких изображений и видео на YouTube этот сайт все еще довольно легкий и быстро загружается. Тем не менее, мы видим, что добавление изображений и видео сделало размер страницы намного больше и значительно замедлило скорость загрузки страницы.

Повышение скорости загрузки страницы с помощью плагинов Lazy Load

Рассмотрим плагины, которые значительно ускорят загрузку этой страницы: BJ Lazy Load, Lazy Load XT, a3 Lazy Load и Lazy Load. Проверим производительность каждого из них. Мы также протестировали еще несколько плагинов, но они не дали ощутимого улучшения производительности сайта. Когда вы выбираете плагины для Lazy Load, обязательно сделайте проверку скорости до и после их установки и активации, чтобы убедиться, что они дают результаты.

• BJ Lazy Load
• Lazy Load XT
• Lazy Load а3
• Lazy Load
• Lazy Load для видео

1. BJ Lazy Load

BJ Lazy Load — очень популярный плагин. Он активирован на более чем 70 000 сайтах WordPress и имеет рейтинг 4,1 из 5 звезд благодаря более чем 60 обзорам.

Установка и настройка плагина проста и понятна. Найдите плагин через встроенный установщик плагинов WordPress, установите его и активируйте. После активации в админпанели появится новый пункт Настройки > BJ Lazy Load. Все необходимые опции 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атрибутом , который работает совместно со скриптами плагина. Однако конечный результат заключается в том, что вместо загрузки уменьшенной версии изображения
в конечном итоге загружается и отображается изображение с полным разрешением .

Это не идеальное решение, но если вы оптимизируете файлы изображений перед их загрузкой в ​​WordPress — тогда вы не столкнетесь с этой проблемой.

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

2. Lazy Load XT

Lazy Load XT хорошо показал себя в наших тестах и ​​является еще одним хорошим плагином для отложенной загрузки WordPress, который стоит рассмотреть. С более чем 4000 активных установок этот плагин не так популярен, как BJ Lazy Load. Тем не менее, у него высокий рейтинг 4,9 из 5,9. Только один из 22 опубликованных обзоров составляет менее 5 звезд.

После активации плагин настраивается путем перехода в меню  Настройки > Lazy Load XT. Этот плагин делает нечто большее, чем просто отложенная загрузка изображений и видео. Вы также можете использовать этот плагин для минимизации файлов JS и CSS, загрузки библиотек JavaScript и CSS с помощью Cloudflare CDN и перемещения скриптов в футер сайта.

У плагина существует множество дополнительных опций, которые вы можете использовать для точной настройки производительности сайта. Однако пока мы просто тестируем отложенную загрузку, оставим настройки по умолчанию, не включаем минимизацию или перемещение CSS и JavaScript, очистим кэш сервера и проверим тестовую страницу на тест скорости Pingdom.

Страница по-прежнему занимает 2 МБ, и время загрузки страницы не такое быстрое, как с BJ Lazy Load, но мы все же достигли 50-процентного сокращения времени загрузки страницы по сравнению со временем без Lazy Load.

Беглый взгляд на список загружаемых файлов в результатах теста показывает, что с активированным плагином Lazy Load XT происходит то же самое, что и с BJ Lazy Load. Вместо загрузки оптимизированной версии изображения при активированном плагине загружается и отображается версия изображения в полном разрешении.

В то время как плагин не дает такой же прирост скорости, как BJ Lazy Load, визуально лучше выглядит Lazy Load XT. В отличие от BJ Lazy Load, заполнитель, используемый Lazy Load XT, прозрачен. В результате во время загрузки изображений и видео нет пустых белых прямоугольников, и вам не нужно беспокоиться о создании и загрузке изображения-заполнителя.

3. a3 Lazy Load

a3 Lazy Load — еще один популярный плагин Lazy Load для WordPress. Этот плагин активирован на более чем 50 000 веб-сайтов WordPress и имеет высокий рейтинг 4,7 из 5.

Активация плагина добавляет меню настроек в Настройки > a3 Lazy Load . В целях тестирования оставим настройки по умолчанию за одним исключением. Настроим параметр «Цвет фона», чтобы цвет заполнителя совпадал с цветом фона страницы. После внесения этого изменения и применения настроек по умолчанию сайт работал очень хорошо.

Мы вернулись к времени загрузки страницы менее чем за полсекунды. Это замечательно, учитывая количество изображений и видео на этой странице.

Сравнение результатов теста

Можно заметить, что размер страницы и количество запросов значительно сократились. Что создает эту разницу? Pingdom предоставляет информацию о размере контента. Во-первых, вот как выглядит список содержимого страницы с активированным плагином a3 Lazy Load .

Размер изображений крошечный — чуть более 150 кб. И BJ Lazy Load, и Lazy Load XT создали размер страницы 2,0 МБ. Вот как выглядит скриншот контента с общей полезной нагрузкой 2,0 МБ.

Скрипты, HTML, CSS и размеры другого содержимого практически идентичны. Однако размер изображения составляет 1,86 МБ — это размер полной версии самого первого изображения на странице, а не 150 КБ. Так что происходит? Как упоминалось ранее, WordPress автоматически предоставляет изображения различных размеров, а браузер выбирает и отображает наименьшую возможную версию в зависимости от размера на экране.

И BJ Lazy Load, и Lazy Load XT переопределяют это поведение и в результате выдают изображение с полным разрешением. А плагин a3 Lazy Load оставляет обработку изображений WordPress без изменений, и в результате мы получаем гораздо меньший файл изображения.

Любопытно, что, несмотря на разницу в размерах страниц, сайт загружается быстрее при активированном BJ Lazy Load, чем при активированном a3 Lazy Load. Сайт был протестирован несколько раз с каждым установленным плагином. Разница заключается в количестве HTTP-запросов, необходимых для загрузки страницы. На первый взгляд кажется, что BJ Lazy Load требует больше запросов. Однако, если мы посмотрим на список файлов, то увидим, что происходит на самом деле.

Страница сайта с активированным BJ Lazy Load включает в себя около двадцати запросов, которые начинаются с data:image/gif. Это data-URI, а не HTTP-запросы. По сути, они говорят браузеру создавать GIF локально, а не запрашивать этот GIF с сервера. В результате BJ Lazy Load действительно нужно только 17 HTTP-запросов для построения страницы по сравнению с 27, необходимыми для a3 Lazy Load. Это объясняет, почему страница загружается молниеносно.

Lazy Load XT использует аналогичную тактику, но все же требует больше запросов, чем BJ Lazy Load, что объясняет, почему он не дает таких же результатов.

4. Lazy Load

И четвертый вариант — Lazy Load , бесплатный плагин, созданный командой из WP Rocket. В настоящее время он активен на более чем 10000 установок с рейтингом 4 из 5 звезд.

Этот плагин работает с миниатюрами, всеми изображениями на странице или в текстовом виджете, аватарами и смайликами. Большим преимуществом этого плагина является отсутствие библиотек JavaScript, таких как jQuery, а скрипт весит менее 10 КБ. У плагина нет никаких настроек, просто установите его и Lazy Load заработает.

5. Lazy Load для видео на WordPress

Если вам нужно реализовать отложенную загрузку видео, рекомендуем воспользоваться плагином Lazy Load for Videos . Хотя некоторые из вышеперечисленных плагинов в том числе работают и с видео, это хорошее решение только для видео контента.

Влияние Lazy Load на SEO

Какой бы плагин вы не использовали для отложенной загрузки WordPress, важно, чтобы он не вредил SEO. Есть две вещи, которые нужно проверить:

1. Убедитесь, что Google все еще может сканировать изображения, которые загружаются с помощью Lazy Load. Это можно проверить с помощью инструмента «Fetch as Google» в разделе сканирования в Google Search Console . Если вы видите свои изображения в исходном коде, то, скорее всего, у вас все в порядке.
2. Убедитесь, что изображения имеют заполненный атрибут alt, так как это важно для ранжирования в поиске картинок Google.

Выводы и рекомендации

Итак, что мы имеем? Все четыре плагина Lazy Load для WordPress решают задачу по улучшению скорости загрузки страницы путем отложенной загрузки изображений и видео. Выбор зависит от личных предпочтений и от подготовки изображений перед загрузкой на сайт WordPress

• Если вы не оптимизируете изображения перед их загрузкой на сайт WordPress — а лучше это сделать — используйте A3 Lazy Load, чтобы воспользоваться преимуществами оптимизации изображений, встроенной в WordPress.
• Если вы оптимизируете изображения для сайта и хотите максимально быструю загрузку с минимальными усилиями, можете использовать BJ Lazy Load. Lazy Load — еще один хороший вариант.
• Если вы оптимизируете изображения перед их загрузкой и хотите получить дополнительные параметры конфигурации, которые позволят вам настроить способы доставки и обработки ресурсов CSS и JavaScript,используйте Lazy Load XT .

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