Leniwe ładowanie obrazów i elementów <iframe>

Obrazy i elementy <iframe> często zużywają większą przepustowość niż inne typy elementów i zasobami Google Cloud. W przypadku elementów <iframe> trzeba to zrobić w sporej ilości. czas wczytywania i renderowania zawartych w nich stron.

W przypadku leniwego ładowania obrazów opóźnia to wczytywanie obrazów, które są poza początkowym widocznym obszarem może pomóc ograniczyć rywalizację o przepustowość w celu uzyskania ważniejszych zasobów w pierwszym widocznym obszarze. Może to poprawić największego wyrenderowania treści (LCP) strony w niektórych przypadkach, gdy połączenia sieciowe są słabe i przypisana przepustowość może pomóc kandydatom LCP w obciążeniu szybsze malowanie.

Jeśli chodzi o elementy <iframe>, od interakcji do kolejnego wyrenderowania strony (INP) można poprawić podczas uruchamiania przez leniwe ładowanie. To dlatego, że <iframe> to zupełnie oddzielny dokument HTML z własnymi zasobami podrzędnymi. Chociaż elementy <iframe> można uruchamiać w osobnym procesie, nie jest to rzadkie rozwiązanie aby współdzielić proces w innych wątkach, co może tworzyć warunki w których strony stają się mniej reagujące na dane wejściowe użytkownika.

Dlatego opóźnienie wczytywania obrazów nieekranowych i elementów <iframe> jest i wymaga stosunkowo niewielkiego wysiłku pod względem skuteczności. W tym module wyjaśniamy, jak leniwe ładowanie dwa typy elementów, by przyspieszyć i ułatwić użytkownikom w krytycznym okresie uruchamiania.

Leniwe ładowanie obrazów z atrybutem loading

Atrybut loading można dodać do elementów <img>, aby poinformować przeglądarki, jak powinny zostać wczytane:

• "eager" informuje przeglądarkę, że obraz powinien zostać natychmiast wczytany, nawet jeśli znajduje się poza początkowym widocznym obszarem. Jest to również wartość domyślna dla atrybut loading.
• "lazy" opóźnia wczytywanie obrazu do momentu, gdy znajdzie się on w określonej odległości od w widocznym obszarze. Odległość ta różni się w zależności od przeglądarki, ale często jest ustawiona na wystarczająco duże, by obraz wczytywał się, zanim użytkownik przewinie do niego zawartość.

Warto też zauważyć, że jeśli używasz elementu <picture>, Atrybut loading należy nadal zastosować do jego elementu podrzędnego <img>, a nie. do elementu <picture>. Dzieje się tak, ponieważ element <picture> jest kontenera, który zawiera dodatkowe elementy <source> wskazujące różne obrazy i propozycje wybrane przez przeglądarkę są stosowane bezpośrednio do jej elementu podrzędnego <img>.

Nie leniwie ładuj obrazów, które znajdują się w początkowym widocznym obszarze

Atrybut loading="lazy" należy dodawać tylko do elementów <img>, które są znajduje się poza początkowym widocznym obszarem. Znajomość jej skuteczności może być jednak skomplikowana. dokładne położenie elementu względem widocznego obszaru, zanim strona zostanie wyrenderowano. Reklamy muszą mieć różne rozmiary, formaty obrazu i urządzenia które wzięto pod uwagę.

Na przykład widoczny obszar dla komputerów może się znacznie różnić od widocznego obszaru telefonu komórkowego, gdy renderuje więcej przestrzeni w pionie, co może zmieścić się w obrazach w początkowym widocznym obszarze, który nie pojawiałby się w urządzenie jest mniejsze fizycznie. Tablety używane w orientacji pionowej też wyświetlają znacznej ilości miejsca w pionie, może nawet więcej niż na niektórych komputerach. urządzenia.

Są jednak sytuacje, w których dość jasne jest, że należy unikać wprowadzam ustawienie loading="lazy". Na przykład zdecydowanie należy pominąć loading="lazy" z elementów <img> w przypadku banera powitalnego, lub w innych przypadkach użycia obrazów, w których elementy <img> mogą się pojawić nad po złożeniu lub w górnej części układu na dowolnym urządzeniu. Jeszcze ważniejsze jest to, obrazów, które prawdopodobnie będą kandydatami LCP.

Leniwe ładowanie obrazów musi czekać, aż przeglądarka zakończy układ. by ustalić, czy końcowa pozycja obrazu znajduje się w widocznym obszarze. Oznacza to, że że jeśli element <img> w widocznym obszarze ma element loading="lazy" jest on wymagany dopiero po pobraniu, przeanalizowaniu całego arkusza CSS stosowane na stronie – w przeciwieństwie do pobierania zaraz po wykryciu jej przez skanera w nieprzetworzonych znacznikach.

