Leniwe ładowanie iframe
Opóźnianie ładowania iframe znajdujących się poza ekranem za pomocą loading=lazy
Leniwe ładowanie iframe to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Czym jest lazy loading
Lazy loading odracza ładowanie zasobów do chwili, gdy są potrzebne — gdy element znajdzie się blisko obszaru widocznego lub wewnątrz niego. W przypadku iframe oznacza to, że osadzany dokument, jego skrypty, arkusze CSS i zasoby nie zostaną pobrane, dopóki użytkownik nie przewinie strony w pobliże iframe.
Atrybut loading
Proszę dodać loading="lazy" do iframe: <iframe src="embed.html" loading="lazy">. Przeglądarka sama określa moment rozpoczęcia ładowania na podstawie własnej heurystyki (zwykle 1000–2500 px przed wejściem iframe w obszar widoczny). JavaScript nie jest wymagany.
Wpływ na wydajność
iframe mogą ładować znaczne ilości zasobów (YouTube ładuje około 500 KB kodu JavaScript). Zastosowanie lazy loading do osadzonego wideo znajdującego się poniżej załamania strony zmniejsza początkowy czas ładowania strony dokładnie o tę wartość — bezpośrednio poprawiając LCP i Time to Interactive dla treści znajdujących się nad załamaniem.
loading="eager"
loading="eager" ładuje iframe natychmiast, niezależnie od jego położenia. Jest to domyślne zachowanie. Jawne dodanie eager jest przydatne w środowiskach, które domyślnie stosują lazy loading (na przykład we frameworkach globalnie dodających lazy loading), gdy konkretny iframe musi załadować się natychmiast.
Alternatywa dla Intersection Observer
W przypadku złożonej logiki lazy loading (ładowanie po kliknięciu, ładowanie zależne od jakości połączenia) proszę użyć IntersectionObserver: obserwować kontener iframe i ustawić src dopiero po wejściu kontenera w obszar widoczny. Zapewnia to pełną kontrolę nad tym, kiedy i czy iframe zostanie załadowany.
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
iframe.src = iframe.dataset.src;
observer.disconnect();
}
});
observer.observe(iframe);Wzorzec fasady
Domyślnie należy wyświetlać statyczną miniaturę zamiast iframe. Na miniaturze proszę umieścić nakładkę z przyciskiem odtwarzania. Po kliknięciu należy zastąpić miniaturę właściwym iframe. Wzorzec fasady YouTube polega na wyświetleniu miniatury wideo i załadowaniu iframe dopiero po kliknięciu przycisku odtwarzania — oszczędza to koszt pełnego ładowania osadzanego YouTube.
Wzorzec ładowania po kliknięciu
W przypadku osadzanych treści społecznościowych (osi czasu Twittera, postów na Instagramie), które ładują znaczne ilości kodu JavaScript, proszę wyświetlić przycisk „Załaduj komentarze”. Po kliknięciu należy wstawić iframe. Użytkownicy, którzy nie wejdą w interakcję, nigdy nie poniosą kosztu ładowania. Jest to progressive enhancement dla osadzanych treści społecznościowych.
Obsługa w przeglądarkach
loading="lazy" dla iframe jest obsługiwane w Chrome 77+ i Firefox 121+. Safari nie obsługuje lazy loading iframe (stan na 2024 rok). W celu zapewnienia lazy loading w różnych przeglądarkach proszę użyć IntersectionObserver jako niezawodnego rozwiązania zastępczego — działa on we wszystkich nowoczesnych przeglądarkach.
Zapobieganie CLS
Aby zapobiec Cumulative Layout Shift (CLS), proszę zarezerwować miejsce na iframe ładowane za pomocą lazy loading, określając jawnie szerokość, wysokość i CSS aspect-ratio. Gdy iframe zostanie załadowany i stanie się widoczny, miejsce będzie już przydzielone — otaczająca treść nie przesunie się, aby go pomieścić.
Śledzenie analityczne
iframe ładowane za pomocą lazy loading mogą wpływać na analitykę: jeśli iframe z pikselem śledzącym lub osadzoną analityką jest ładowany w ten sposób, może nie wykonać kodu u użytkowników, którzy nie przewiną strony do tego elementu. Proszę upewnić się, że krytyczne iframe związane z analityką i śledzeniem konwersji są ładowane eager lub znajdują się nad załamaniem strony.
Łączenie lazy i sandbox
Proszę używać lazy i sandbox razem: <iframe src="embed.html" loading="lazy" sandbox="allow-scripts">. Oba atrybuty działają niezależnie — lazy określa, kiedy iframe zostanie załadowany, a sandbox określa, co iframe może robić. Proszę łączyć je w celu wydajnego i bezpiecznego osadzania treści zewnętrznych.
Sprawdzenie wiedzy
Na czym polega wzorzec fasady stosowany przy leniwym ładowaniu elementów iframe?
Podsumowanie
Leniwe ładowanie elementów iframe z użyciem loading="lazy" odracza ładowanie zasobów do momentu, gdy element znajdzie się blisko obszaru widocznego — znacznie zmniejszając początkowe obciążenie strony w przypadku ciężkich osadzonych treści. Wzorzec fasady i ładowanie po kliknięciu posuwają to rozwiązanie jeszcze dalej, ładując iframe dopiero po interakcji użytkownika. IntersectionObserver zapewnia obsługę różnych przeglądarek w złożonych scenariuszach leniwego ładowania. Należy zarezerwować wymiary elementu iframe, aby zapobiec CLS.
Często zadawane pytania
Czy lekcja „Leniwe ładowanie iframe” jest bezpłatna?
Tak — pełny tekst „Leniwe ładowanie iframe” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Leniwe ładowanie iframe”?
Opóźnianie ładowania iframe znajdujących się poza ekranem za pomocą loading=lazy Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Leniwe ładowanie iframe”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Element iframe — src i sandbox
- Bezpieczeństwo iframe — clickjacking i X-Frame-Options
- Elementy embed i object
- Leniwe ładowanie iframe