Czas na leniwe ładowanie elementów iframe poza ekranem.

Addy Osmani

Leniwe ładowanie elementów <iframe> uniemożliwia wczytywanie elementów iframe poza ekranem, dopóki użytkownik nie przewinie strony w jego pobliżu. Pozwala to zmniejszyć ilość przesyłanych danych, przyspieszyć wczytywanie innych części strony i zmniejszyć wykorzystanie pamięci.

Tak jak w przypadku leniwego ładowania obrazów użyj atrybutu loading, aby poinformować przeglądarkę, że chcesz leniwie ładować element iframe.

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

Ta prezentacja witryny <iframe loading=lazy> pokazuje leniwe ładowanie umieszczonego filmu:

Dlaczego leniwe ładowanie elementów iframe

Elementy umieszczone przez inne firmy mają szeroki zakres zastosowań – od odtwarzaczy wideo przez posty w mediach społecznościowych po reklamy. Takie treści często nie są od razu widoczne w widocznym obszarze, ale użytkownicy płacą koszt pobierania danych i kosztowny kod JavaScript za każdą klatkę, nawet jeśli nie przewiną.

Zgodnie z badaniami Chrome dotyczącymi automatycznego leniwego ładowania elementów iframe poza ekranem w przypadku użytkowników korzystających z Oszczędzania danych leniwe ładowanie elementów iframe może prowadzić do zmniejszenia mediany danych o 2–3%, zmniejszenia mediany o 1–2% przy medianie i o 2% na opóźnieniu przy pierwszym działaniu (FID) na 95 centylu.

Leniwe ładowanie elementów iframe poza ekranem może też poprawić największe wyrenderowanie treści (LCP) na stronie. Elementy iframe wymagają często dużej przepustowości do wczytania wszystkich zasobów podrzędnych, więc leniwe ładowanie elementów iframe poza ekranem może zmniejszyć rywalizację z przepustowością na urządzeniach z ograniczeniami sieciowymi i pozwolić zwiększyć przepustowość na ładowanie zasobów, które przyczyniają się do współczynnika LCP strony.

Jak działa wbudowane leniwe ładowanie elementów iframe?

Atrybut loading pozwala przeglądarce opóźnić wczytywanie elementów iframe i obrazów poza ekranem do momentu, gdy użytkownicy przewiną stronę w jej pobliżu. loading obsługuje 2 wartości:

• lazy: dobry sposób na leniwe ładowanie.
• eager: nie jest dobrym kandydatem do leniwego ładowania. Wczytaj od razu.

Użycie atrybutu loading w elementach iframe działa w ten sposób:

<!-- 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>

Jeśli nie określisz atrybutu, ma on taki sam wpływ jak jawne wczytanie zasobu.

Jeśli musisz dynamicznie tworzyć elementy iframe za pomocą JavaScriptu, ustawienie iframe.loading = 'lazy' w elemencie również jest obsługiwane:

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

Jak leniwe ładowanie popularnych elementów iframe wpływa na wygodę użytkowników?

Ustawienie domyślnego leniwego ładowania elementów iframe przyspieszy reagowanie stron internetowych. Poniższe przykłady pokazują ulepszenia związane z czasem do pełnej interaktywności (TTI) i oszczędność danych w przypadku umieszczania multimediów, ale leniwe ładowanie elementów iframe z reklamami może przynieść podobne korzyści.

YouTube

Leniwe ładowanie filmów z YouTube na stronie pozwala zaoszczędzić około 500 KB przy wstępnym wczytaniu strony:

<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>

Instagram

Elementy umieszczone na Instagramie zawierają blok znaczników i skrypt, który wstrzykuje na stronie element iframe. Leniwe ładowanie tego elementu iframe pozwala uniknąć konieczności wczytywania całego skryptu, który jest potrzebny, a przy początkowym wczytywaniu może zaoszczędzić około 100 KB. W większości artykułów umieszczone elementy są często wyświetlane poniżej widocznego obszaru, dlatego jest to rozsądna opcja leniwego ładowania elementów iframe.

Spotify

Leniwe ładowanie elementów Spotify na stronach może przy początkowym wczytywaniu zaoszczędzić 514 KB.

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

Wtyczki społecznościowe Facebooka

Wtyczki społecznościowe Facebooka pozwalają programistom umieszczać treści z Facebooka na stronach internetowych. Najpopularniejszym z nich jest wtyczka „Lubię to”. Jest to przycisk, który pokazuje, ilu użytkowników „polubiło” stronę. Domyślnie umieszczenie wtyczki „Podoba mi się” na stronie internetowej za pomocą pakietu JSSDK Facebooka pobiera około 215 KB, z czego 197 KB, to JavaScript. Wtyczka często znajduje się na końcu artykułu lub na końcu strony, więc ładowanie go z chęcią, gdy jest poza ekranem, może nie być optymalne.

Dzięki inżynierowi Stoyanowi Stefanovowi wszystkie wtyczki społecznościowe Facebooka obsługują teraz standardowe leniwe ładowanie elementów iframe. Deweloperzy, którzy włączą leniwe ładowanie za pomocą konfiguracji data-lazy wtyczek, mogą teraz blokować wczytywanie tych wtyczek, dopóki użytkownik nie przewinie strony w pobliżu. Dzięki temu umieszczone treści mogą nadal działać użytkownikom, którzy tego potrzebują, a dane dla użytkowników, którzy nie przewiną strony w dół. Mamy nadzieję, że jest to pierwsza z wielu funkcji umieszczania, które rozwijają standardowe leniwe ładowanie elementów iframe w środowisku produkcyjnym.

Leniwe ładowanie elementów iframe w różnych przeglądarkach

Możesz zastosować w witrynie leniwe ładowanie elementów iframe jako kolejne ulepszenie. Przeglądarki, które obsługują atrybut loading=lazy w elementach iframe z leniwym ładowaniem, oraz przeglądarki, które nie obsługują atrybutu loading, bezpiecznie go ignorują.

Możesz też leniwie ładować elementy iframe poza ekranem, korzystając z biblioteki JavaScriptu lenisizes. Warto to zrobić, jeśli:

• wymagają większej liczby niestandardowych progów leniwego ładowania niż w przypadku standardowych ofert leniwego ładowania,
• Chce zapewnić użytkownikom spójne wrażenia podczas leniwego ładowania elementów iframe w różnych przeglądarkach.

<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>

Użyj tego wzorca, aby wykrywać leniwe ładowanie i pobierać leniwe rozmiary, gdy są niedostępne:

<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>

Czy są wyjątki od leniwego ładowania elementów iframe poza ekranem?

We wczesnej fazie eksperymentu z automatycznym leniwym ładowaniem elementów iframe w przypadku użytkowników Oszczędzania danych w Chrome wyjątek stanowiły ukryte elementy iframe, często używane do komunikacji lub analizy. Zapobiegaliśmy ich leniwemu ładowaniu i zawsze było wczytywane, co zapobiega zakłócaniu działania tych funkcji.

W atrybucie loading nie stosuje się tych metod heurystycznych, więc programista zawsze decyduje, co ma być ładowane leniwie. Atrybut loading zawsze powinien być uwzględniany, pamiętając o ograniczeniach odległości i innych ustawieniach przeglądarki (takich jak drukowanie).

Zasoby

Więcej pomysłów na leniwe ładowanie znajdziesz na stronie web.dev o kolekcji leniwego ładowania obrazów i filmów.

Dziękujemy Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley i Stoyan Stefanov za ich recenzje.