Ponieważ atrybut loading elementu <img> jest obsługiwany na wszystkich głównych nie ma potrzeby używania JavaScriptu do leniwego ładowania obrazów, ponieważ dodawanie dodanie kodu JavaScript do strony w celu zapewnienia możliwości, które już oferuje przeglądarka wpływa na inne aspekty wydajności strony, takie jak INP.

Wersja demonstracyjna leniwego ładowania obrazu

Leniwe ładowanie elementów <iframe>

Leniwe ładowanie <iframe> elementów do momentu, gdy pojawią się w widocznym obszarze, może zostać zapisane i usprawnia wczytywanie najważniejszych zasobów, które są wymagane przed wczytaniem strony najwyższego poziomu. Dodatkowo, ponieważ elementy <iframe> są zasadniczo całe dokumenty HTML wczytane w dokumencie najwyższego poziomu, mogą zawierają znaczną liczbę zasobów podrzędnych – w szczególności w języku JavaScript – które pozwalają mają znaczny wpływ na wartość INP strony, jeśli zadania w tych ramkach wymagają czas przetwarzania jest bardzo długi.

Częstą praktyką w przypadku elementów <iframe> są umieszczone w niej elementy umieszczone przez inne firmy. Przykład: umieszczone odtwarzacze wideo lub posty w mediach społecznościowych zwykle używają elementów <iframe>, Często wymagają one dużej liczby zasobów podrzędnych, które mogą w rezultacie może wystąpić rywalizacja o przepustowość zasobów strony najwyższego poziomu. Jako Na przykład leniwe ładowanie filmu YouTube na stronie pozwala zaoszczędzić ponad 500 KB początkowym wczytywaniu strony i leniwym ładowaniu wtyczki przycisku Podoba mi się Facebooka. pozwala zaoszczędzić ponad 200 KiB, z czego większość to JavaScript.

W obu przypadkach za każdym razem, gdy w części strony widocznej po przewinięciu jest widoczny tag <iframe>, należy rozważyć leniwe ładowanie, jeśli nie ma znaczenia, aby ładować go na początku, może to znacznie poprawić wygodę użytkowników.

Atrybut loading elementów <iframe>

Atrybut loading elementów <iframe> jest również obsługiwany we wszystkich głównych przeglądarki. Wartości atrybutu loading i ich działania to tak samo jak w przypadku elementów <img>, które korzystają z atrybutu loading:

• Wartość domyślna to "eager". Informuje przeglądarkę, że ma wczytać <iframe> kodu HTML i jego zasobów podrzędnych.
• "lazy" opóźnia wczytywanie kodu HTML elementu <iframe> i jego zasobów podrzędnych aż znajdzie się we wstępnie zdefiniowanej odległości od widocznego obszaru.

Wersja demonstracyjna leniwego ładowania elementów iframe

Fasady

Zamiast ładować umieszczoną treść od razu podczas jej wczytywania, możesz w odpowiedzi na interakcję użytkownika. Można to zrobić, wyświetlając obraz lub inny odpowiedni element HTML, dopóki użytkownik nie wejdzie z nim w interakcję. Gdy funkcja gdy użytkownik wejdzie w interakcję z elementem, możesz zastąpić go elementem umieszczonym przez inną firmę. Technika ta jest określana jako fasada.

Częstym zastosowaniem fasad są filmy osadzone w filmach z usług innych firm, w których przypadku umieszczanie może wymagać wczytywania wielu dodatkowych i potencjalnie kosztownych zasobów podrzędnych – takich jak JavaScript – oprócz treści wideo. W takim w przypadku, o ile nie zachodzi uzasadniona potrzeba autoodtwarzania filmu, wymagać od użytkownika interakcji z nim przed odtworzeniem materiału przez kliknięcie przycisku odtwarzania Przycisk

To dobra okazja, aby wyświetlić statyczny obraz, który jest umieścić film na stronie i zaoszczędzić przy tym znaczną część przepustowości łącza. Gdy użytkownik kliknie obraz, zostanie on zastąpiony elementem <iframe>, który został umieszczony na stronie powoduje uruchomienie kodu HTML elementu <iframe> firmy zewnętrznej i jego zasobów podrzędnych pobieranie.

