От автора: благодаря тому, что изображения являются одними из самых популярных типов контента в Интернете, время загрузки страниц может стать проблемой. Отложенная загрузка изображений призвана бороться с этим.
Даже при правильной оптимизации изображения могут иметь довольно большой размер. Это может отрицательно сказаться на времени, которое посетители должны ждать, прежде чем смогут получить доступ к контенту на вашем веб-сайте. Скорее всего, они потеряют терпение и перейдут куда-то еще, если вы не придумаете решение для загрузки изображений, которое повышает воспринимаемую скорость загрузки страницы.
В этой статье вы узнаете о пяти методах отложенной загрузки изображений, которые сможете добавить в свой инструментарий веб-оптимизации, чтобы улучшить опыт пользователей на вашем веб-сайте.
Что такое отложенная загрузка?
Отложенная загрузка изображений означают загрузку изображений асинхронно. То есть после того, как полностью или даже условно загружен контент, только тогда они отображаются в окне просмотра браузера. Это означает, что если пользователи не прокрутят страницу вниз, изображения, размещенные внизу, даже не будут загружены.
Этот подход использует ряд веб-сайтов, но особенно это заметно на сайтах с большими изображениями. Попробуйте просмотреть свою любимую онлайн-площадку для поиска фотографий в высоком разрешении, и вы скоро поймете, что сайт загружает только ограниченное количество изображений. Когда вы прокрутите страницу вниз, вы увидите изображения заполнителей, которые быстро заменяются реальными изображениями. Например, обратите внимание на загрузчик на Unsplash.com: при прокрутке этой части страницы в окне просмотра заполнители заменяются фотографиями в полном разрешении:
Почему вы должны уделять внимание отложенной загрузке изображений?
Есть, по крайней мере, несколько причин, по которым вам следует уделять внимание отложенной загрузке изображений на вашем сайте:
Если ваш сайт использует для отображения контента или предоставления какой-либо функции пользователям JavaScript, быстрая загрузка DOM становится критичной. Обычно скрипты ждут, пока DOM полностью загрузится, прежде чем они начнут работать. На сайте со значительным количеством изображений, отложенная загрузка — или загрузка изображений асинхронно — может определять разницу между пользователями, остающимися на сайте или покидающими его.
Поскольку большинство решений отложенной загрузки работают, загружая изображения только в том случае, если пользователь прокручивает страницу до места, где изображения будут видны внутри области просмотра, эти изображения никогда не будут загружены, если пользователи не дойдут до этой точки. Это означает значительную экономию пропускного канала, за которую большинство пользователей, особенно тех, кто выходит в Интернет на мобильных устройствах и медленных соединениях, будут благодарны вам.
Хорошо, отложенная загрузка изображений помогает повысить производительность сайта, но как лучше всего это сделать? Идеального способа нет.
Если вы живете и дышите JavaScript, реализация отложенной загрузки не должна быть проблемой. Ничто не даст вам больше контроля, чем написать что-то самому.
Кроме того, вы можете поискать рабочие решения в интернете и поэкспериментировать с ними. Я сделал именно это и наткнулся на эти пять интересных техник.
#1 Отложенная загрузка с использованием Intersection Observer API
Intersection Observer API — это современный интерфейс, который можно использовать для отложенной загрузки изображений и другого контента.
Вот как MDN описывает этот API: Intersection Observer API предоставляет возможность асинхронно наблюдать изменения в пересечении целевого элемента с элементом предка или с окном просмотра верхнего уровня документа.
Другими словами, то, что асинхронно просматривается — это пересечение одного элемента с другим. У Дениса Мишунова есть отличное руководство и по Intersection Observer, и по отложенной загрузке изображений с его помощью. Вот как выглядит его решение.
Предположим, вы хотели бы отложено загружать галереи изображений. Разметка для каждого изображения будет выглядеть так:
<img data-src="image.jpg" alt="test image">
Обратите внимание, что путь к изображению содержится внутри атрибута data-src, а не атрибута src. Причина в том, что использование src означает, что изображение будет загружаться сразу, это не то, что нам нужно.
В CSS вы задаете для каждого изображению значение min-height, скажем, 100px. Это задает для каждого заполнителя изображения (элемент img без атрибута src) вертикальное измерение.
img { min-height: 100px; ...more styles here }
В документе JavaScript вы затем создаете объект config и регистрируете его с помощью экземпляра intersectionObserver:
// создаем объект config: rootMargin и threshold - // это два свойства, предоставляемые интерфейсом const config = { rootMargin: '0px 0px 50px 0px', threshold: 0 }; // регистрируем объект config с экземпляром // intersectionObserver let observer = new intersectionObserver(function(entries, self) { // перебираем все элементы entries.forEach(entry => { // обрабатываем только изображения, которые пересекаются. // isIntersecting - это свойство, предоставляемое интерфейсом if(entry.isIntersecting) { // пользовательская функция, которая копирует путь к img // из data-src в src preloadImage(entry.target); // теперь изображение размещено, прекращаем наблюдение self.unobserve(entry.target); } }); }, config);
Наконец, вы перебираете все изображения и добавляете их в этот экземпляр iterationObserver:
const imgs = document.querySelectorAll('[data-src]'); imgs.forEach(img => { observer.observe(img); });
Преимущества данного решения: просто в реализации, эффективно и сложные вычисления выполняет intersectionObserver. С другой стороны, хотя Intersection Observer API поддерживается большинством браузеров в их последних версиях, он не поддерживается всеми из них. К счастью, имеется полифилл.
#2 Прогрессивно улучшаемая отложенная загрузка Робина Осборна
Робин Осборн предлагает супер гениальное решение, основанное на прогрессивном улучшении. В этом случае сама отложенная загрузка, которая достигается с помощью JavaScript, считается улучшением по сравнению с обычным HTML и CSS.
Почему прогрессивное улучшение? Ну, если вы выводите изображения с использованием решения на основе JavaScript, что произойдет, если JavaScript отключен или возникает ошибка, которая предотвращает ожидаемую работу скрипта? В этом случае без прогрессивного улучшения пользователи, вероятно, вообще не увидят изображений. Не круто.
Вы можете увидеть детали базовой версии решения Осборна в этой демо-версии, а более всеобъемлющей, в которой учитывается случай для давшего сбой JavaScript, в другой демо-версии. Этот метод имеет ряд преимуществ:
Подход прогрессивного улучшения обеспечивает пользователям доступ к контенту всегда.
Он не только охватывает ситуации, когда JavaScript недоступен, но также и те случаи, когда JavaScript нарушен: все мы знаем, как могут быть подвержены ошибкам скрипты, особенно в среде, где выполняется значительное количество скриптов.
Он отложено загружает изображения при прокрутке, поэтому не все изображения будут загружены, если пользователи не перейдут к их местоположению в браузере.
Он не имеет каких-либо внешних зависимостей, поэтому нет никаких фреймворков или плагинов.
#3 Lozad.js
Быстрая и простая альтернатива для осуществления отложенной загрузки изображений — позволить библиотеке JS выполнять большую часть работы за вас.
Lozad — высокопроизводительный, легкий и настраиваемый отложенный загрузчик на чистом JavaScript без зависимостей. Вы можете использовать его для отложенной загрузки изображений, видео, iframe и т. д., и он использует Intersection Observer API.
Вы можете включить Lozad с npm / Yarn и импортировать его с помощью поставщика модулей по выбору:
npm install --save lozad yarn add lozad
import lozad from 'lozad';
Кроме того, вы можете просто загрузить библиотеку с помощью CDN и добавить ее в нижнюю часть HTML-страницы в теге script:
<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
Затем, для базовой реализации, добавьте класс lozad в ресурс в разметке:
<img class="lozad" data-src="img.jpg">
Наконец, вы можете инициировать Lozad в своем JS-документе:
const observer = lozad(); observer.observe();
Вы найдете все сведения о том, как использовать библиотеку в репозитории Lozad на GitHub. Если вы не хотите разбираться с Intersection Observer API или просто ищете быструю реализацию, применимую к различным типам контента, Lozad — отличный выбор.
Только помните о поддержке браузерами и, в конечном итоге, интегрируйте эту библиотеку с полифиллом для Intersection Observer API.
#4 Отложенная загрузка с эффектом размытого изображения
Если вы читатель Medium , вы наверняка заметили, как их сайт загружает основное изображение внутри поста. Первое, что вы видите, это размытая копия изображения с низким разрешением, в то время как версия с высоким разрешением загружается отложено:
Размытое изображение заполнителя на веб-сайте Medium.
Изображение в высоком разрешении, загруженное отложено на веб-сайте Medium.
Вы можете отложено загружать изображения с этим интересным эффектом размытия несколькими способами. Моя любимая техника — метод Крейга Баклера. Вот все преимущества этого решения:
Производительность: только 463 байта CSS и 1007 байт минимизированного кода JavaScript
Поддержка retina экранов
Не имеет внешних зависимостей: нет jQuery или других библиотек и фреймворков
Прогрессивное улучшение позволяет охватить старые браузеры и случаи сбоя JavaScript
# 5 Yall.js
Yall — многофункциональный скрипт отложенной загрузки изображений, видео и фреймов. Более конкретно, он использует Intersection Observer API и, при необходимости, гибко опирается на традиционные методы обработчика событий. При включении Yall в документ вам необходимо инициализировать его следующим образом:
<script src="yall.min.js"></script> <script> document.addEventListener("DOMContentLoaded", yall); </script>
Далее, для отложенной загрузки простого элемента img все, что вам нужно сделать, это добавить в разметку:
<img class="lazy" src="placeholder.jpg" data-src="image-to-lazy-load.jpg" alt="Alternative text to describe image.">
Обратите внимание на следующее:
Вы добавляете к элементу класс lazy
Значение src — это изображение заполнителя
Путь к изображению, который вы хотите загружать отложено, находится внутри атрибута data-src.
Среди преимуществ Yall:
Отличная производительность с помощью Interersection Observer API
Фантастическая поддержка браузерами (даже IE11)
Никаких внешних зависимостей не требуется.
Чтобы узнать больше о том, что Yall может предложить для более сложных реализаций, посетите страницу проекта на GitHub.
Заключение
Таким образом, это пять способов отложенной загрузки изображений, с которыми вы можете начать экспериментировать в своих проектах.
Автор: Maria Antonietta Perna
Источник: https://www.sitepoint.com/
Редакция: Команда webformyself.