Czym jest leniwe ładowanie (lazy loading)?

Leniwe ładowanie odkłada załadowanie części strony, na przykład obrazu lub osadzonego iframe, dopoki faktycznie nie znajdzie się blisko widocznego obszaru przewijania. Dla osadzenia YouTube oznacza to, ze skrypt odtwarzacza i podgląd miniatury nie ładują się w chwili otwarcia strony, tylko wtedy, gdy odwiedzający ma je zaraz zobaczyć.

Dlaczego jest ważne dla osadzeń

Iframe YouTube jest stosunkowo ciężki do załadowania. Strona z kilkoma osadzeniami może wydawać się zauważalnie wolniejsza, jeśli wszystkie ładowałyby się natychmiast, dlatego leniwe ładowanie jest częsta rekomendacja dla Core Web Vitals i ogólnej szybkości strony.

Jak je włączyć

Nowoczesne przeglądarki obsługują natywny atrybut loading=”lazy” bezpośrednio na <iframe>, bez potrzeby dodatkowego skryptu. Generator kodu osadzania zawiera ten atrybut domyślnie.

Jak działa natywne leniwe ładowanie pod maska

Gdy przeglądarka napotka element z loading=”lazy”, nie tworzy zastępczego elementu i nie czeka w nieskończoność; zamiast tego oblicza przybliżony próg odległości od bieżącego obszaru widocznego i rozpoczyna faktyczne zadanie sieciowe dopiero, gdy element zbliża się do tego progu.

Przykład praktyczny

Długi artykul recenzujący dziesięć produktów, każdy z osadzonym filmem demonstracyjnym, ogromnie korzysta z leniwego ładowania: bez niego wszystkie dziesięć odtwarzaczy zażądałoby swoich skryptów i miniatur jednocześnie przy ładowaniu strony.

Leniwe ładowanie a kliknięcie w celu załadowania

Leniwe ładowanie i kliknięcie w celu załadowania rozwiązują podobny problem z różnymi kompromisami. Leniwe ładowanie w końcu i tak automatycznie ładuje każde osadzenie, gdy odwiedzający przewinie w pobliże, co jest proste do wdrożenia. Kliknięcie w celu załadowania idzie dalej, nigdy nie ładując prawdziwego iframe, dopoki odwiedzający wyraźnie nie kliknie zastępczego elementu.

Leniwe ładowanie a wskaźniki Core Web Vitals

Google bezpośrednio uwzględnia szybkość ładowania strony w rankingu wyszukiwania poprzez wskaźniki Core Web Vitals, a nieoptymalizowane osadzenia wideo są jedna z najczęstszych przyczyn niskich wyników Largest Contentful Paint. Dodanie leniwego ładowania do każdego osadzenia poza tym najwyżej położonym jest więc nie tylko kwestia wygody użytkownika, ale też bezpośrednio wpływa na widoczność strony w wynikach wyszukiwania.

Leniwe ładowanie a starsze przeglądarki

Dla bardzo starych przeglądarek, które nie obsługują natywnego atrybutu loading=”lazy”, można zastosować bibliotekowe rozwiązanie oparte na Intersection Observer API jako awaryjny mechanizm zastępczy, choć w praktyce odsetek użytkowników takich przeglądarek jest dziś na większości stron pomijalnie mały. Warto sprawdzić statystyki odwiedzających własnej strony, zanim zdecydujesz się na dodatkową złożoność takiego rozwiązania.

Najczęściej zadawane pytania