Отложенная загрузка изображений за пределами экрана при помощи lazysizes

Nov 5, 2018

Appears in: Ускорение загрузки

Katie Hempenius

TwitterGitHubGlitchHomepage

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

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

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

• Click Remix to Edit to make the project editable.

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

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

  <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.

Проверьте страницу в действии #

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

• To preview the site, press View App. Then press Fullscreen .

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

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

Подтвердите результат с помощью Lighthouse #

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

1. To preview the site, press View App. Then press Fullscreen . 1. Откройте DevTools, нажав Control+Shift+J (или Command+Option+J, если у вас Mac).

2. Click the Lighthouse tab.

3. Make sure the Performance checkbox is selected in the Categories list.

4. Click the Generate report button.

5. Убедитесь, что страница прошла проверку Defer offscreen images.

Готово! Вы добавили на свою страницу отложенную загрузку изображений.