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.
Obsługa przeglądarek
- 77
- 79
- 121
- 16.4
Wskazujesz przeglądarce, że chcesz leniwie ładować element iframe, korzystając z atrybutu loading w taki sam sposób, w jaki wskazujesz leniwe ładowanie obrazów.
<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
Materiały innych firm umieszczone na stronie mają szeroki zakres zastosowań – od odtwarzaczy wideo, przez posty w mediach społecznościowych i reklamy. Często treści te nie są od razu widoczne w widocznym obszarze. Jest widoczny dopiero po przewinięciu strony w dół. Pomimo tego użytkownicy płacą koszt pobierania danych i kosztowny kod JavaScript za każdą klatkę, nawet jeśli nie przewiną.
Na podstawie wyników badań Chrome dotyczących automatycznego leniwego ładowania elementów iframe poza ekranem w przypadku użytkowników korzystających z Oszczędzania danych stwierdziliśmy, że leniwe ładowanie elementów iframe może prowadzić do zmniejszenia mediany danych o 2–3%, zmniejszenia mediany wartości First Contentful Paint o 1–2% i poprawy opóźnienia przy pierwszym działaniu (FID) o 2% na 95 centylu.
Poza tym leniwe ładowanie elementów iframe poza ekranem może przynieść korzyści największemu wyrenderowaniu treści (LCP). kandydatów LCP, np. obrazy lub tekst zależne od czcionek internetowych w celu renderowania. Elementy iframe mogą często wymagać znacznej przepustowości do wczytania wszystkich zasobów podrzędnych, dlatego leniwe ładowanie elementów iframe poza ekranem może znacznie ograniczyć rywalizację o przepustowość na urządzeniach z ograniczeniem sieci i pozostawić większą przepustowość na wczytywanie zasobów, które przyczyniają się do zmniejszenia 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: to dobry wybór do leniwego ładowania.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 w ogóle nie określisz atrybutu, będzie to miało 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);
Jaki może być wpływ leniwego ładowania popularnych elementów iframe na stronie?
Gdyby sieć zmieniła się i było domyślne leniwe ładowanie elementów iframe poza ekranem, wyglądałoby to mniej więcej tak:
Leniwe ładowanie umieszczonego filmu z YouTube (oszczędzasz 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>
Anegdotka: po przejściu na leniwe ładowanie elementów z YouTube umieszczonych na stronie Chrome.com zaoszczędziliśmy 10 sekund czasu, który skrócił nam czas, w jakim nasze strony stały się interaktywne na urządzeniach mobilnych. Zgłosiliśmy błąd wewnętrzny w YouTube, aby porozmawiać o dodaniu elementu loading=lazy do kodu do umieszczenia na stronie.
Leniwe ładowanie elementów umieszczonych na Instagramie (ok. 100 KB zapisywane w formacie gzip przy pierwszym wczytaniu):
Elementy umieszczone na Instagramie zawierają blok znaczników i skrypt, który wstrzykuje na stronie element iframe. Leniwe ładowanie tego elementu iframe eliminuje konieczność ładowania całego skryptu niezbędnego do umieszczenia elementu. Takie osadzone elementy są często wyświetlane w większości artykułów poniżej widocznego obszaru, więc wydaje się, że leniwe ładowanie elementów iframe jest uzasadnione.
Leniwe ładowanie elementów ze Spotify (oszczędza 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>
Poprzednie umieszczone strony ilustrują potencjalne korzyści z leniwego ładowania elementów iframe z treściami multimedialnymi, ale mogą też być skuteczne w przypadku reklam.
Studium przypadku: leniwe ładowanie wtyczek społecznościowych Facebooka
Wtyczki społecznościowe Facebooka pozwalają programistom umieszczać treści z Facebooka na stronach internetowych. Dostępnych jest wiele takich wtyczek, np. umieszczone posty, zdjęcia, filmy, komentarze... Najpopularniejszą jest wtyczka „Podoba mi się” – przycisk, który pokazuje, kto polubił stronę. Domyślnie umieszczenie wtyczki „Podoba mi się” na stronie internetowej (za pomocą pakietu JSSDK Facebooka) pobiera około 215 KB zasobów, z czego 197 KB to JavaScript. W wielu przypadkach wtyczka może znajdować się na końcu artykułu lub na końcu strony, więc pilne ładowanie jej, 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, będą mogli uniknąć ładowania, dopóki użytkownik nie przewinie strony w pobliżu. Dzięki temu umieszczone treści mogą nadal w pełni działać użytkownikom, którzy ich potrzebują, a użytkownikom, którzy nie przewijają strony do samego dołu, pozwala zaoszczędzić dane. Mamy nadzieję, że jest to pierwsza z wielu funkcji umieszczania elementów, które omawiają ustandaryzowane leniwe ładowanie elementów iframe w środowisku produkcyjnym.
Czy można leniwie ładować elementy iframe w różnych przeglądarkach? Tak
Leniwe ładowanie elementów iframe można stosować jako progresywne ulepszenie. Przeglądarki obsługujące loading=lazy w elementach iframe będą leniwie ładować element iframe, a atrybut loading zostanie bezpiecznie zignorowany w przeglądarkach, które jeszcze go nie obsługują.
Możesz też leniwie ładować elementy iframe poza ekranem, korzystając z biblioteki JavaScript lenisizes. Może to być pożądane, jeśli:
- wymaga więcej niestandardowych progów leniwego ładowania niż ten dostępny w standardowym zakresie leniwego ładowania.
- Chcemy 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 jest ono 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 występują sytuacje, w których elementy iframe poza ekranem z elementem loading=lazy nadal są wczytywane?
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 ładowane, co zapobiegało uszkodzeniu tych funkcji.
W przypadku atrybutu loading wybór należy do dewelopera, więc taka heurystyka nie jest stosowana, a atrybut loading zawsze powinien być uwzględniany, z uwzględnieniem limitów odległości i innych ustawień przeglądarki (np. drukowania).
Podsumowanie
Zapoznaj się z kolekcją leniwego ładowania obrazów i filmów na stronie web.dev, aby znaleźć więcej pomysłów na leniwe ładowanie.
Dziękujemy Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley i Stoyan Stefanov za ich recenzje.