Отложенная загрузка изображений и <iframe> элементы

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

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

Что касается элементов <iframe> , то взаимодействие страницы со следующей отрисовкой (INP) можно улучшить во время запуска, используя их ленивую загрузку. Это связано с тем, что <iframe> — это полностью отдельный HTML-документ со своими собственными подресурсами. Хотя элементы <iframe> могут запускаться в отдельном процессе, они нередко используют один и тот же процесс совместно с другими потоками, что может создавать условия, при которых страницы становятся менее восприимчивыми к вводу данных пользователем.

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

Ленивая загрузка изображений с атрибутом loading

Атрибут loading можно добавить к элементам <img> , чтобы сообщить браузерам, как их следует загружать:

  • "eager" сообщает браузеру, что изображение должно быть загружено немедленно, даже если оно находится за пределами исходного окна просмотра. Это также значение по умолчанию для атрибута loading .
  • "lazy" откладывает загрузку изображения до тех пор, пока оно не окажется на заданном расстоянии от видимой области просмотра. Это расстояние зависит от браузера, но часто устанавливается достаточно большим, чтобы изображение загрузилось к тому времени, как пользователь прокрутит страницу до него.

Также стоит отметить, что если вы используете элемент <picture> , атрибут loading все равно должен применяться к его дочернему элементу <img> , а не к самому элементу <picture> . Это связано с тем, что элемент <picture> является контейнером, содержащим дополнительные элементы <source> , указывающие на различные кандидаты на изображения, а кандидат, выбранный браузером, применяется непосредственно к его дочернему элементу <img> .

Не ленитесь загружать изображения, находящиеся в исходной области просмотра.

Атрибут loading="lazy" следует добавлять только к элементам <img> , которые расположены за пределами исходной области просмотра. Однако может быть сложно узнать точное положение элемента относительно области просмотра до того, как страница будет отрисована. Необходимо учитывать различные размеры области просмотра, соотношения сторон и устройства.

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

Однако есть некоторые случаи, в которых совершенно очевидно, что следует избегать применения loading="lazy" . Например, вам определенно следует исключить атрибут loading="lazy" из элементов <img> в случаях с изображениями-героями или в других случаях использования изображений, где элементы <img> , скорее всего, появятся выше сгиба или в верхней части макета на любом устройстве. Это еще более важно для изображений, которые, скорее всего, будут кандидатами LCP .

Изображения, которые загружаются лениво, должны ждать, пока браузер завершит компоновку , чтобы узнать, находится ли конечная позиция изображения в области просмотра. Это означает, что если элемент <img> в видимой области просмотра имеет атрибут loading="lazy" , он запрашивается только после того, как весь CSS загружен, проанализирован и применен к странице, а не извлекается сразу после того, как он обнаружен сканером предварительной загрузки в необработанной разметке .

Поскольку атрибут loading элемента <img> поддерживается всеми основными браузерами, нет необходимости использовать JavaScript для отложенной загрузки изображений, поскольку добавление дополнительного JavaScript на страницу для предоставления возможностей, которые браузер уже предоставляет, влияет на другие аспекты производительности страницы, такие как INP.

Демонстрация отложенной загрузки изображения

Ленивая загрузка элементов <iframe>

Ленивая загрузка элементов <iframe> до тех пор, пока они не станут видны в области просмотра, может сэкономить значительные данные и улучшить загрузку критически важных ресурсов, которые требуются для загрузки страницы верхнего уровня. Кроме того, поскольку элементы <iframe> по сути являются целыми документами HTML, загружаемыми в документ верхнего уровня, они могут включать значительное количество подресурсов, в частности JavaScript, что может существенно повлиять на INP страницы, если задачи в этих фреймах требуют значительного времени обработки.

Внедрение сторонних приложений — это распространенный вариант использования элементов <iframe> . Например, встроенные видеоплееры или публикации в социальных сетях обычно используют элементы <iframe> , и им часто требуется значительное количество подресурсов, что также может привести к конкуренции за пропускную способность для ресурсов страницы верхнего уровня. Например, отложенная загрузка встроенного видео YouTube экономит более 500 КБ во время начальной загрузки страницы, в то время как отложенная загрузка плагина кнопки «Нравится» Facebook экономит более 200 КБ, большую часть из которых составляет JavaScript.

В любом случае, если на странице есть элемент <iframe> под сгибом, вам следует серьезно задуматься об его отложенной загрузке, если нет необходимости загружать его заранее, поскольку это может значительно улучшить взаимодействие с пользователем.

Атрибут loading для элементов <iframe>

