Главная » Вебмастеру » Ленивая загрузка для Wordpress: как добавить ее на сайт

Ленивая загрузка для WordPress: как добавить ее на сайт

Увеличить скорость работы WordPress-сайта можно с помощью ленивой загрузки.

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

Ленивая загрузка задерживает загрузку некоторых частей страницы до тех пор, пока они не понадобятся пользователю. Данная статья рассказывает о преимуществах и недостатках этого метода. А также том, как реализовать его в WordPress.

Что такое ленивая загрузка и чем она полезна

Ленивая загрузка – это способ не дать браузеру загружать все части страницы одновременно. Веб-страница становится легче и требуется меньше данных для передачи с сервера в браузер.

Суть этого способа заключается не в том, чтобы запрещать браузеру загружать ресурсы и изображения. Ленивая загрузка просто задерживает их отображение до того момента, когда они понадобятся пользователю.

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

Использование ленивой загрузки

Ленивая загрузка чаще всего применяется к изображениям. Возможно, вы замечали ее на популярных сайтах типа Buzzfeed. Они используют ленивую загрузку, чтобы контент быстрее отображался в браузере.

Ленивая загрузка для WordPress: как добавить ее на сайт

Также отложенная загрузка применяется к видео, скриптам и комментариям. По сути, перемещение файлов JavaScript в футер страницы – это способ ускорения загрузки страницы.

Наверно, вы замечали, что YouTube загружает комментарии только после прокручивания страницы вниз. Таким образом обеспечивается быстрая загрузка видео.

Бесконечная прокрутка – это альтернатива классической пагинации страниц. При ее использовании дополнительные записи загружаются во время скроллинга страницы вниз. Это можно заметить на Pinterest и Pocket.

Ленивая загрузка для WordPress: как добавить ее на сайт

Это удобно для пользователей, ведь не нужно все время нажимать на номер следующей страницы.

Преимущества ленивой загрузки

Главное преимущество отложенной загрузки очевидно – быстрое отображение содержимого сайта. А также экономия трафика для пользователей. Ведь они не только быстрее загрузят сайт, но и не будут тратить трафик на изображения, которые могут и не увидеть.

Недостатки использования ленивой загрузки

Отложенная загрузка – не самый идеальный метод ускорения работы сайта. Рассмотрим его основные недостатки.

Из-за задержки загрузки часть контента сайта может быть не проиндексирована поисковым роботом. Из-за этого многие разработчики не используют отложенную загрузку для текстового содержимого.

Как добавить ленивую загрузку в WordPress с помощью плагина

Для большинства пользователей лучшим вариантом станет использование плагинов ленивой загрузки для WordPress.

Lazy Load

Данный плагин установили более 90 000 раз и его рейтинг достаточно высок – 4 звезды.

Lazy Load использует jQuery.sonar для загрузки изображений только тогда, когда они появляются в области просмотра. Разархивированный плагин весит всего 20 КБ.

BJ Lazy Load

Ленивая загрузка для WordPress: как добавить ее на сайт

Плагин  BJ Lazy Load установили более 60 000 раз и его рейтинг так же высок. Он заменяет все изображения и фреймы (включая видео с YouTube и Vimeo) в контенте заполнителем до просмотра пользователем.

Lazy Load by WP Rocket

Ленивая загрузка для WordPress: как добавить ее на сайт

Lazy Load by WP Rocket выполняет ленивую загрузку изображений и фреймов. Включая миниатюры, содержимое виджетов, аватары и смайлики. Данный плагин не использует библиотеки JavaScript. Поэтому он весит менее 10 КБ.

Более 10 000 сайтов используют Lazy Load от WP Rocket, что вызывает доверие.

a3 Lazy Load

Ленивая загрузка для WordPress: как добавить ее на сайт

Это один из немногих плагинов в этом списке, который имеет дополнительные параметры конфигурации. Он подходит для ленивой загрузки изображений, видео и фреймов в записях, страницах, виджетах, миниатюрах и аватарах. a3 Lazy Load совместим с WooCommerce.

Плагин позволяет выбрать эффекты для изображений, которые появляются на сайте. Также можно указать, куда загружать его скрипт: в шапку или футер страницы (плагин ленивой загрузки, который сам себя загружает).

Данный плагин совместим с рядом мобильных и кэширующих плагинов, а также с сетями доставки контента.

Crazy Lazy

Ленивая загрузка для WordPress: как добавить ее на сайт

Этот плагин ленивой загрузки изображений использует мало ресурсов. Crazy Lazy задерживает загрузку изображений до того, как их увидит пользователь.

Также можно установить собственные заполнители с помощью CSS и заменить ими изображения.

Speed Up – Lazy Load

Ленивая загрузка для WordPress: как добавить ее на сайт

Еще один плагин отложенной загрузки изображений и фреймов. Он весит всего 5 КБ. Реализован шорткод для деактивации ленивой загрузки. В том числе и для отдельных изображений.

WordPress Infinite Scroll – Ajax Load More

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

WordPress Infinite Scroll также работает с WooCommerce и Easy Digital Downloads.

WP YouTube Lyte

Плагин позволяет размещать специальные ссылки на ролики, которые загружает проигрыватель YouTube только после нажатия.

Также можно использовать шорткоды для вывода видеоконтента или установить плагин для автоматического парсинга ссылок YouTube.

Альтернативный плагин ленивой загрузки видео – Lazy Load for Videos.

В двух словах о ленивой загрузке для WordPress

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

Данная публикация представляет собой перевод статьи «Lazy Loading for WordPress: How to Add It to Your Website» , подготовленной дружной командой проекта Интернет-технологии.ру

Источник

Интересные публикации по этой теме: