Блог

Lazy load: как настроить ленивую загрузку изображений или контента

КАК ПРОЙТИ ОСНОВНЫЕ ЭТАПЫ СОЗДАНИЯ САЙТА С НУЛЯ БЫСТРО И БЕЗ ПОТЕРИ ДЕНЕГ

Содержание

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

Lazy Loading – это такой тип загрузки веб-страниц, который помогает сэкономить ресурсы браузера и компьютера. Он позволяет значительно увеличить скорость загрузки веб-страниц, что способствует улучшению пользовательского опыта.

Для чего нужен Lazy Loading?

Lazy Loading (ленивая загрузка) – приоритетный рендеринг для тех элементов страницы, которые действительно нужны именно в момент загрузки. А оставшиеся подгружаются уже по мере необходимости. Это позволяет уменьшить длину критических этапов рендеринга. Соответственно, увеличивается скорость загрузки всего веб-приложения или сайта.

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

Зачем это нужно? Дело в том, что размеры ресурсов, которые отправляются браузерам, увеличились в 9 раз. Соответственно, сайты загружаются гораздо дольше.

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

Виды Lazy Loading

Есть три способа отображения данных при ленивой загрузке:

  1. Скроллинг
  2. Клик
  3. Фондовый режим

По скроллингу

Скроллинг подразумевает то, что загрузка контента происходит исключительно тогда, когда он оказывается в видимой области или пользователь выполнит скроллинг до определенной части страницы. Например, до середины определенной картинки. Этот способ применяется на страницах СМИ, где есть бесконечная лента прокрутки, в списках товаров интернет-магазинов, на страницах каталогов товаров и услуг.

По клику

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

В фоновом режиме

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

Для определения необходимости такой загрузки, следует провести A/B тестирование на нескольких страницах и лишь затем внедрять это на конкретном ресурсе.

Как ПС относятся к отложенной загрузке?

Проблема отложенной загрузки для поисковых систем в том, что нарушается индексация изображений. Конечно, теоретически установка плагина отложенной загрузки могла бы увеличить баллы поисковых систем по части скорости веб-ресурса. Но проблема специализированных плагинов в том, что она добавляют в атрибут src заглушку – файл с названием placeholder.svg.

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

А в некоторых случаях даже атрибута src не добавляется. В результате, бот вообще не видит никакой картинки.

Чтобы исправить эту проблему, необходимо устанавливать специальные плагины, которые реализуют правильный Lazy Load. Пример такого – True Image & Lazy Load.

Как работает Lazy Loading?

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

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

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

Как это работает в Chrome

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

Ленивая загрузка в Google Chrome состоит из двух компонентов:

  1. Картинок
  2. Фреймов

Пользователь может самостоятельно определить, какие части страницы будут загружаться только когда пользователь до них доскроллит. За это отвечают флаги Enable lazy image loading и Enable lazy frame loading. Чтобы активировать один из них, необходимо перейти по адресу:

  1. chrome://flags/#enable-lazy-image-loading – для картинок
  2. chrome://flags/#enable-lazy-frame-loading – для фреймов

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

Способы реализации «ленивой загрузки»

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

В самом общем виде lazy load осуществляется с использованием код-сплиттинга (разделения кода). Все основные языки, использующиеся при разработке веб-страниц (CSS, JavaScript, HTML) имеют код, который разделен на небольшие блоки. Они называются чанками. Когда приложение загружается впервые, то возможна отправка не приложения в целом, а лишь определенных частей. Например, каркаса разметки. А все остальные элементы могут прогружаться позже.

Разделение кода бывает двух типов:

  1. По точкам входа
  2. Динамическое

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

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

Cкрипт от David Walsh

Также можно воспользоваться специализированным скриптом, который осуществляет замену атрибута src на data-src в теге img.

<img data-src=”image.jpg” alt=”test image”>

Такие элементы скрываются в CSS. После загрузки изображений, они отображаются плавно.

img {

  opacity: 1;

  transition: opacity 0.3s;

}

img[data-src] {

  opacity: 0;

}

