Ленивая загрузка — это подход, при котором ресурсы ждут загрузки до тех пор, пока они не потребуются, а не загружаются заранее. Это может повысить производительность за счет уменьшения количества ресурсов, которые необходимо загружать и анализировать при начальной загрузке страницы.
Изображения, которые находятся за кадром во время начальной загрузки страницы, являются идеальными кандидатами для этого метода. Самое приятное то, что lazysizes делает эту стратегию очень простой в реализации.
Добавьте скрипт lazysizes на страницу
- Нажмите Remix to Edit , чтобы сделать проект доступным для редактирования.
lazysizes.min.js
уже был загружен и добавлен в этот глюк. Чтобы включить его на страницу:
- Добавьте следующий тег
<script>
вindex.html
:
<script src="lazysizes.min.js" async></script>
<!-- Images End -->
</body>
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
.
Посмотрите это в действии
Вот и все! Чтобы увидеть эти изменения в действии, выполните следующие действия:
Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .
Откройте консоль и найдите только что добавленные изображения. Их классы должны меняться с
lazyload
наlazyloaded
при прокрутке страницы вниз.
- Наблюдайте за панелью сети, чтобы увидеть, как файлы изображений загружаются индивидуально при прокрутке страницы вниз.
Подтвердите с помощью Lighthouse
Наконец, рекомендуется использовать Lighthouse для проверки этих изменений. Аудит производительности Lighthouse «Отложить закадровые изображения» покажет, забыли ли вы добавить отложенную загрузку к каким-либо закадровым изображениям.
- Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .
- Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
- Откройте вкладку «Маяк» .
- Убедитесь, что в списке «Категории» установлен флажок «Производительность» .
- Нажмите кнопку Создать отчет .
- Убедитесь, что аудит отложенных закадровых изображений пройден.
Успех! Вы использовали lazysizes для ленивой загрузки изображений на своей странице.