Oprócz skrócenia początkowego wczytywania strony, kluczową zaletą jest to, że jeśli użytkownik nigdy nie odtwarza filmu, zasoby wymagane do jego przesłania nigdy nie są pobrano. To dobry wzór, bo użytkownik ma pewność, że pobiera tylko to, które faktycznie chcą, bez przyjmowania błędnych założeń do potrzeb użytkownika.

Widżety czatu są kolejnym doskonałym zastosowaniem techniki fasadowej. Większość widżety czatu pobierają znaczącą ilość kodu JavaScript, co może mieć negatywny wpływ wpływają na wczytywanie strony i reagowanie na dane wejściowe użytkownika. Jak w przypadku wczytywania czegoś na górze koszty są naliczane w momencie wczytywania, ale w przypadku widżetu czatu nie że każdy użytkownik nigdy nie zamierza z niej korzystać.

Jeśli natomiast masz fasadę, możesz zastąpić komponent „Start Google Chat z fałszywym przyciskiem. Gdy użytkownik wejdzie w wartościową interakcję z np. przytrzymanie wskaźnika myszy przez rozsądny czas lub po kliknięciu – rzeczywisty, funkcjonalny widżet czatu pojawia się, gdy jest potrzebny.

Choć z pewnością można budować własne fasady, istnieją też platformy open source opcje dostępne w przypadku bardziej popularnych firm zewnętrznych, takich jak lite-youtube-embed w przypadku filmów w YouTube, lite-vimeo-embed w przypadku filmów z Vimeo oraz React na żywo na czacie na żywo Moduł wczytujący widżety czatu.

Biblioteki do leniwego ładowania JavaScriptu

Jeśli chcesz leniwie ładować elementy <video>, obrazy <video> elementu poster, obrazy wczytane przez właściwość CSS background-image lub inne nieobsługiwane obiekty można użyć do tego celu opartego na języku JavaScript rozwiązania do leniwego ładowania, leniwe ładowanie lub yall.js, bo leniwe ładowanie tego typu zasobów nie jest funkcja na poziomie przeglądarki.

W szczególności dotyczy to autoodtwarzania i zapętlania elementów <video> bez ścieżki audio. są znacznie skuteczniejszą alternatywą niż animowane GIF-y, ponieważ często są kilkukrotnie większe niż zasób wideo o podobnej grafice jakości. Mimo to takie filmy mogą mieć spore znaczenie, jeśli chodzi o przepustowość, dlatego leniwe ładowanie jest dodatkową optymalizacją i zmniejsza wykorzystanie przepustowości.

Większość z nich korzysta z interfejsu Intersection Observer API. oraz Mutation Observer API, jeśli kod HTML strony zmieni się po tagu wczytywania początkowego – by wykrywać, kiedy element wchodzi w widoczny obszar użytkownika. Jeśli lub gdy obraz zbliża się do widocznego obszaru, widać bibliotekę JavaScriptu. zastępuje atrybut niestandardowy (często data-src lub podobny), z prawidłowym atrybutem, takim jak src.

Załóżmy, że masz film, który zastępuje animowany GIF, ale chcesz go leniwie ładować. za pomocą JavaScriptu. Jest to możliwe dzięki plikowi yall.js o następujących parametrach: wzorzec znacznika:

<!-- The autoplay, loop, muted, and playsinline attributes are to
     ensure the video can autoplay without user intervention. -->
<video class="lazy" autoplay loop muted playsinline width="320" height="480">
  <source data-src="video.webm" type="video/webm">
  <source data-src="video.mp4" type="video/mp4">
</video>

Domyślnie skrypt yall.js obserwuje wszystkie kwalifikujące się elementy HTML z klasą "lazy" Po wczytaniu i wykonaniu kodu yall.js na stronie film nie jest wczytywania, dopóki użytkownik nie przewinie jej do widocznego obszaru. Wtedy data-src atrybuty w podrzędnych elementach <source> elementu <video> są zastępowane do src, który wysyła żądanie pobrania filmu, automatycznie rozpocznie odtwarzanie.

Sprawdź swoją wiedzę

Następny krok: pobieranie z wyprzedzeniem i renderowanie z wyprzedzeniem

Teraz wiesz już, jak działa leniwe ładowanie obrazów i elementów <iframe>. możesz zapewnić, że strony będą ładowały się szybciej, z poszanowaniem potrzeb użytkowników. Istnieją jednak przypadki, spekulacyjne ładowanie zasobów może być pożądane. W następnym module: dowiedz się więcej o wstępnym pobieraniu i renderowaniu oraz o tym, jak te techniki są stosowane może znacznie przyspieszyć nawigację do kolejnych stron, ich z wyprzedzeniem.