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

Адди Османи
Адди Османи
Икс

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

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

  • 77
  • 79
  • 121
  • 16,4

Вы указываете браузеру, что хотите отложенную загрузку iframe с атрибутом loading , точно так же, как вы указываете отложенную загрузку изображений .

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

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

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

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

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

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

Кроме того, отложенная загрузка внеэкранных iframe может дать преимущества Largest Contentful Paint (LCP) . Кандидаты 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, это будет выглядеть примерно так:

Встраивание видео 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>

Анекдот: когда мы перешли на встраивание YouTube с отложенной загрузкой для Chrome.com, мы сэкономили 10 секунд на том, как скоро наши страницы станут интерактивными на мобильных устройствах. Я открыл внутреннюю ошибку YouTube, чтобы обсудить добавление loading=lazy в код внедрения.

Chrome.com добился сокращения времени взаимодействия на 10 секунд за счет ленивой загрузки закадровых iframe для встраивания видео на YouTube.

Встраивание Instagram с отложенной загрузкой (экономия около 100 КБ в сжатом виде при начальной загрузке):

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

Хотя предыдущие вставки иллюстрируют потенциальные преимущества отложенной загрузки iframe для медиаконтента, существует вероятность того, что эти преимущества также можно увидеть и для рекламы.

Практический пример: отложенная загрузка социальных плагинов Facebook

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

Кнопка «Мне нравится» в Facebook

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

Могу ли я отложенно загружать iframe в кросс-браузере? Да

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

Также возможно лениво загружать закадровые iframe с помощью библиотеки JavaScript lazysizes . Это может быть желательно, если вы:

  • требуют большего количества пользовательских порогов отложенной загрузки, чем то, что предлагает стандартизированная отложенная загрузка в настоящее время.
  • хотим предложить пользователям единообразную ленивую загрузку iframe во всех браузерах.
<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 с loading=lazy все еще загружаются?

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

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

Заключение

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

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