Ленивая загрузка закадровых изображений с помощью lazysizes

Katie Hempenius

Чтобы следовать этой кодовой лаборатории, откройте этот глюк на второй вкладке.

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

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

Добавьте скрипт lazysizes на страницу

• Нажмите Remix to Edit , чтобы сделать проект доступным для редактирования.

lazysizes.min.js уже был загружен и добавлен в этот глюк. Чтобы включить его на страницу:

• Добавьте следующий тег <script> в index.html :

  <script src="lazysizes.min.js" async></script>
  <!-- Images End -->
</body>

Примечание. Файл lazysizes.min.js уже добавлен в этот проект, поэтому добавлять его отдельно нет необходимости. Сценарий, который вы только что добавили, может использовать этот сценарий.

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

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

• Добавьте класс lazyload к изображениям, которые должны загружаться отложенно. Кроме того, измените атрибут src на data-src .

Например, изменения для flower3.png будут выглядеть так:

<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">

В этом примере попробуйте отложенную загрузку flower3.png , flower4.jpg и flower5.jpg .

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

Посмотрите это в действии

Вот и все! Чтобы увидеть эти изменения в действии, выполните следующие действия:

• Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .

• Откройте консоль и найдите только что добавленные изображения. Их классы должны меняться с lazyload на lazyloaded при прокрутке страницы вниз.

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

Подтвердите с помощью Lighthouse

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

1. Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .
2. Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
3. Откройте вкладку «Маяк» .
4. Убедитесь, что в списке «Категории» установлен флажок «Производительность» .
5. Нажмите кнопку Создать отчет .
6. Убедитесь, что аудит отложенных закадровых изображений пройден.

Успех! Вы использовали lazysizes для ленивой загрузки изображений на своей странице.