Атрибут loading элементов <iframe> также поддерживается во всех основных браузерах. Значения атрибута loading и их поведение такие же, как и у элементов <img> , которые используют атрибут loading :

  • "eager" — значение по умолчанию. Оно сообщает браузеру о необходимости немедленной загрузки HTML-элемента <iframe> и его подресурсов.
  • "lazy" откладывает загрузку HTML-кода элемента <iframe> и его подресурсов до тех пор, пока он не окажется на предопределенном расстоянии от области просмотра.

Демонстрация ленивой загрузки iframes

Фасады

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

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

Это прекрасная возможность показать статическое изображение, которое визуально похоже на встроенное видео, и сэкономить значительную часть пропускной способности в этом процессе. Как только пользователь нажимает на изображение, оно заменяется фактически встроенным <iframe> , что запускает загрузку HTML стороннего элемента <iframe> и его подресурсов.

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

Виджеты чата — еще один отличный вариант использования фасадной техники. Большинство виджетов чата загружают значительные объемы JavaScript, что может негативно повлиять на загрузку страницы и отзывчивость к пользовательскому вводу. Как и при загрузке чего-либо заранее, стоимость возникает во время загрузки, но в случае виджета чата не каждый пользователь никогда не намерен взаимодействовать с ним.

С другой стороны, с помощью фасада можно заменить стороннюю кнопку «Начать чат» на фальшивую кнопку. Как только пользователь осмысленно взаимодействует с ней — например, удерживая указатель над ней в течение разумного периода времени или нажимая кнопку — реальный, функциональный виджет чата вставляется на место, когда он нужен пользователю.

Конечно, можно создавать собственные фасады, однако существуют и варианты с открытым исходным кодом для более популярных сторонних разработчиков, например, lite-youtube-embed для видео YouTube, lite-vimeo-embed для видео Vimeo и React Live Chat Loader для виджетов чата.

Библиотеки отложенной загрузки JavaScript

Если вам необходимо отложенно загрузить элементы <video> , изображения poster элементов <video> , изображения, загруженные свойством CSS background-image , или другие неподдерживаемые элементы, вы можете сделать это с помощью решения отложенной загрузки на основе JavaScript, например lazysizes или yall.js , поскольку отложенная загрузка этих типов ресурсов не является функцией уровня браузера.

В частности, автовоспроизведение и зацикливание элементов <video> без звуковой дорожки являются гораздо более эффективной альтернативой, чем использование анимированных GIF-файлов , которые часто могут быть в несколько раз больше, чем видеоресурс эквивалентного визуального качества. Тем не менее, эти видео все еще могут быть значительными с точки зрения пропускной способности, поэтому их ленивая загрузка является дополнительной оптимизацией, которая может значительно сократить неиспользуемую пропускную способность.

Большинство этих библиотек работают с использованием Intersection Observer API — и дополнительно Mutation Observer API , если HTML страницы изменяется после первоначальной загрузки — для распознавания, когда элемент попадает в область просмотра пользователя. Если изображение видимо — или приближается к области просмотра — то библиотека JavaScript заменяет нестандартный атрибут (часто data-src или аналогичный атрибут) правильным атрибутом, например src .

Допустим, у вас есть видео, которое заменяет анимированный GIF, но вы хотите лениво загрузить его с помощью решения JavaScript. Это возможно с yall.js со следующим шаблоном разметки:

<!-- The autoplay, loop, muted, and playsinline attributes are to
     ensure the video can autoplay without user intervention. -->
<video class="lazy" autoplay loop muted playsinline width="320" height="480">
  <source data-src="video.webm" type="video/webm">
  <source data-src="video.mp4" type="video/mp4">
</video>

По умолчанию yall.js наблюдает за всеми подходящими элементами HTML с классом "lazy" . После загрузки и выполнения yall.js на странице видео не загружается, пока пользователь не прокрутит его в область просмотра. В этот момент атрибуты data-src дочерних элементов <source> элемента <video> заменяются атрибутами src , что отправляет запрос на загрузку видео и автоматическое начало его воспроизведения.

Проверьте свои знания

Какое значение атрибута loading установлено по умолчанию для элементов <img> и <iframe> ?

"lazy"
"eager"

Когда целесообразно использовать решения для отложенной загрузки на основе JavaScript?

Для ресурсов, в которых атрибут loading не поддерживается, например, в случае автовоспроизведения видео, предназначенного для замены анимированных изображений, или для отложенной загрузки изображения постера элемента <video> .
Для любого ресурса, который можно загружать отложенно.

Когда фасад является полезным приемом?

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

Далее: Предварительная загрузка и предварительная визуализация

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