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. Pozwala to oszczędzać dane, przyspiesza wczytywanie innych części strony i zmniejsza 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. Te treści często nie są widoczne od razu w widoku użytkownika, ale użytkownicy nadal płacą za pobieranie danych i kosztownego kodu JavaScript dla każdego kadru, nawet jeśli nie przewiną do niego.

Przyspieszone wczytywanie elementów iframe poza ekranem oznacza, że użytkownicy marnują dane, pobierając elementy, których nigdy nie zobaczą.

Na podstawie badań przeprowadzonych przez zespół Chrome dotyczących automatycznego ładowania nieaktywnych ramek iframe na potrzeby użytkowników trybu oszczędzania danych stwierdzono, że ładowanie nieaktywnych ramek iframe może prowadzić do średniego 2–3% oszczędności danych, średniego 1–2% redukcji czasu pierwszego wyświetlenia treści oraz 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 odłożyć wczytywanie ramek iframe i obrazów niewyświetlanych na ekranie do momentu, gdy użytkownicy przewiną do nich kursor. loading obsługuje 2 wartości:

• lazy: dobry kandydat do ładowania na żądanie.
• eager: nie jest dobrym kandydatem do leniwego ładowania. wczytują się od razu.

Używanie atrybutu loading w przypadku ramek 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 za pomocą JavaScriptu, możesz też użyć ustawienia iframe.loading = 'lazy' w elemencie:

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ślnego ładowania opóźnionego ramek iframe sprawiłoby, że strony internetowe byłyby znacznie bardziej responsywne. Poniższe przykłady pokazują skrócenie czasu do interakcji (TTI) i oszczędności danych dzięki umieszczaniu multimediów, ale iframe reklam z opóźnionym wczytywaniem może 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>

Chrome.com skrócił czas TTI o 10 sekund dzięki wczytywaniu z opóźnieniem wbudowanych filmów z YouTube.

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 na stronę element iframe. Ładowanie opóźnione tego iframe pozwala uniknąć wczytywania całego skryptu, którego potrzebuje element do osadzenia, i może zaoszczędzić około 100 KB przy początkowym wczytywaniu. 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 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 Lubię w witrynie przy użyciu pakietu Facebook JSSDK pobiera około 215 KB zasobów, z których 197 KB to kod 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 ładowaniem opóźnionym. 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. 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ć standardowe wczytywanie opóźnione w przypadku ramki iframe w środowisku produkcyjnym.

Gdy chcesz mieć większą kontrolę nad ładowaniem opóźnionym w ramkach iframe

Łatwo wczytywanie iframe na poziomie przeglądarki jest dobrze obsługiwane we wszystkich głównych przeglądarkach i zalecane w większości przypadków, aby uniknąć konieczności korzystania z dodatkowych zależności od JavaScript.

Jeśli jednak musisz obsługiwać starsze przeglądarki lub chcesz mieć większą kontrolę nad wartościami progowymi opóźnionego wczytywania, możesz użyć biblioteki zewnętrznej do opóźnionego wczytywania iframe w swojej witrynie. Biblioteka JavaScript lazysizes to jedna z takich bibliotek, która umożliwia korzystanie z dodatkowych opcji.

Czy istnieją wyjątki od leniwego wczytywania elementu 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 są często używane 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.

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