Средний вес веб-страницы — 3719 кБ, при этом изображения и видео составляют почти 78% от общего размера, согласно данным HTTP Archive. Браузеру посетителя сайта приходится загружать и обрабатывать большое количество байт. Все тенденции указывают на то, что в будущем веб-страницы будут становиться все больше. WordPress занимает лидирующие позиции в области обмена мультимедиа и включения медиафайлов в дизайн сайта. С помощью ВордПресс можно интегрировать изображения и видео в публикации, страницы и даже в фон темы.
С выходом WordPress 5.5 отложенная загрузка стала частью основной версии и позволяет легко реализовать эту технику.
Однако все тяжелые ресурсы делают показ веб-страницы тяжелым занятием. Ведь пользователям приходится ждать открытия больших файлов, в том числе тех, которые изначально не видны, перед просмотром проекта. Именно здесь на помощь приходит Lazy Load WordPress.
- Что такое отложенная загрузка и как она работает?
- Отложенная загрузка WordPress
- Действительно ли изображения и видео замедляют работу веб-сайтов в 2025 году?
- Повышение скорости загрузки страниц с помощью плагинов для отложенной загрузки
- a3 Lazy Load
- Lazy Load
- Native Lazy Loading
- Lazy Load for Videos
- OmniVideo
- Влияние отложенной загрузки на SEO
- Заключение
Что такое отложенная загрузка и как она работает?
Отложенная загрузка (Lazy Load) — это техника оптимизации, она открывает видимый контент, но задерживает показ и визуализацию материала, который отображается ниже сгиба. Это тот случай, когда Google приходит в восторг. Эту технику стоит рассмотреть, если ваши публикации и страницы содержат много встроенных видео и изображений высокого разрешения.
Отложенная загрузка работает следующим образом:
- Браузер формирует DOM веб-страницы без отображения картинок и видео.
- JavaScript используется для определения того, какие изображения и ролики (предварительно) загрузить, на основе содержимого, которое изначально видно при показе ресурса. Эти материалы отображаются и предзагружаются по мере необходимости.
- Загрузка и рендеринг дополнительных видео откладываются до момента, пока посетитель сайта не прокрутит страницу вниз и не появится контент.
В итоге изображения не загружаются, а ролики — до тех пор, пока они не понадобятся. Это может значительно повысить производительность сайтов, содержащих большое количество картинок высокого разрешения и встроенных видео.
Отложенная загрузка WordPress
Как и в случае с другими неполадками производительности сайта, когда речь идет об Lazy Load WordPress, существует плагин, с помощью которого вы можете решить эту проблему. В каталоге ВордПресс есть множество бесплатных вариантов. Их можно использовать для ленивой загрузки изображений и видео.
Рассмотрев множество плагинов и испытав несколько из них на практике, я определил 5 вариантов, которые дают ощутимое улучшение производительности сайта. Если готовы внедрить отложенную загрузку, то обязательно ознакомьтесь с ними.
Действительно ли изображения и видео замедляют работу веб-сайтов в 2025 году?
Прежде всего, перед загрузкой любых изображений на WordPress убедитесь, что они оптимизированы.
Нужен базовый показатель, чтобы увидеть влияние добавления контента. Нет смысла исправлять проблему, если ее нет изначально.
Для проверки я установил стандартный ВордПресс. Активной темой является TwentySixteen, никаких оптимизирующих плагинов или техник вроде кэширования не применялось.
Вот как тест скорости Pingdom оценивает сайт до добавления изображений или видео.
Как видите, страница занимает чуть меньше 155 кБ и загружается менее чем за полсекунды. Трудно найти недостатки в этих показателях. Что произойдет, если загрузим страницу с большими файлами изображений и встроенными видеороликами YouTube?
Размер увеличился до 1,7 МБ, а время ее открытия — почти втрое, чуть менее 1,3 секунды. TwentySixteen — хорошо разработанная светлая тема, поэтому даже с добавлением полудюжины изображений и видео с YouTube сайт остается легким и загружается быстро. Однако видно, что контент значительно увеличило размер страницы и замедлило скорость ее открытия.
Повышение скорости загрузки страниц с помощью плагинов для отложенной загрузки
Два плагина, которые значительно ускоряют загрузку веб-страниц, — это a3 Lazy Load и Lazy Load. Давайте рассмотрим работу каждого из них по очереди. Также было протестировано несколько дополнительных плагинов, но они не дали ощутимого улучшения производительности сайта.
Пробуя расширения для отложенной загрузки, обязательно проведите тест «До и после», чтобы убедиться, что они дают нужные результаты.
a3 Lazy Load
a3 Lazy Load — популярный вариант отложенной загрузки WP в репозитории. Этот плагин работает на 50 000+ сайтов WordPress и заслужил очень высокий рейтинг — 4,7 из 5 звезд, а также получил около 40 отзывов пользователей.
Активация плагина добавляет меню конфигураций по адресу «Настройки > a3 Lazy Load». Для тестирования я оставил параметры по умолчанию за одним исключением. Я использовал опцию «Цвет фона загрузки», чтобы палитра плагина соответствовал оттенку фона веб-страницы. После этого изменения и применения настроек по умолчанию сайт работал очень хорошо.
Время загрузки страницы — менее полусекунды. Это замечательно, учитывая количество изображений и видео на ней.
Сравнение результатов теста
Несомненно, вы заметили, что размер страницы и количество запросов значительно уменьшились. В чем же причина такой разницы? Pingdom предоставляет снимок размера контента, и быстрое сравнение дает ответ. Вот как он выглядит с активированным плагином a3 Lazy Load.
Размер изображения составляет чуть более 150 кБ. Вот как выглядит снимок содержимого с общим объемом полезной нагрузки 2,0 МБ.
Размеры скрипта, HTML, CSS и другой информации практически идентичны. Однако вес картинки составляет 1,86 МБ. Это практически размер версии полного разрешения самого первого изображения на странице, а не всего 150 кБ. Так что же происходит?
Как я уже говорил, WordPress автоматически предоставляет различные объемы изображений. Браузер выбирает и отображает наименьшую из возможных версий, основываясь на размере, в котором картинка будет показываться на экране. a3 Lazy Load оставляет стандартное поведение ВордПресс нетронутым, и в результате файл получается намного меньше.
Lazy Load
Lazy Load — бесплатный плагин, созданный командой WP Rocket. В настоящее время он активен на 10 000+ установках и имеет рейтинг 4 из 5 звезд. Если ищете простой вариант отложенной загрузки WordPress с хорошей скоростью, это отличный выбор.
Плагин работает с миниатюрами, всеми изображениями в содержимом поста или в тексте виджета, аватарами и смайлами.
Большим преимуществом является отсутствие библиотек JavaScript, таких как jQuery, и вес скрипта менее 10 КБ. Нет никаких опций для конфигурации, просто установите плагин и отложенная загрузка будет работать.
Native Lazy Loading
В течение последних нескольких лет наблюдается стремление интегрировать функцию ленивой загрузки непосредственно в веб-браузеры. На данный момент она доступна в Chrome, Brave, а также в Firefox.
Нативная отложенная загрузка очень важна для производительности сайта, поскольку она не зависит от встроенного кода JavaScript или внешних скриптов.
Чтобы интегрировать её на свой ресурс, просто добавьте атрибут «loading=lazy» к нужным изображениям и iframe.
Google разработал плагин Native Lazyload, чтобы облегчить этот процесс. После его активации ВордПресс автоматически вставит атрибут «loading» в теги img и iframe.
Lazy Load for Videos
Если вас интересует только отложенная загрузка видео, я рекомендую обратить внимание на Lazy Load for Videos. Хотя некоторые из вышеперечисленных плагинов также делают это, данный вариант является отличным решением только для видеоконтента.
OmniVideo
Рассмотренные выше плагины для отложенной загрузки видео работают только с YouTube и Vimeo. Тогда как в русскоязычном сегменте интернета вебмастеры используют и другие площадки для размещения своих роликов. Здесь на помощь приходит расширение Omnivideo.
Этот WordPress-плагин создан для формирования единого адаптивного блока с видео, размещенными на разных платформах. Он поддерживает YouTube, Vimeo, RuTube, Одноклассники, ВК Видео, Mail Видео, Kinescope, Дзен.
Сформированный блок с роликами сразу получает оптимизацию скорости работы, которая достигается несколькими путями:
- Выгрузка обложки на хостинг сайта. Благодаря этому исключается обращение к внешнему ресурсу. Также есть возможность заменить превью-изображение.
- Lazy Load. Постер в блоке загружается только при попадании в зону видимости.
- Отложенная загрузка iframe. Ресурсы не скачиваются до момента нажатия на кнопку воспроизведения видео.
В OmniVideo также есть мощная функция, которая отсутствует в других рассмотренных плагинах: замена всех встроенных роликов YouTube на оптимизированный блок с Lazy Load. Установив расширение, достаточно перейти в его настройки и активировать опцию «Автоматическая замена». После этого все уже добавленные на сайт ролики с YouTube начнут работать через оптимизированный блок “ОмниВидео”.
Расширение не является бесплатным, но оно полностью оправдывает свою цену. За 1900 рублей вебмастер получает плагин, способный заметно ускорить работу его сайта и улучшить поведенческие факторы. Активировав промокод по кнопке ниже, можно уже сейчас получить инструмент по сниженной цене.
В стоимость лицензии входят пожизненные бесплатные обновления плагина. У разработчиков большие планы по его развитию. Уже заявлено добавление поддержки shorts и возможность встроить рекламный ролик до начала видео.
Влияние отложенной загрузки на SEO
Какой бы плагин вы ни использовали для Lazy Load WordPress, важно, чтобы он не навредил SEO. Есть две вещи, которые необходимо тщательно проверить:
Убедитесь, что Гугл все еще просматривает изображения с отложенной загрузкой. Можете легко проверить это с помощью инструмента «Fetch as Google» в разделе сrawl в Google Search Console. Если видите изображения в исходном коде, то, скорее всего, все в порядке.
Убедитесь, что по-прежнему используете alt-текст для картинок. Это важно для ранжирования в поиске Гугл по изображениям.
Alt-текст полезен для Google Images — если хотите, чтобы изображения там выдавались. Даже если используете отложенную загрузку, вы знаете, какая картинка будет выгружена, поэтому разместите эту информацию как можно раньше и проверьте, в каком виде оно отображается.
Заключение
В ближайшем будущем поддержка нативной отложенной загрузки в браузерах будет обеспечена. Поэтому я рекомендую использовать плагин вроде Google’s Native Lazy Load. Это гарантирует базовый уровень данной функции для сайта.
Благодаря поддержке Chrome и Firefox, а также Safari в будущем, нативная отложенная загрузка в браузере — это все, что нужно для изображений и iframes. Тем не менее, если ищете плагин на основе JavaScript, который будет работать и в старых веб-обозревателях, a3 Lazy Load — отличный выбор.
Отложенная загрузка — это всего лишь одна из техник, которую используют для оптимизации сайта ВордПресс. Однако она оказывает значительное влияние на скорость ресурса, если применяете много изображений и видео. Тем не менее, как только вы внедрите lazy load, можете рассмотреть и реализовать несколько дополнительных техник для обеспечения максимальной продуктивности сайта.