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 zaoszczędzić dane i przyspieszyć 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>

Ta wersja demonstracyjna aplikacji <iframe loading=lazy> pokazuje leniwe ładowanie filmów umieszczonych na stronie:

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 i tak płacą za pobieranie danych i kosztownego kodu JavaScript dla każdego kadru, nawet jeśli nie przewiną do niego.

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% spadek Pierwszego wyrenderowania treści na poziomie mediany i 2% Ulepszenia opóźnienia przy pierwszym działaniu (FID) w 95 centylu.

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, opóźnione wczytywanie iframe’ów poza ekranem może zmniejszyć konkurencję o przepustowość na urządzeniach o ograniczonej przepustowości sieci, pozostawiając więcej przepustowości na wczytywanie zasobów, które przyczyniają się do LCP strony.

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: dobry kandydat do ładowania na żądanie.
• eager: nie jest dobrym kandydatem do leniwego ładowania. Wczytaj 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>

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ą 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 efektywniejszych sposobów wczytywania elementów umieszczanych na stronach YouTube, może być zainteresowany komponentem YouTube Lite.

Instagram

Elementy Instagrama do wklejania zawierają blok znaczników i skrypt, który wstrzykuje element iframe na Twoją stronę. Ł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

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 wtyczka „Lubię to”, czyli przycisk, który pokazuje, ilu użytkowników „polubiło” daną 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 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 Stefanowemu wszystkie wtyczki społecznościowe Facebooka obsługa standaryzowanego elementu iframe leniwe ładowanie. Deweloperzy, którzy zdecydują się na ładowanie opóźnione za pomocą konfiguracji wtyczek data-lazy, mogą teraz uniemożliwić ładowanie tych wtyczek, dopóki użytkownik nie przewinie strony. 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. Mamy nadzieję, że to pierwszy z wielu sposobów osadzania, które pozwolą nam przetestować wdrożenie standardowego wczytywania opóźnionego za pomocą iframe.

Gdy chcesz mieć większą kontrolę nad ładowaniem opóźnionym w ramkach 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 użyć biblioteki zewnętrznej, by opóźnić 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. 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 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 leniwe ładowanie znajdziesz na web.dev kolekcje z leniwym ładowaniem obrazów i filmów.

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