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

1. Что такое ленивая загрузка?
2. Почему вы должны заботиться о ленивой загрузке изображений?
3. # 1 Ленивая загрузка с использованием API Intersection Observer
4. Прогрессивная ленивая загрузка Робина Осборна # 2
5. # 3 Lozad.js
6. # 4 Ленивая загрузка с эффектом размытого изображения
7. # 5 Yall.js
8. Заключение

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

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

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

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

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

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

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

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

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

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

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

Там нет идеального пути.

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

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

# 1 Ленивая загрузка с использованием API Intersection Observer

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

Вот как MDN представляет этот API:

API Intersection Observer предоставляет способ асинхронно наблюдать изменения в пересечении целевого элемента с элементом-предком или с областью просмотра документа верхнего уровня.

Другими словами, асинхронно прослеживается пересечение одного элемента с другим.

У Дениса Мишунова есть отличное руководство как по Intersection Observer, так и по ленивой загрузке изображений с его помощью. Вот как выглядит его решение.

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

<img src = "image.jpg" alt = "тестовое изображение">

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

В CSS вы даете каждому изображению значение минимальной высоты, скажем, 100px. Это дает каждому заполнителю изображения (элемент img без атрибута src) вертикальное измерение.

img {min-height: 100px; ... больше стилей здесь}

В документе JavaScript вы затем создаете объект конфигурации и регистрируете его в экземпляре intersectionObserver:

// создать объект конфигурации: rootMargin и threshold // являются двумя свойствами, предоставляемыми интерфейсом const config = {rootMargin: '0px 0px 50px 0px', threshold: 0}; // зарегистрируем объект конфигурации с экземпляром // intersectionObserver, позволяющим обозревателю = new intersectionObserver (function (records, self) {// перебирать каждую запись entry.forEach (entry => {//) только изображения, которые пересекаются. // isIntersect - это свойство, предоставляемое интерфейсом 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 => {наблюдатель.observe (img);});

Достоинства этого решения: его легко реализовать, он эффективен, а intersectionObserver выполняет тяжелые вычисления.

С другой стороны, хотя API-интерфейс Intersection Observer поддерживается большинством браузеров в последних версиях, он не последовательно поддерживается всеми из них , К счастью, полифилл доступен ,

Вы можете узнать больше об API Intersection Observer и подробностях этой реализации в Статья Дениса ,

Прогрессивная ленивая загрузка Робина Осборна # 2

Робин Осборн предлагает супер гениальное решение, основанное на прогрессивное улучшение , В этом случае сама ленивая загрузка, которая достигается с помощью JavaScript, считается улучшением по сравнению с обычным HTML и CSS.

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

Вы можете увидеть подробности базовой версии решения Осборна в этом Ручка и более всеобъемлющий, который учитывает случай для неработающего JavaScript , в этом другом Ручка здесь ,

Эта техника имеет ряд преимуществ:

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

Вы можете узнать все детали подхода Робина Осборна на его блог ,

# 3 Lozad.js

Быстрая и простая альтернатива для реализации отложенной загрузки изображений - позволить библиотеке JS выполнить большую часть работы за вас.

Lozad - это высокопроизводительный, легкий и настраиваемый ленивый загрузчик на чистом JavaScript без каких-либо зависимостей. Вы можете использовать его для отложенной загрузки изображений, видео, фреймов и т. Д. Он использует API Intersection Observer.

Вы можете включить Lozad в npm / Yarn и импортировать его, используя выбранный вами модуль:

npm install --save lozad yarn добавить lozad import lozad из 'lozad';

Кроме того, вы можете просто загрузить библиотеку, используя CDN, и добавить ее в конец страницы HTML в виде <
скрипт> тег:

<script src = "https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"> </ script>

Далее, для базовой реализации, добавьте класс lozad в ресурс в вашей разметке:

<img class = "lozad" src = "img.jpg">

Наконец, создайте экземпляр Lozad в вашем документе JS:

const наблюдатель = lozad (); observer.observe ();

Все подробности о том, как вы можете использовать библиотеку, вы найдете на Lozad GitHub хранилище ,

Если вы не хотите углубляться в работу API Intersection Observer или просто ищете быструю реализацию, которая применима к различным типам контента, Lozad - отличный выбор.

Только помните о поддержке браузера и, в конце концов, интегрируйте эту библиотеку с полифилом для API Intersection Observer.

# 4 Ленивая загрузка с эффектом размытого изображения

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

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

Размытое изображение заполнителя на сайте Medium.

Высокое разрешение, ленивое загруженное изображение на веб-сайте Medium.

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

Моя любимая техника Крейга Баклера. Вот все достоинства этого решения:

• Производительность: всего 463 байта CSS и 1 007 байтов минимизированного кода JavaScript
• Поддержка экранов сетчатки
• Без зависимостей: не требуется jQuery или другие библиотеки и фреймворки
• Постепенно улучшается, чтобы противодействовать старым браузерам и отказавшим JavaScript

Вы можете прочитать все об этом в Как создать свой собственный прогрессивный загрузчик изображений и скачать код на проект GitHub репо ,

# 5 Yall.js

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

При включении Yall в ваш документ вам необходимо инициализировать его следующим образом:

<script src = "yall.min.js"> </ script> <script> document.addEventListener ("DOMContentLoaded", yall); </ Скрипт>

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

<img class = "lazy" src = "placeholder.jpg" src = "image-to-lazy-load.jpg" alt = "Альтернативный текст для описания изображения.">

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

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

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

• Отличная производительность благодаря API Intersection Observer
• Фантастическая поддержка браузера (восходит к IE11)
• Никаких других зависимостей не требуется.

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

Заключение

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