После этого JavaScript передает всем тегам img атрибут src, которые в конечном результате получают значение data-src. После того, как все изображения будут загружены, из img убирается data-src.

[].forEach.call(document.querySelectorAll(‘img[data-src]’),    function(img) {

  img.setAttribute(‘src’, img.getAttribute(‘data-src’));

  img.onload = function() {

    img.removeAttribute(‘data-src’);

  };

});

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

Скрипт с использованием событий

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

Но на практике эта категория скриптов используется не так часто, поскольку в HTML5 есть поддержка атрибута loading=lazy для изображений. С точки зрения SEO этот вариант – оптимальный. Страницы, в которых используется этот атрибут, запросто открываются во всех популярных браузерах.

Библиотека Intersection Observer API

Библиотека Intersection Observer API позволяет узнать, какая область страницы сейчас находится на экране пользователя. Исходя из полученной информации, можно подобрать правильное время для загрузки изображения. Если элементом пересекается область видимости веб-страницы или же происходит пересечение границы другого объекта, то тогда загружается конкретный блок.

Эффект размытого изображения

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

Lazy load: как настроить ленивую загрузку изображений или контента 1

Затем картинка уже детально прогружается, и получается такой результат.

Lazy load: как настроить ленивую загрузку изображений или контента 2

Вот ссылка на скрипт, который реализует эту функцию.

Lazy Load для контента

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

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js“></script>

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

После этого осуществляется переход к созданию главного блока. Например, с работами.

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

<div class=”mainWrapper”>

     <h1>Портфолио</h1>

         <div id=”smartPortfolio”>

             <div class=”ourWork”>

                 <img src=”./img/ico1.png” alt=”первый набор иконок”>

             </div>

             <div class=”ourWork”>

                 <img src=”./img/ico2.png” alt=”второй набор иконок”>

             </div>

         </div>

         <div id=”moreButton” onclick=”lazyload.load()”>

             <span>Показать еще…</span>

         </div>

         <div id=”loadingDiv”>

             <span>Загрузка данных</span>

         </div>

</div>

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

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

Первый – setTimeout. Он дает возможность однократного вызова функции, спустя определенный временной промежуток.

Синтаксис метода следующий.

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], …)

Параметры функции:

  1. func|code –  функция или инструкция, которую браузер должен выполнить. Как правило, используется функция в силу удобства.
  2. delay величина задержки. Это количество миллисекунд, которое проходит перед запуском. По умолчанию стоит значение 0.
  3. arg1, arg 2 – это передаваемые функции аргументы.

Аргументы, передаваемые функции, опциональные. Если она их не требует, то и не надо их указывать.

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

Синтаксис метода setInterval такой же, как и у setTimeout, только изменяется назначение. Функция запускается несколько раз через определенный промежуток времени. Например, можно сделать последовательную прогрузку трех разных блоков сайта с интервалом в 5 секунд.

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

Плагины для настройки Lazy Loading

Конечно, для настройки Lazy Loading вручную требуются навыки программирования. И дело не одного месяца, чтобы освоить азы. Поэтому для вебмастеров, которые не умеют писать код, были созданы специальные плагины для популярных CMS, позволяющие реализовать ленивую загрузку на сайте. Все, что остается, – это установить его и настроить под сайт. Вот некоторые плагины, которые можно установить в WordPress.

  1. Lazy Load. Преимущество плагина – отсутствие необходимости его отдельно настраивать. Он использует jQuery.sonar, чтобы загружать изображение лишь в том случае, если оно попадает в видимую зону. Он создан человеком, который работал с Google, Microsoft, TED и другими известными компаниями.
  2. BJ Lazy Load. Этот плагин дает возможность самостоятельно выбирать изображения, которые будут загружаться. Это могут быть как миниатюры, так и граватары. Также плагин умеет демонстрировать выбранное изображение или ту же картинку, но с меньшим разрешением до тех пор, пока не будет загружена большая версия.
  3. Lazy Load by WP Rocket. Этот плагин характеризуется тем, что у него нет настроек, а его размер занимает меньше 90 килобайт. Он не использует JavaScript. Работает со всеми картинками, которые есть на странице.
  4. Unveil Lazy Load. Этим плагином применяется собственная библиотека Unveil,js, которая имеет размер около 600 байт. Осуществляет загрузку страниц только в тех случаях, если они появляются в зоне видимости. Также не имеет настраиваемых параметров.
  5. True Image & Lazy Load. Плагин, описанный ранее, является самым лучшим, поскольку решает проблемы индексирования изображений поисковыми системами.

