HTML5 - HTML
Leniwe ładowanie <iframe loading, img loading>
Co zrobić, żeby obrazki na stronie były ładowane dopiero, kiedy użytkownik przewinie stronę w ich pobliże?
- Widżet (ramka lokalna):
<iframe src="lokalizacja" loading="tryb"></iframe>
- Obrazek:
<img src="lokalizacja" loading="tryb">
- lokalizacja
- Ścieżka dostępu albo adres URL wskazujące na miejsce, skąd ma zostać załadowany zewnętrzny zasób
- tryb
- Należy podać jedną z poniższych wartości:
- lazy - zasób zostanie pobrany dopiero po spełnieniu określonych warunków - np. kiedy użytkownik przewinie stronę w jego pobliże.
- eager - ładowanie natychmiastowe (wartość domyślna)
Język HTML pozwala na osadzanie w dokumencie m.in. zdjęć oraz widżetów. Może się zdarzyć, że użytkownik w ogóle nie przewinie strony do miejsca, w którym zostały umieszczone tego typu multimedia. Niestety przeglądarka załaduje wszystkie tego typu elementy - nawet znajdujące się na samym dole strony, które w tym momencie w ogóle nie są widoczne na ekranie. Jeśli zdjęcia lub widżety mają duży rozmiar, spowolni to wczytywanie całej strony. Dodatkowo może narazić na dodatkowe koszty użytkowników korzystających z połączenia mobilnego. Możemy tego uniknąć stosując atrybut loading="lazy".
Pytania i odpowiedzi <iframe loading, img loading>
Co to jest leniwe ładowanie w HTML?
Co to jest ładowanie chętne i leniwe?
Ładowanie chętne (ang. eager loading) to technika, w której wszystkie zasoby są ładowane natychmiast po załadowaniu strony, bez względu na to, czy są od razu widoczne. Ładowanie leniwe (ang. lazy loading) opóźnia ładowanie zasobów do momentu, gdy staną się potrzebne, np. gdy użytkownik przewinie stronę do miejsca, w którym się znajdują.
Jak włączyć inteligentne ładowanie?
Inteligentne ładowanie można włączyć, stosując atrybut loading="lazy" dla elementów, takich jak <img> i <iframe>. Na przykład: <img src="obrazek.jpg" loading="lazy">. Dzięki temu zasoby te będą ładowane tylko wtedy, gdy użytkownik przewinie stronę w ich pobliże.
Dlaczego leniwe ładowanie?
Leniwe ładowanie jest stosowane, aby przyspieszyć czas ładowania początkowej części strony, zmniejszając ilość zasobów ładowanych od razu. Pozwala to na szybsze wyświetlenie treści użytkownikowi, jednocześnie oszczędzając zasoby serwera i przepustowość sieci.
Co to jest leniwe ładowanie elementów IFRAME?
Leniwe ładowanie elementów <iframe> polega na opóźnieniu ładowania zawartości IFRAME do momentu, gdy użytkownik zbliży się do niego podczas przewijania strony. Można to osiągnąć poprzez dodanie atrybutu loading="lazy" do tagu <iframe>, co poprawia wydajność strony.
Czy mogę użyć ładowania leniwego IMG?
Tak, możesz użyć ładowania leniwego dla obrazków (<img>) w HTML, dodając atrybut loading="lazy" do tagu <img>. Dzięki temu obrazek będzie ładowany tylko wtedy, gdy użytkownik przewinie stronę w jego pobliże.
Czy powinienem używać leniwego ładowania?
Tak, powinieneś używać leniwego ładowania, szczególnie na stronach z dużą ilością obrazków lub elementów IFRAME. Leniwe ładowanie poprawia wydajność strony, skracając czas ładowania początkowego i zmniejszając zużycie zasobów sieciowych, co pozytywnie wpływa na doświadczenie użytkownika.
Jak sprawdzić, czy działa leniwe ładowanie?
Aby sprawdzić, czy działa leniwe ładowanie, możesz użyć narzędzi deweloperskich w przeglądarce (klawisz F12). Otwórz zakładkę "Network" i monitoruj ładowanie obrazków lub IFRAME. Powinny one ładować się dopiero wtedy, gdy przewiniesz stronę w ich pobliże. Możesz także zweryfikować, czy atrybut loading="lazy" jest poprawnie ustawiony w kodzie HTML.