Пришло время ленивой загрузки закадровых iframe!

Адди Османи
Addy Osmani
X GitHub
Барри Поллард

Поддержка браузера

  • Хром: 77.
  • Край: 79.
  • Фаерфокс: 121.
  • Сафари: 16.4.

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

Как и в случае с отложенной загрузкой изображений , используйте атрибут loading чтобы сообщить браузеру, что вы хотите отложенно загружать iframe.

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

В этой демонстрации <iframe loading=lazy> показано встраивание видео с отложенной загрузкой:

Зачем ленивая загрузка iframe?

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

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

Согласно исследованию Chrome по автоматической отложенной загрузке закадровых iframe для пользователей режима экономии данных , отложенная загрузка iframe может привести к медианной экономии данных на 2–3 %, сокращению первой отрисовки контента на 1–2 % в среднем и задержке первого ввода на 2 % ( FID) улучшения на уровне 95-го процентиля.

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

Как работает встроенная отложенная загрузка iframe?

Атрибут loading позволяет браузеру отложить загрузку закадровых iframe и изображений до тех пор, пока пользователи не прокрутят страницу рядом с ними. loading поддерживает два значения:

  • lazy : хороший кандидат для отложенной загрузки.
  • eager : не лучший кандидат для отложенной загрузки. Загрузите сразу.

Использование атрибута loading в iframe работает следующим образом:

<!-- Lazy-load the iframe -->
<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

<!-- Eagerly load the iframe -->
<iframe src="https://example.com"
        width="600"
        height="400"></iframe>

Отсутствие указания атрибута имеет тот же эффект, что и явная загрузка ресурса.

Если вам нужно динамически создавать iframe с помощью JavaScript, также поддерживается установка iframe.loading = 'lazy' для элемента: 

var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);

Как отложенная загрузка популярных вставок iframe влияет на взаимодействие с пользователем?

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

Ютуб

Встраивание видео YouTube с отложенной загрузкой экономит около 500 КБ при начальной загрузке страницы: 

<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
        loading="lazy"
        width="560"
        height="315"
        frameborder="0"
        allow="accelerometer; autoplay;
        encrypted-media; gyroscope;
        picture-in-picture"
        allowfullscreen></iframe>
Chrome.com добился сокращения времени взаимодействия на 10 секунд за счет ленивой загрузки закадровых iframe для встраивания видео на YouTube.
Chrome.com сократил TTI на 10 секунд за счет ленивой загрузки закадровых вставок YouTube.

Инстаграм

Встраивания Instagram предоставляют блок разметки и скрипт, который вставляет iframe на вашу страницу. Отложенная загрузка этого iframe позволяет избежать загрузки всего необходимого для встраивания сценария и позволяет сэкономить около 100 КБ при начальной загрузке. Поскольку в большинстве статей эти встраивания часто отображаются под областью просмотра, это разумный кандидат на отложенную загрузку iframe.

Спотифай

Встраивания Spotify с отложенной загрузкой могут сэкономить 514 КБ при начальной загрузке. 

<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
        loading="lazy"
        width="300"
        height="380"
        frameborder="0"
        allowtransparency="true"
        allow="encrypted-media"></iframe>

Социальные плагины Facebook

Социальные плагины Facebook позволяют разработчикам встраивать контент Facebook на свои веб-страницы. Самым популярным из них является плагин «Мне нравится » — кнопка, которая показывает, скольким пользователям понравилась страница. По умолчанию встраивание плагина Like на веб-страницу с помощью Facebook JSSDK требует около 215 КБ ресурсов, 197 КБ из которых — JavaScript. Плагин часто появляется в конце статьи или ближе к концу страницы, поэтому загружать его, когда он находится за кадром, может быть неоптимально.

Плагин лайков Facebook
Плагин Like от Facebook.

Благодаря инженеру Стояну Стефанову все социальные плагины Facebook теперь поддерживают стандартизированную отложенную загрузку iframe . Разработчики, которые выбирают отложенную загрузку через конфигурацию data-lazy плагинов, теперь могут предотвратить загрузку этих плагинов до тех пор, пока пользователь не прокрутит их поблизости. Это позволяет встраиванию продолжать работать для пользователей, которым это необходимо, сохраняя при этом данные для пользователей, которые не прокручивают страницу до конца. Мы надеемся, что это первое из многих внедрений, в которых используется стандартизированная отложенная загрузка iframe в производственной среде.

Если вам нужен больший контроль над отложенной загрузкой iframe

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

Однако, если вам необходимо поддерживать старые браузеры или вы хотите иметь больший контроль над пороговыми значениями отложенной загрузки, вы можете использовать стороннюю библиотеку для отложенной загрузки iframe на вашем сайте. Библиотека lazysizes JavaScript — одна из таких библиотек, которая позволяет использовать дополнительные параметры, если они вам понадобятся.

Есть ли исключения из отложенной загрузки iframe за кадром?

Ранний эксперимент с автоматической отложенной загрузкой iframe для пользователей Data Saver в Chrome имел исключение для скрытых iframe, часто используемых для связи или аналитики. Им было запрещено лениво загружаться, и они всегда загружались, чтобы предотвратить нарушение этих функций.

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

Ресурсы

Дополнительные идеи по отложенной загрузке см. в коллекции изображений и видео с отложенной загрузкой на сайте web.dev.

Выражаем благодарность Дому Фаролино, Скотту Литтлу, Хусейну Джирде, Саймону Питерсу, Кейси Баскесу, Джо Медли и Стояну Стефанову за их рецензии.