Оптимизация: Отложенная загрузка изображений

Оптимизация: Отложенная загрузка изображений

Front-end 19.10.2019

Отложенная загрузка изображений в Google Chrome

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

Chrome, начиная с версии 76, поддерживает native отложенную загрузку изображений. Это значит, что при помощи атрибутов html Вы можете указать какие именно ресурсы должны загружаться сразу, а какие лишь тогда, когда попадут в область видимости. Таким образом скорость загрузки страницы Вашего сайта больше не будет зависеть от количества картинок или iframes которые есть на странице.

Давайте разберемся как это работает и как его использовать.

Что бы включить возможность отложенной загрузки – нужно всего прописать атрибут loading="lazy" к изображениям или iframes:

<img src="..." width="200" height="200" loading="lazy"/>
<iframe src="..." width="100%" height="auto" loading="lazy">

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

lazy loading img demo

Загрузка поддерживает три значения:

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

Для того, что бы Goggle Chrom имел возможность лениво загружать изображения – нужно, что бы приведенные ниже флаги были включены или находились в статусе Default:

  • chrome://flags/#enable-lazy-image-loading
  • chrome://flags/#enable-lazy-frame-loading

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

Кроссбраузерная реализация lazy loading c помощью Lozad.js

Библиотека Lozad.js использует API-интерфейс Intersection Observer для реализации метода отложенной загрузки

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

Плюсы использования библиотеки Lozad.js

  • Вес всего 535 байт – минимизированный и сжатый
  • Нет зависимостей
  • Позволяет ленивую загрузку динамически добавляемых элементов

Подключение и использование

Устанавливаем при помощи npm

# You can install lozad with npm
$ npm install --save lozad

# Alternatively you can use Yarn
$ yarn add lozad

# Another option is to use Bower
$ bower install lozad

или подключить CDN script

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

В HTML добавьте класс к любому изображению, которое вы хотите лениво загрузить. Класс можно изменить с помощью конфигурации, но по умолчанию используется «lozad», а вместо атрибута src пропишите атрибут data-src

<img class="lozad" data-src="image.png">

Инициализируйте библиотеку Lozad в js:

const observer = lozad(); // lazy loads elements with default selector as ".lozad"
observer.observe();

Демонстрация использования библиотеки доступна по ссылке: Demo, а сама библиотека по ссылке Lozad.js.

Поддержка Браузеров

На данный момент поддержка браузеров ограниченна, так как функция является достаточно новой. Используйте IntersectionObserver polyfill.

А какие варианты оптимизации сайта используете Вы? Оставляйте ответы в комментариях 🙂

Поделиться

Отправить ответ

avatar
  Subscribe  
Notify of