Доля изображений и видео в типичной полезной нагрузке веб-сайта может быть значительной. К сожалению, участники проекта могут не захотеть исключать какие-либо медиа-ресурсы из своих существующих приложений. Такие тупиковые ситуации вызывают разочарование, особенно когда все вовлеченные стороны хотят улучшить производительность сайта, но не могут договориться о том, как этого добиться. К счастью, отложенная загрузка — это решение, которое снижает начальную полезную нагрузку страницы и время загрузки, но не экономит на контенте.
Что такое ленивая загрузка?
Ленивая загрузка — это метод, который откладывает загрузку некритических ресурсов во время загрузки страницы. Вместо этого эти некритические ресурсы загружаются в момент необходимости. Когда речь идет об изображениях, «некритическое» часто является синонимом «закадрового». Если вы использовали Lighthouse и изучили некоторые возможности для улучшения, возможно, вы видели некоторые рекомендации в этой области в виде аудита закадровых изображений «Отложить» :
Вы, наверное, уже видели ленивую загрузку в действии, и она выглядит примерно так:
- Вы попадаете на страницу и начинаете прокручивать ее по мере чтения контента.
- В какой-то момент вы прокручиваете изображение-заполнитель в область просмотра.
- Изображение-заполнитель внезапно заменяется окончательным изображением.
Пример отложенной загрузки изображений можно найти на популярной издательской платформе Medium , которая загружает облегченные изображения-заполнители при загрузке страницы и заменяет их лениво загружаемыми изображениями при их прокрутке в область просмотра.
Если вы не знакомы с отложенной загрузкой, вам может быть интересно, насколько полезна эта техника и каковы ее преимущества. Читай дальше что бы узнать!
Зачем лениво загружать изображения или видео, а не просто загружать их?
Потому что вполне возможно, что вы загружаете то, что пользователь никогда не увидит. Это проблематично по нескольким причинам:
- Это тратит данные. При нелимитированных соединениях это не самое худшее, что может случиться (хотя вы можете использовать эту драгоценную полосу пропускания для загрузки других ресурсов, которые действительно будут видны пользователю). Однако в тарифных планах с ограниченным объемом данных загрузка вещей, которые пользователь никогда не видит, может оказаться пустой тратой денег.
- Это тратит время обработки, батарею и другие системные ресурсы. После загрузки медиа-ресурса браузер должен его декодировать и отобразить его содержимое в области просмотра.
Отложенная загрузка изображений и видео сокращает время начальной загрузки страницы, начальный вес страницы и использование системных ресурсов, и все это положительно влияет на производительность.
Реализация ленивой загрузки
Существует несколько способов реализации отложенной загрузки. При выборе решения необходимо учитывать поддерживаемые вами браузеры, а также то, что вы пытаетесь выполнить отложенную загрузку.
Современные браузеры реализуют отложенную загрузку на уровне браузера , которую можно включить с помощью атрибута loading изображений и iframe. Чтобы обеспечить совместимость со старыми браузерами или выполнить отложенную загрузку элементов без встроенной отложенной загрузки, вы можете реализовать решение с помощью собственного JavaScript. Существует также ряд существующих библиотек, которые помогут вам в этом. Подробную информацию обо всех этих подходах смотрите в сообщениях на этом сайте:
Кроме того, мы составили список потенциальных проблем с отложенной загрузкой и вещей, на которые следует обратить внимание при реализации.
Заключение
При осторожном использовании отложенная загрузка изображений и видео может серьезно сократить начальное время загрузки и снизить полезную нагрузку страниц вашего сайта, включая Core Web Vitals . Пользователи не будут нести ненужную сетевую активность (включая сетевые конфликты при более медленных соединениях) и затраты на обработку медиа-ресурсов, которые они, возможно, никогда не увидят, но они все равно смогут просматривать эти ресурсы, если захотят.
Что касается методов повышения производительности, то отложенная загрузка не вызывает сомнений. Если на вашем сайте много встроенных изображений, это отличный способ сократить ненужные загрузки. Пользователи вашего сайта и участники проекта это оценят!