Отложенная загрузка изображений для увеличения производительности веб-сайта: пять методов

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

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

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

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

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

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

Почему вы должны уделять внимание отложенной загрузке изображений?

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

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

Если вы живете и дышите 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, в другой демо-версии. Этот метод имеет ряд преимуществ:

#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.

Вы можете отложено загружать изображения с этим интересным эффектом размытия несколькими способами. Моя любимая техника — метод Крейга Баклера. Вот все преимущества этого решения:

# 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.">

Обратите внимание на следующее:

Среди преимуществ Yall:

Чтобы узнать больше о том, что Yall может предложить для более сложных реализаций, посетите страницу проекта на GitHub.

Заключение

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

Автор: Maria Antonietta Perna

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.