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

Addy Osmani

Barry Pollard

Obsługa przeglądarek

• 77
• 79
• 121
• 16,4

Leniwe ładowanie elementów <iframe> opóźnia wczytywanie elementów iframe poza ekranem dopóki użytkownik nie przewinie strony w pobliżu. Pozwala to zaoszczędzić dane i przyspieszyć wczytywanie innych części strony i zmniejsza 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 wersja demonstracyjna aplikacji <iframe loading=lazy> pokazuje leniwe ładowanie filmów umieszczonych na stronie:

Po co leniwe ładowanie elementów iframe?

Odtwarzacze firm zewnętrznych mają wiele zastosowań – od odtwarzaczy po posty w mediach społecznościowych do reklam. Te treści często nie są od razu widoczne w użytkownika, ale użytkownicy ponoszą koszty pobierania danych i JavaScriptu każdej klatki, nawet jeśli nie przewijają one do niej.

Szybkie ładowanie elementów iframe poza ekranem oznacza, że użytkownicy marnuje dane, pobierając elementy, których mogą nigdy nie zobaczyć.

Wyniki badań przeprowadzonych przez Chrome na temat automatycznego leniwego ładowania elementów iframe poza ekranem dla użytkowników Oszczędzania danych, leniwe ładowanie elementów iframe może zapewnić medianę oszczędności danych o 2–3%, o 1–2% redukcja pierwszego wyrenderowania treści na poziomie mediany i 2% Ulepszenia opóźnienia przy pierwszym działaniu (FID) w 95. percentylu.

Leniwe ładowanie poza ekranem elementów iframe może też poprawić największy rozmiar strony Wyrenderowanie treści (LCP). Elementy iframe często wymagają tagu znaczną przepustowość, która wystarcza na wczytanie wszystkich zasobów podrzędnych, leniwe ładowanie; Elementy iframe poza ekranem mogą zmniejszać rywalizację o przepustowość w przypadku ograniczeń sieciowych urządzeń, co przekłada się na większą przepustowość wczytywania zasobów strony LCP.

Jak działa wbudowane leniwe ładowanie w elementach iframe?

Atrybut loading pozwala przeglądarce opóźnić wczytywanie elementów iframe poza ekranem oraz aż użytkownicy przewiną w pobliżu. Funkcja loading obsługuje 2 wartości:

• lazy: dobre rozwiązanie do leniwego ładowania.
• eager: nie jest dobrym rozwiązaniem do leniwego ładowania. Wczytaj od razu.

Korzystanie z 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, będzie to miało taki sam wpływ jak w przypadku bezpośredniego wczytywania. w przypadku zasobów.

Jeśli chcesz dynamicznie tworzyć elementy iframe za pomocą JavaScriptu, możesz iframe.loading = 'lazy' na elemencie też obsługiwany:

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 wrażenia użytkownika?

Ustawienie domyślnych elementów iframe z leniwym ładowaniem poprawi szybkość działania stron. Poniższe przykłady pokazują dane i ulepszenia dotyczące czasu do pełnej interaktywności (TTI) oszczędności wynikające z umieszczania multimediów, ale leniwe ładowanie reklam iframe korzyści.

YouTube

Leniwe ładowanie filmów YouTube pozwala zaoszczędzić około 500 KB przy pierwszym 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>

.

Firma Chrome.com skróciła mechanizm TTI o 10 sekund o podczas leniwego ładowania elementów umieszczanych na stronach YouTube.

.

Uwaga: jeśli szukasz efektywniejszych sposobów wczytywania elementów umieszczanych na stronach YouTube, może być zainteresowany komponentem YouTube Lite.

Instagram

Elementy umieszczone na Instagramie zapewniają blok znaczników i skrypt, który wstawia iframe na stronie. Leniwe ładowanie tego elementu iframe pozwala uniknąć wczytywania do umieszczenia na stronie, i może zaoszczędzić około 100 kB przy początkowym wczytywaniu. Ponieważ w większości artykułów są one często wyświetlane poniżej widocznego obszaru, leniwe ładowanie elementów iframe.

Spotify

Leniwe ładowanie elementów ze Spotify pozwala zaoszczędzić 514 KB przy początkowym wczytywaniu.

<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 stron internetowych. Najpopularniejszym z nich jest like, przycisk pokazujący, ilu użytkowników „polubiło” treści. stronę. Domyślnie wektor dystrybucyjny za pomocą wtyczki „like” na stronie internetowej korzystającej z pakietu Facebook JSSDK Facebooka pobiera około 215 KB zasobów, z których 197 KB to JavaScript. Wtyczka często znajduje się na końcu do artykułu lub pod koniec strony, więc szybko ładuje go, gdy znajdzie się poza ekranem może być nieoptymalna.

Wtyczka Lubię to Facebook.

Dzięki inżynierowi Stoyanowi Stefanowemu wszystkie wtyczki społecznościowe Facebooka obsługa standaryzowanego elementu iframe leniwe ładowanie. Deweloperzy, którzy włączyli leniwe ładowanie za pomocą wtyczek data-lazy Konfiguracja może teraz uniemożliwiać wczytywanie tych wtyczek, dopóki użytkownik nie przewinie strony w pobliżu. Dzięki temu umieszczony element będzie nadal działać dla użytkowników, którzy go potrzebują, oszczędzanie danych w przypadku użytkowników, którzy nie przewijają strony do końca. Wierzymy w To pierwsza z wielu funkcji osadzania, w której można poznać standaryzowane leniwe ładowanie elementów iframe produkcji.

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

Leniwe ładowanie elementów iframe na poziomie przeglądarki jest dobrze obsługiwane przez wszystkie popularne przeglądarki i zalecane w większości przypadków, aby wyeliminować dodatkowe zależności od JavaScriptu.

Jeśli jednak potrzebujesz obsługi większej liczby przeglądarek lub chcesz mieć większą kontrolę nad progami leniwego ładowania, możesz użyć biblioteki zewnętrznej, by umożliwić leniwe ładowanie elementu iframe w swojej witrynie.

Możesz też leniwie ładować elementy iframe poza ekranem, używając leniwych rozmiarów. Biblioteka JavaScript:

<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 jest niedostępny:

<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 dotyczące leniwego ładowania elementów iframe poza ekranem?

Wczesny eksperyment dotyczący automatycznego leniwego ładowania elementów iframe w ramach Oszczędzania danych w Chrome był wyjątek dotyczący ukrytych elementów iframe, często używanych komunikacją czy analityką. Zostały one uniemożliwione leniwe ładowanie, zawsze wczytywane, aby zapobiec uszkodzeniu tych funkcji.

Atrybut loading nie stosuje tej heurystyki, więc programista zawsze wybrać, co ma się ładować leniwie. Atrybut loading powinien zawsze mieć wartość z zastrzeżeniem ograniczeń odległości i innych opcji przeglądarki (takich jak drukowanie).

Zasoby

Więcej pomysłów na leniwe ładowanie znajdziesz na web.dev kolekcje z leniwym ładowaniem obrazów i filmów.

Z podziękowaniami: Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley i Stoyan Stefanowa.