Отложенная загрузка изображений и <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 на страницу для предоставления возможностей, которые уже предоставляет браузер, влияет на другие аспекты производительности страницы, такие как как ИЯФ.

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

Отложенная загрузка элементов <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> и его подресурсов до тех пор, пока он не окажется на заранее определенном расстоянии от области просмотра.

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

Фасады

Вместо того, чтобы загружать встраивание сразу во время загрузки страницы, вы можете загружать его по требованию в ответ на взаимодействие с пользователем. Это можно сделать, показывая изображение или другой подходящий элемент 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-файлов , которые часто могут быть в несколько раз больше, чем видеоресурс эквивалентного визуального качества. Несмотря на это, эти видео по-прежнему могут занимать значительную часть пропускной способности, поэтому их ленивая загрузка — это дополнительная оптимизация, которая может существенно сократить потери пропускной способности.

Большинство этих библиотек работают с использованием API Intersection Observer API , а также API Mutation Observer, если 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 в дочерних элементах <video> элемента <source> заменяются атрибутами src , которые отправляют запрос на загрузку видео и автоматическое начало его воспроизведения.

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

Далее: предварительная выборка и предварительный рендеринг

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