lazy load wordpress — как добавить ленивую загрузку на сайт

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

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

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

Почему важно использовать ленивую загрузку?

Использование ленивой загрузки может дать несколько преимуществ:

• Улучшение времени загрузки страницы: поскольку изображения загружаются только по мере необходимости, время загрузки страницы сокращается, что положительно влияет на пользовательский опыт.
• Экономия трафика: загрузка изображений только при просмотре пользователем позволяет экономить трафик, особенно на мобильных устройствах.
• Улучшение показателей SEO: быстрая загрузка страницы и оптимизация трафика могут положительно сказаться на позициях вашего сайта в результатах поисковых систем.

Как добавить ленивую загрузку в WordPress?

Существует несколько способов добавить ленивую загрузку на сайт на платформе WordPress. Вот некоторые из них:

Использование плагина

Самый простой способ добавить ленивую загрузку на WordPress – это использовать специальный плагин. В комьюнити WordPress доступно множество плагинов для ленивой загрузки. Некоторые из самых популярных плагинов в этой области:

• Lazy Load by WP Rocket: данный плагин является одним из самых популярных решений для ленивой загрузки изображений. Он легко настраивается и имеет множество опций для дополнительной настройки.
• a3 Lazy Load: этот плагин также обладает широкими возможностями настройки и поддерживает не только изображения, но и видео, iframe и другие элементы.
• Lazy Load Optimizer: этот плагин специализируется на оптимизации изображений, автоматической генерации разных размеров и применении ленивой загрузки.

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

Ручное добавление кода

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

1. Откройте файл functions.php вашей темы и добавьте следующий код:

<?php
function add_lazy_load_script {
  if ( ! is_admin ) {
    wp_enqueue_script( 'lazy-load-script', get_template_directory_uri . '/js/lazy-load.js', array( 'jquery' ), '1.0', true );
  }
}
add_action( 'wp_enqueue_scripts', 'add_lazy_load_script' );

2. Создайте папку js в папке вашей темы (если она уже не существует) и добавьте файл lazy-load.js со следующим кодом:

document.addEventListener( "DOMContentLoaded", function {
  var lazyImages = [].slice.call( document.querySelectorAll( "img.lazy" ) );

  if ( "IntersectionObserver" in window ) {
    let lazyImageObserver = new IntersectionObserver( function( entries, observer ) {
      entries.forEach( function( entry ) {
        if ( entry.isIntersecting ) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove( "lazy" );
          lazyImageObserver.unobserve( lazyImage );
        }
      } );
    } );

    lazyImages.forEach( function( lazyImage ) {
      lazyImageObserver.observe( lazyImage );
    } );
  }
} );

3. Вам также потребуется добавить класс «lazy» для изображений, которые вы хотите загрузить отложенно. Вы можете сделать это вручную или использовать дополнительный плагин или инструмент для автоматического присвоения этого класса.

После добавления кода и класса «lazy» к изображениям, они будут загружаться только при просмотре пользователем, что поможет ускорить загрузку вашего сайта.

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

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

Вы можете использовать Lazy LoadPress для ускорения работы вашего сайта WordPress.

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

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

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

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

Цель этого метода не в том, чтобы помешать браузеру загружать ресурсы или изображения. Расслабленная загрузка только задерживает появление, пока это не понадобится пользователю.

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

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

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

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

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

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

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

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

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

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

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

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

Как добавить ленивый zyLoad (lazy zyLoadWordPress) с помощью плагина

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

Ленивая загрузка

Этот ADD -ON был установлен более 90 000 раз и имеет очень высокий рейтинг — 4 звезды.

Lazy Load использует jquery.sonar для загрузки изображений только тогда, когда они появляются в окне просмотра. Вес дополнения Lazy Load — on составляет всего 20 кб.

BJ Ленивая загрузка.

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

Ленивая загрузка zy из WP Rocket

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

Более 10 000 сайтов надежно используют Lazy Load от WP Rocket.

a3 Ленивая нагрузка.

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

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

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

CrazyLazy.

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

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

Ускорение — ленивая загрузка

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

WordPress Бесконечная прокрутка — Ajax-загрузка Подробнее

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

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

WP YouTube Lite.

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

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

Альтернативным плагином для Lazy Load for Videos являетсяЛенивая загрузка для видео.

Несколько слов о ленивой загрузке в WordPress

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