Skip to content
О сайте Блог Обучение Исследовать узоры Case studies
Содержание
  • Что такое отложенная загрузка
  • Зачем откладывать загрузку изображений и видео, а не просто загружать их?
  • Реализация отложенной загрузки
  • Заключение

Использование отложенной загрузки для ускорения отрисовки страницы

Aug 16, 2019 — Обновлено Jun 9, 2020
Available in: English, Español, Português, 中文, 日本語 и 한국어
Appears in: Ускорение загрузки
Jeremy Wagner
Jeremy Wagner
TwitterGitHubHomepage
Rachel Andrew
Rachel Andrew
TwitterGitHubGlitchHomepage
Содержание
  • Что такое отложенная загрузка
  • Зачем откладывать загрузку изображений и видео, а не просто загружать их?
  • Реализация отложенной загрузки
  • Заключение

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

Что такое отложенная загрузка #

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

Скриншот аудита «Отложите изображения &ampquot;вне кадра&ampquot;» (Defer offscreen images) в Lighthouse
Один из аудитов производительности Lighthouse заключается в том, чтобы определить изображения «вне кадра», загрузку которых можно отложить

Вы наверняка видели отложенную загрузку в действии — она выглядит примерно так:

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

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

Скриншот сайта Medium в момент просмотра, демонстрирующий работу отложенной загрузки. Слева — размытый плейсхолдер, справа — загруженный ресурс
Пример отложенной загрузки изображений в действии. При загрузке страницы размещается изображение-плейсхолдер (слева), которое при появлении в области просмотра заменяется окончательным изображением, загружаемым по необходимости

Если вы не знакомы с отложенной загрузкой, вам может быть интересно, насколько эффективен этот подход, и каковы его преимущества. Тогда читайте дальше!

Зачем откладывать загрузку изображений и видео, а не просто загружать их? #

Потому что вы, вполне вероятно, загружаете то, что пользователь никогда не увидит, и это проблема — по нескольким причинам:

  • Расход трафика. Если трафик не тарифицируется, то это, конечно, не самое худшее, что может произойти (хотя емкость канала можно было бы потратить и на загрузку других ресурсов, которые пользователь совершенно точно увидит). Но если трафик ограничен, то загрузка того, что пользователь не увидит, может оказаться пустой тратой его денег.
  • Расход процессорного времени, батареи и других системных ресурсов. После скачивания мультимедийного ресурс браузер должен его декодировать и отобразить содержимое в области просмотра.

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

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

Реализовать отложенную загрузку можно несколькими способами. При выборе решения необходимо учитывать, какие браузеры вы поддерживаете, а также загрузку чего конкретно вы пытаетесь отложить.

Современные браузеры реализуют встроенную отложенную загрузку, которую можно задействовать с помощью атрибута loading на изображениях и окнах iframe. Чтобы обеспечить совместимость со старыми браузерами и выполнять отложенную загрузку без встроенной поддержки, можно реализовать собственное решение на JavaScript. Также в этом может помочь ряд библиотек. Подробнее обо всех этих походах смотрите в статьях на сайте:

  • Отложенная загрузка изображений.
  • Отложенная загрузка видео.

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

Заключение #

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

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

ПроизводительностьИзображения
Последнее обновление: Jun 9, 2020 — Улучшить статью
Return to all articles
Поделиться
подписаться

Contribute

  • Сообщить об ошибке
  • Просмотреть исходный код

Дополнительная информация

  • developer.chrome.com
  • Новости Chrome
  • Разборы конкретных случаев
  • Подкасты
  • Шоу

Соцсети

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Все продукты
  • Условия и конфиденциальность
  • Правила сообщества

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.