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

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

Вы изучите концепцию отложенной загрузки изображений и узнаете, как реализовать ее с помощью HTML и JavaScript с помощью API Intersection Observer.

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

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

instagram viewer

Зачем использовать отложенную загрузку?

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

  • Ускоренная начальная загрузка страницы: отложенная загрузка предотвращает одновременную загрузку всех изображений, что сокращает время начальной загрузки страницы. Пользователи смогут начать взаимодействовать с вашим сайтом раньше, что приведет к улучшению пользовательского опыта.
  • Улучшенная отзывчивость страницы: Загружая изображения при прокрутке пользователем, веб-сайт остается отзывчивым и плавным, обеспечивая плавную прокрутку и навигацию без необходимости ждать загрузки всего контента.
  • Экономия полосы пропускания: отложенная загрузка экономит пропускную способность, что делает ее идеальной для мобильных пользователей и тех, у кого медленное подключение к Интернету. Это может сократить потребление данных вашего сайта, принося пользу пользователям.
  • Преимущества SEO: Поисковые системы, такие как Google рассматривайте скорость страницы как фактор ранжирования. Ленивая загрузка может положительно повлиять на SEO-эффективность вашего сайта за счет улучшения времени загрузки.

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

Реализация отложенной загрузки: HTML-разметка

Чтобы начать работу, вам необходимо изменить свой HTML-код, включив в него загрузка = «ленивый» атрибут на вашем теги.

<body>
<main>


<section>
<imgsrc="./image-one-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-two-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-three-high.jpg"alt=""loading="lazy" />
section>


main>


body>

загрузка Атрибут используется в HTML для управления поведением загрузки элементов на веб-странице. Когда вы установите загрузка = «ленивый» на тег, он сообщает браузеру отложить загрузку ресурса до тех пор, пока он не понадобится.

На данный момент страница выглядит так:

Реализация отложенной загрузки: реализация JavaScript

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

Причина использования Intersection Observer для отложенной загрузки изображений проста: когда страница загружается, она получает изображение более низкого качества.

Затем, когда это изображение становится видимым в области просмотра, JavaScript заменяет его версией более высокого качества. Чтобы реализовать это на практике, измените свой HTML.



 src="./image-one-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-one-high.jpg"
 />
</section>


 src="./image-two-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-two-high.jpg"
 />
</section>




 src="./image-three-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-three-high.jpg"
 />
</section>

Здесь основным источником изображения является версия низкого качества, а изображение высокого качества — вторичным источником. Тогда страница будет выглядеть так:

Затем выберите все изображения, которые вы хотите отложенно загрузить:

"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');

После этого создайте ПересечениеОбозреватель объект.

const observer = new IntersectionObserver();

Затем передайте записи (массив IntersectionObserverEntry объекты, представляющие наблюдаемые элементы и их пересечение с окном просмотра) и наблюдатель (объект ПересечениеОбозреватель сам экземпляр).

const observer = new IntersectionObserver((lazyImages, observer) => { });

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

const observer = new IntersectionObserver((lazyImages, observer) => {
 lazyImages.forEach((image) => {
if (image.isIntersecting) {
const lazyImage = image.target;
 lazyImage.src = lazyImage.dataset.src; // Swap the image source
 observer.unobserve(lazyImage); // Stop observing this image
 }
 });
});

Наконец, инициализируйте наблюдение для каждого элемента.

// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });

И благодаря этому вы реализовали отложенную загрузку с помощью JavaScript.

Рекомендации по ленивой загрузке

При интеграции отложенной загрузки крайне важно учитывать следующие аспекты:

  • Доступность: Чтобы обеспечить доступность, предоставьте альтернативный текст для изображений с помощью альтернативный вариант атрибут. Эта информация служит отправной точкой для программ чтения с экрана.
  • Совместимость браузера: Перед внедрением отложенной загрузки убедитесь в ее совместимости с разными браузерами. Не все браузеры поддерживают эту функцию. В некоторых случаях включение полифила может стать обязательным, особенно для старых браузеров. Такой инструмент, как Могу ли я использовать — ценный ресурс для оценки совместимости браузера.
  • Тестирование: Всестороннее тестирование реализации отложенной загрузки на различных устройствах и размерах экранов приобретает первостепенное значение.

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

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

Кроме того, вы получите лучшее SEO и сэкономите на использовании полосы пропускания. Так зачем ждать? Начните оптимизировать свой сайт сегодня с помощью этого простого, но мощного метода.