Настроить ленивую загрузку: скрипт bLazy.js на JavaScript

Преимущество скрипта в том, что работает на чистом JavaScript. Для его использования не требуются какие-то посторонние библиотеки.

А умеет он следующее:

  1. Запускает ленивую загрузку.
  2. Может работать не только с картинками, но и видео, а также фреймами.
  3. Возможна асинхронная загрузка фотографий. При этом учитывается разрешение экрана и его диагональ.
  4. Вес – меньше 1,4 КБ.
  5. Для размещения используется CDN.

Найти скрипт можно по этой ссылке.

Ленивая загрузка изображений для WordPress

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

В частности, можно использовать следующие инструменты для WordPress вместо описанных выше:

  1. Lazy Load Optimizer. Это быстрый вариант, который может добавить ленивую загрузку в изображения или фреймы. Он позволяет настроить Lazy Loading для записей, страниц, текстовых виджетов, изображений как в стандартной галерее, так и сторонних. Для его использования не требуется никаких дополнительных настроек. Достаточно активировать его в панели управления WordPress. Этот проект – с открытым исходным кодом. Это означает, что на его основе опытные разработчики могут создавать собственные плагины и инструменты.
  2. Autoptimize. Этот плагин позволяет не только выполнить ленивую загрузку изображений, но и оптимизировать их. Это позволяет сделать сайт более привлекательным для поисковых систем. Настроить плагин очень просто. Необходимо перейти на соответствующую страницу и включить ленивую загрузку изображений, которая есть в разделе «Отложенная загрузка изображений». Преимущество плагина в том, что некоторые изображения можно сделать загружающимися непосредственно при открытии страницы.
  3. Lazy Loader. Этот плагин, помимо изображений, умеет загружать через некоторое время и видео, фреймы и аудио элементы. Более того, он умеет лениво загружать скрипты и стили, что позволяет еще больше ускорить загрузку страницы. Он активно развивается. В будущем разработчики обещают много других дополнительных функций.
    Этот плагин (без надобности в каких-либо ручных настройках) умеет следующее:
    1. Загружать позднее картинки, которые вставлены в сайт с использованием тегов img или picture в постах, страницах, текстовых виджетах, и так далее.
    2. Размещать маленькие эксизы изображений, которые потом загружаются в полноценном режиме.

Рекомендации по реализации Lazy loading

Рекомендации зависят непосредственно от метода реализации медиаконтента на сайте. Если это встроенные в тег <img> изображения, то Google рекомендует использовать обработчик событий. Он полезен, если необходимо добиться высокой совместимости браузеров. Также можно использовать API-интерфейса обозревателя пересечений. В этом случае нет необходимости в том, чтобы писать свой код. Достаточно зарегистрировать наблюдателя. Правда, это работает не всегда.

Картинки на страницах также можно реализовать через CSS. Особенность этого подхода в том, что предположений в CSS больше. Браузер проверяет, как CSS применяется к документу.

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

Какие проблемы могут возникнуть при реализации?

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

Как говорилось выше, ленивая загрузка может привести к ухудшению позиций сайта у поисковых систем. Чтобы проверить, как поисковые системы индексируют страницы на конкретном ресурсе, можно просто воспользоваться поиском картинок, указав свой сайт в поисковике – «site:имя домена».

Итоги

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

Типичный пример – лента публикаций с бесконечной прокруткой. Это очень удобно, если пользователь сидит на сайте, чтобы серфить в интернете.

Автор

evkcrb@yandex.ru

Добавить комментарий