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

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

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

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

Содержание

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

Основные рекомендации

• Более быстрая загрузка страниц: отложенная загрузка изображений помогает повысить скорость работы вашего сайта, загружая только те изображения, которые видны в окне просмотра пользователя.
• Улучшение пользовательского опыта: отложенная загрузка повышает удобство просмотра, особенно для пользователей с медленным подключением или мобильных устройств, сокращая время загрузки.
• Экономия пропускной способности: изображения загружаются только при необходимости, что экономит пропускную способность и снижает потребление данных как пользователями, так и серверами.
• Простая реализация: вы можете легко реализовать отложенную загрузку с помощью атрибута «loading» в HTML или более продвинутых методов, таких как Intersection Observer API.
• Преимущества для SEO Более быстрая загрузка благодаря отложенной загрузке может способствовать повышению рейтинга в поисковых системах, помогая вашему сайту лучше отображаться в результатах поиска.

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

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

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

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

Отложенная загрузка в действии на Unsplash

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

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

• Увеличивает время загрузки DOM

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

• Ограниченная пропускная способность

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

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

Идеального способа нет.

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

Кроме того, вы можете поискать в интернете подходящие подходы.

Встроенная отложенная загрузка

Встроенная отложенная загрузка изображений и iframe — это простой способ отложенной загрузки контента, когда пользователь прокручивает веб-страницу. Вам просто нужно добавить атрибут loading=”lazy” к вашим изображениям и iframe.

<img src="myimage.jpg" loading="lazy" alt="..." />
<iframe src="content.html" loading="lazy"></iframe>

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

Атрибут «loading» позволяет отложить загрузку изображений и фреймов, находящихся за пределами экрана, до тех пор, пока пользователи не прокрутят страницу до нужного места. loading может принимать одно из трёх значений:

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

У этого метода нет аналогов: он не требует дополнительных затрат и является простым и понятным способом отложенной загрузки изображений в HTML. Однако, несмотря на то, что большинство основных браузеров хорошо поддерживают атрибут «loading», в некоторых браузерах на момент написания статьи отсутствует полная поддержка.

Отложенная загрузка с использованием Intersection Observer API

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

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

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

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

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

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

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

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

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

img {
}  min-height: 100px;
  /* more styles here */

Затем в документе JavaScript вам нужно создать объект конфигурации и зарегистрировать его с помощью экземпляра 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);
});

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

Что касается поддержки браузерами, то все основные браузеры поддерживают Intersection Observer API в своих последних версиях, кроме IE 11 и Opera Mini.

Lozad.js

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

Lozad.js — это высокопроизводительный, лёгкий и настраиваемый отложенный загрузчик, использующий чистый JavaScript без зависимостей. Это отличный инструмент для отложенной загрузки JavaScript, когда пользователь прокручивает изображения, видео и iframe.

Вы можете установить 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.

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

Отложенная загрузка с эффектом размытого изображения

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

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

Размытое изображение-заполнитель на веб-сайте Medium

Изображение с отложенной загрузкой в высоком разрешении на веб-сайте среднего размера

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

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

• Производительность: всего 463 байта CSS и 1007 байт минимизированного кода JavaScript.
• Поддержка экранов retina.
• Отсутствие зависимостей: не требуется jQuery или других библиотек и фреймворков.
• Прогрессивно улучшается для противодействия старым браузерам и сбоям JavaScript.

Cкачать код из репозитория проекта на GitHub.

Yall.js

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

При включении 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.js:

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

Заключение

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

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

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

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

В чем преимущества отложенной загрузки изображений?

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

Как отложить загрузку изображений в HTML?

Чтобы добавить отложенную загрузку изображений в HTML, можно использовать атрибут «loading». Атрибут «loading» — это стандартный атрибут HTML, который позволяет управлять загрузкой изображений. Чтобы включить отложенную загрузку изображений в HTML, добавьте атрибут «loading» со значением «lazy» к элементу img. Это позволит браузеру загружать изображение только тогда, когда оно будет находиться в области просмотра. Вот пример:

<img src="image.jpg" alt="Description" loading="lazy">

Полезна ли отложенная загрузка изображений?

Да, использование отложенной загрузки изображений в HTML считается полезной практикой в веб-разработке по нескольким причинам. Это повышает скорость загрузки страниц за счёт отсрочки загрузки несущественных изображений, что приводит к более быстрому первоначальному отображению страницы и улучшению пользовательского опыта. Такой подход экономит пропускную способность, что выгодно для пользователей с ограниченным тарифным планом или медленным подключением к интернету. Кроме того, это положительно влияет на поисковую оптимизацию (SEO), повышая скорость загрузки страниц, и соответствует принципам прогрессивного улучшения. Сокращая время ожидания и предоставляя визуальные подсказки во время загрузки, отложенная загрузка способствует более плавному и эффективному просмотру, особенно на мобильных устройствах.

Как узнать, загружено ли изображение с задержкой?

Чтобы убедиться, что вы правильно реализовали отложенную загрузку изображений в HTML, вы можете просмотреть исходный код HTML или использовать инструменты разработчика в браузере. Щелкнув правой кнопкой мыши по изображению и выбрав «Проверить» или «Проверить элемент», вы можете изучить элемент img, представляющий изображение, на панели инструментов разработчика. Обратите внимание на наличие атрибута «loading» в элементе img. Если для атрибута «loading» установлено значение «lazy», это означает, что изображение настроено на отложенную загрузку. С помощью инструментов разработчика браузера вы можете быстро определить статус отложенной загрузки изображений, изучив их атрибуты.

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

Чтобы реализовать отложенную загрузку изображений с помощью JavaScript, вы можете использовать такие библиотеки, как Lozad.js или Yall.js, или написать собственное решение с помощью API Intersection Observer. Эти библиотеки позволяют отложенно загружать контент при прокрутке, отслеживая, когда элементы попадают в область просмотра, и загружая их только в этот момент.

Влияет ли отложенная загрузка изображений на SEO?

Да, отложенная загрузка изображений может положительно сказаться на SEO. Увеличивая скорость загрузки страниц и уменьшая объём данных, которые необходимо загружать изначально, отложенная загрузка может помочь вашему сайту занять более высокие позиции в результатах поиска. Более высокая скорость загрузки страниц является известным фактором ранжирования для поисковых систем, таких как Google, и отложенная загрузка может способствовать этому, гарантируя, что изображения на вашем сайте не замедляют общую производительность.

В чем разница между встроенной отложенной загрузкой и отложенной загрузкой на основе JavaScript?

Встроенная отложенная загрузка основана на встроенной в браузер поддержке атрибута «loading» в тегах <img> и <iframe>. Этот метод прост и не требует дополнительного JavaScript. С другой стороны, отложенная загрузка на основе JavaScript, часто реализуемая с помощью таких библиотек, как Lozad.js или Intersection Observer API, обеспечивает большую гибкость и возможность настройки.

Есть ли какие-либо недостатки у отложенной загрузки изображений?

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

Могу ли я отложить загрузку изображений в WordPress?

Да, вы можете легко включать загрузку изображений в WordPress. Многие темы теперь по умолчанию поддерживают встроенную функцию отложенной загрузки, но вы также можете использовать такие плагины, как «Отложенная загрузка от WP Rocket» или «Smush», чтобы реализовать отложенную загрузку без программирования.