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

Addy Osmani

Barry Pollard

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

• 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 означает, что пользователи тратят данные, загружая элементы, которые они, возможно, никогда не увидят.

Согласно исследованию 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 сократил TTI на 10 секунд за счет ленивой загрузки закадровых вставок YouTube.

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

Инстаграм

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

Плагин Like от Facebook.

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

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

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

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

Вы также можете отложенно загружать закадровые iframe, используя библиотеку JavaScript lazysizes :

<script src="lazysizes.min.js" async></script>

<iframe frameborder="0"
      class="lazyload"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

Используйте следующий шаблон, чтобы обнаружить ленивую загрузку и получить ленивые размеры, когда они недоступны:

<iframe frameborder="0"
      class="lazyload"
    loading="lazy"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

<script>
  if ('loading' in HTMLIFrameElement.prototype) {
    const iframes = document.querySelectorAll('iframe[loading="lazy"]');

    iframes.forEach(iframe => {
      iframe.src = iframe.dataset.src;
    });

  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
    document.body.appendChild(script);
  }

</script>

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

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

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

Ресурсы

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

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