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 ramek iframe poza ekranem, dopóki użytkownik nie przewinie strony w ich pobliżu. Dzięki temu zaoszczędzisz dane, przyspieszysz ładowanie innych części strony i zmniejszysz wykorzystanie pamięci.

Podobnie jak w przypadku leniwego ładowania obrazów, użyj atrybutu loading, aby poinformować przeglądarkę, że chcesz stosować leniwe ładowanie elementu iframe.

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

Ten film demonstracyjny <iframe loading=lazy> pokazuje osadzenie filmów z opóźnionym wczytywaniem:

Dlaczego warto stosować leniwe ładowanie elementów iframe?

Elementy zewnętrzne obejmują szeroki zakres zastosowań, od odtwarzaczy wideo po posty w mediach społecznościowych i reklamy. Takie treści często nie są od razu widoczne w widocznym obszarze użytkownika, ale użytkownicy, którzy nie przewijają do niej, ponoszą koszt pobierania danych i kosztownego JavaScriptu.

Szybkie wczytywanie pozaekranowych elementów iframe oznacza marnowanie danych przez użytkownika na pobieranie elementów, których być może nigdy nie zobaczyli.

Na podstawie badań przeprowadzonych przez zespół Chrome dotyczących automatycznego ładowania nieaktywnych ramek iframe na drugim planie dla użytkowników trybu oszczędzania danych, ładowanie nieaktywnych ramek iframe może prowadzić do średniego 2–3% oszczędności danych, średniego 1–2% krótszego czasu pierwszego wyświetlenia treści oraz średniego 2% poprawy opóźnienia pierwszego wejścia (FID) w 95. percentylu.

Lazy-loading elementów iframe poza ekranem może też poprawić największe wyrenderowanie treści (LCP) na stronie. Ponieważ iframe’y często potrzebują znacznej ilości przepustowości, aby wczytać wszystkie swoje zasoby podrzędne, wczytywanie z opóźnieniem iframe’ów poza ekranem może zmniejszyć konkurencję o przepustowość na urządzeniach o ograniczonych możliwościach sieciowych, pozostawiając więcej przepustowości na wczytywanie zasobów, które przyczyniają się do LCP strony.

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

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

• lazy: dobry kandydat do ładowania na żądanie.
• eager: nie jest odpowiednim kandydatem do leniwego ładowania. wczytują się 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>

Brak określenia atrybutu ma taki sam wpływ jak jawne pobieranie zasobu.

Jeśli chcesz dynamicznie tworzyć elementy iframe przy użyciu JavaScriptu, możesz też obsługiwać ustawienie iframe.loading = 'lazy' elementu:

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

Jak wczytywanie z opóźnieniem popularnych elementów iframe wpływa na wrażenia użytkowników?

Ustawienie domyślnych elementów iframe z leniwym ładowaniem poprawi szybkość działania stron. W poniższych przykładach widać ulepszenia związane z czasem do pełnej interaktywności (TTI) i oszczędności danych dzięki umieszczaniu multimediów. Leniwe ładowanie elementów iframe może też przynieść podobne korzyści.

YouTube

Lazy-loading w przypadku filmów w YouTube pozwala zaoszczędzić około 500 KB podczas początkowego wczytywania 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>

Funkcja TTI na Chrome.com skróciła się o 10 sekund dzięki leniwemu ładowaniu elementów umieszczanych poza ekranem.

Uwaga: jeśli szukasz bardziej wydajnych sposobów wczytywania treści osadzionych z YouTube, możesz zainteresować się komponentami YouTube Lite.

Instagram

Elementy Instagrama do wklejania zawierają blok znaczników i skrypt, który wstrzykuje element iframe na Twoją stronę. Leniwe ładowanie tego elementu iframe pozwala uniknąć ładowania wszystkich skryptów wymaganych przez umieszczenie go w witrynie i może zaoszczędzić około 100 KB przy wstępnym wczytaniu. Ponieważ te elementy są często wyświetlane poniżej widocznego obszaru w większości artykułów, jest to odpowiedni kandydat do ładowania opóźnionego iframe.

Spotify

Lazy-loading w przypadku wbudowanych elementów Spotify może zaoszczędzić 514 KB podczas początkowego wczytywania.

<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 umożliwiają deweloperom umieszczanie treści z Facebooka na stronach internetowych. Najpopularniejszym z nich jest wtyczka „Lubię to”, czyli przycisk, który pokazuje, ilu użytkowników „polubiło” daną stronę. Domyślnie umieszczenie wtyczki Like na stronie internetowej za pomocą pakietu JSSDK Facebooka pobiera domyślnie około 215 KB zasobów, z których 197 KB to JavaScript. Wtyczka często pojawia się na końcu artykułu lub w pobliżu końca strony, więc jej wczesne wczytywanie, gdy nie jest widoczna, może nie być optymalnym rozwiązaniem.

Wtyczka Facebooka „Podoba mi się”.

Dzięki inżynierowi Stoyanowi Stefanovowi wszystkie wtyczki społecznościowe Facebooka obsługują teraz standardowy iframe z lazy-loadingiem. Deweloperzy, którzy zdecydują się na ładowanie opóźnione za pomocą konfiguracji wtyczek data-lazy, mogą teraz uniemożliwić wczytywanie tych wtyczek, dopóki użytkownik nie przewinie strony w pobliżu. Dzięki temu funkcja wklejania będzie działać dla użytkowników, którzy jej potrzebują, a jednocześnie oszczędzać dane użytkowników, którzy nie przewiną strony do końca. Mamy nadzieję, że to pierwszy z wielu sposobów osadzania, które pozwolą nam przetestować wdrożenie standardowego wczytywania opóźnionego za pomocą ramki iframe.

Jeśli chcesz mieć większą kontrolę nad leniwym ładowaniem elementów iframe

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 musisz obsługiwać starsze przeglądarki lub chcesz mieć większą kontrolę nad progami leniwego ładowania, możesz skorzystać z biblioteki innej firmy, by umożliwić leniwe ładowanie elementów iframe w witrynie. Przykładem jest biblioteka JavaScript lazysizes, która w razie potrzeby udostępnia dodatkowe opcje.

Czy istnieją wyjątki od opóźnionego wczytywania elementów iframe poza ekranem?

Wczesny eksperyment z automatycznym wczytywaniem ramek iframe z opóźnieniem dla użytkowników trybu oszczędzania danych w Chrome miał wyjątek dla ukrytych ramek iframe, które często służą do komunikacji lub analizy. Zablokowaliśmy ich ładowanie w tylu tle i zawsze ładujemy je, aby nie powodować błędów w tych funkcjach.

Atrybut loading nie stosuje tych heurystycznych metod, więc deweloper zawsze może wybrać, co ma być ładowane z opóźnieniem. Atrybut loading powinien być zawsze honorowany z uwzględnieniem limitów odległości i innych opcji przeglądarki (takich jak drukowanie).

Zasoby

Więcej pomysłów na stosowanie leniwego wczytywania znajdziesz w kolekcji materiałów web.dev dotyczących leniwego wczytywania obrazów i filmów.

Z podziękowaniem: Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley i Stefanov za ich opinie.