От автора: даже при правильной оптимизации изображения могут весить довольно много. Это может оказать негативное влияние на время, которое посетители должны ждать, прежде чем смогут получить доступ к контенту на вашем сайте. Скорее всего, они потеряют терпение и перейдут куда-то еще, если только вы не придумаете решение для загрузки изображений, чтобы это не влияло на воспринимаемую скорость.
В этой статье вы узнаете о пяти подходах к отложенной загрузке изображений, которые вы можете добавить в свой инструментарий веб-оптимизации, чтобы улучшить взаимодействие с пользователем.
Что такое отложенная загрузка?
Отложенная загрузка изображений означает асинхронную загрузку изображений, то есть после полной загрузки размещенного выше содержимого или даже условно, только когда изображения появляются в окне просмотра браузера. Это означает, что если пользователи не прокрутят страницу вниз, изображения, размещенные внизу, даже не будут загружены.
Ряд веб-сайтов используют этот подход, но это особенно заметно на сайтах с большим количеством изображений. Попробуйте поискать фотографии в высоком разрешении в своем любимом онлайн-поисковике, и вы скоро поймете, что веб-сайт загружает только ограниченное количество изображений. Прокручивая страницу вниз, вы увидите, что изображения-заполнители быстро заменяются реальными изображениями для предварительного просмотра. Например, обратите внимание на загрузчик на Unsplash.com: прокрутка страницы приводит к замене заполнителя на фотографию в полном разрешении:
Почему вы должны уделять внимание отложенной загрузке изображений?
Есть по крайней мере несколько веских причин, по которым вам стоит задуматься об отложенной загрузке изображений для вашего сайта:
Если ваш веб-сайт использует JavaScript для отображения содержимого или предоставления пользователям какого-либо функционала, загрузка DOM становится критической. Скрипты обычно ждут, пока DOM полностью загрузится, прежде чем они начнут работать. На сайте со значительным количеством изображений, отложенная загрузка — или загрузка изображений асинхронно — может определять, останутся ли пользователи или покинут ваш сайт.
Поскольку большинство решений для отложенной загрузки работают, загружая изображения только в том случае, если пользователь прокрутил страницу до места, где изображения будут видны в пределах области просмотра, эти изображения никогда не будут загружены, если пользователи не достигнут данной точки. Это означает значительную экономию пропускной способности канала, за что большинство пользователей, особенно тех, кто получает доступ к Интернету на мобильных устройствах и медленных соединениях, поблагодарят вас.
Ну, отложенная загрузка изображений помогает с производительностью сайта, но как лучше всего это сделать? Идеального способа не существует.
Если вы живете и дышите JavaScript, реализация собственного решения для отложенной загрузки не должна быть проблемой. Ничто не дает вам больше контроля, чем кодирование чего-либо самостоятельно.
Кроме того, вы можете поискать подходящие подходы и начать экспериментировать с ними. Я так и сделал и наткнулся на эти пять интересных техник.
#1 Нативная отложенная загрузка
Нативная ленивая загрузка изображений и фреймов очень крута. Ничто не может быть более простым, чем эта разметка:
<img src="myimage.jpg" loading="lazy" alt="..." /> <iframe src="content.html" loading="lazy"></iframe>
Как видите, здесь нет ни JavaScript, ни динамической замены значения атрибута src, просто старый добрый HTML. Атрибут Loading дает нам возможность откладывать изображения и плавающие фреймы вне экрана, пока пользователи не прокручивают страницу вниз до места их расположения на странице. Loading может принимать любое из этих трех значений:
lazy: отлично подходит для отложенной загрузки
eager: указывает браузеру загрузить заданный контент сразу
auto: оставляет решение на усмотрение браузера.
У этого метода нет конкурентов: он не связан с дополнительными затратами, он чистый и простой. Однако, хотя на момент написания статьи большинство основных браузеров хорошо поддерживали атрибут loading, тем не менее поддержка пока не охватывает все браузеры.
#2 Отложенная загрузка с использованием API Intersection Observer
Intersection Observer API — это современный интерфейс, который можно использовать для отложенной загрузки изображений и другого контента.
Вот как MDN представляет этот API: API Intersection Observer предоставляет способ асинхронно наблюдать изменения в пересечении целевого элемента с элементом-предком или с областью просмотра документа верхнего уровня.
Другими словами, асинхронно отслеживается пересечение одного элемента с другим. У Дениса Мишунова есть отличное руководство как по 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:
// create config object: rootMargin and threshold
// are two properties exposed by the interface
const config = { rootMargin: '0px 0px 50px 0px', threshold: 0
}; // register the config object with an instance
// of intersectionObserver
let observer = new intersectionObserver(function(entries, self) { // iterate over each entry entries.forEach(entry => { // process just the images that are intersecting. // isIntersecting is a property exposed by the interface if(entry.isIntersecting) { // custom function that copies the path to the img // from data-src to src preloadImage(entry.target); // the image is now in place, stop watching self.unobserve(entry.target); } });
}, config);Наконец, мы перебираете все изображения и добавляете их в экземпляр iterationObserver:
const imgs = document.querySelectorAll('[data-src]');
imgs.forEach(img => { observer.observe(img);
});Преимущества этого решения: его легко реализовать, оно эффективно — intersectionObserver требует значительных затрат с точки зрения расчетов.
С другой стороны, хотя Intersection Observer API поддерживается большинством браузеров в их последних версиях, не все реализовали его последовательно. К счастью, доступен полифилл.
#3 Lozad.js
Быстрая и простая альтернатива реализации отложенной загрузки изображений — позволить библиотеке JS выполнить большую часть работы.
Lozad — это высокопроизводительный, легкий и настраиваемый отложенный загрузчик на чистом JavaScript без каких-либо зависимостей. Вы можете использовать его для отложенной загрузки изображений, видео, фреймов и т. д. И он использует 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 — отличный выбор.
Только помните о поддержке браузерами и интегрируйте эту библиотеку с полифиллом для API Intersection Observer.
#4 Отложенная загрузка с эффектом размытого изображения
Если вы читаете Medium, вы наверняка заметили, как на их сайте загружается основное изображение внутри поста. Первое, что вы видите, это размытая копия изображения с низким разрешением, в то время как его версия с высоким разрешением загружается с отложенной загрузкой:
Размытое изображение заполнителя на сайте Medium
Изображение в высоком разрешении, отложено загруженное на сайте Medium
Вы можете отложено загружать изображения с этим интересным эффектом размытия несколькими способами. Моя любимая техника Крейга Баклера. Вот все преимущества этого решения:
Производительность: всего 463 байта CSS и 1 007 байтов минимизированного кода JavaScript
Поддержка экранов высокого разрешения
Нет зависимостей: не требуется 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:
отличная производительность с помощью Intersection Observer API
фантастическая поддержка браузерами (вплоть до IE11)
нет необходимости в других зависимостях
Чтобы узнать больше о том, что может предложить Yall, и о более сложных реализациях, вы можете обратиться к странице проекта на GitHub.
Заключение
Вот и все – это были пять способов отложенной загрузки изображений, с которыми вы можете начать экспериментировать и тестировать в своих проектах.
Автор: Maria Antonietta Perna
Источник: https://www.sitepoint.com
Редакция: Команда webformyself.