Leniwe ładowanie obrazów: kiedy je stosować, a kiedy go unikać?

Co zmienia leniwe ładowanie?

Leniwe ładowanie, czyli lazy loading, zmienia moment, w którym przeglądarka żąda obrazu. Nie zmienia jego wymiarów, formatu ani kompresji. Na długiej stronie z przepisem początek jest potrzebny od razu, ale użytkownik może nigdy nie dotrzeć do piętnastu zdjęć na końcu. Odłożenie ich pobierania pozwala uniknąć zbędnych początkowych transferów.

To trzy osobne zadania: zmiana rozmiaru usuwa nadmiarowe piksele, kompresja zmniejsza ilość danych, a leniwe ładowanie odkłada żądanie. Duży obraz nadal będzie ciężki, gdy przyjdzie czas na pobranie. Mały też może pojawić się późno, jeśli żądanie zostanie opóźnione.

Przygotuj odpowiednie wymiary za pomocą narzędzia do zmiany rozmiaru i w razie potrzeby porównaj kompresję. Potem wybierz obrazy potrzebne od początku. Poradnik zmniejszania plików omawia przygotowanie; tutaj wybieramy moment ładowania.

Jak zacząć bez programowania?

Nie musisz edytować HTML, by zdecydować, które zdjęcia ładować najpierw. Zacznij od strony produktu lub długiego artykułu. Pierwszy ekran to część widoczna przed przewijaniem.

1. Poszukaj istniejącego ustawienia. W panelu strony sprawdź motyw, obrazy lub wydajność. Szukaj „lazy loading” lub „leniwe ładowanie”. Nazwa i miejsce różnią się między usługami, a niektóre zarządzają tym automatycznie. Jeśli nie znajdziesz opcji, zapytaj opiekuna strony przed instalacją kolejnej wtyczki.
2. Zadbaj o pierwszy ekran. Główne zdjęcie i inne od razu widoczne obrazy powinny ładować się normalnie. Jeśli można ustawić wyjątki, dowiedz się jak. Nie włączaj ogólnej reguły, zanim ustalisz jej wpływ na główne zdjęcie.
3. Wypróbuj zdjęcia niżej. Ilustracje w dalszej części artykułu są dobrym początkiem. Jeśli możesz, użyj podglądu lub strony testowej, potem sprawdź opublikowaną wersję. Galerie testuj osobno, bo można je szybko przeglądać.
4. Sprawdź wygodę czytania. Otwórz stronę na telefonie i komputerze. Czy główne zdjęcie pojawia się szybko? Czy pozostałe nadążają za wolnym i szybkim przewijaniem? Czy tekst przeskakuje po załadowaniu zdjęcia? Wypróbuj też link prosto do niższej sekcji.

Jeśli zauważysz problem, cofnij ostatnią zmianę i poproś o pomoc z tą stroną. Kontrola wzrokowa ujawnia wyraźne opóźnienia i przesunięcia, ale nie dowodzi przyspieszenia. Potrzebne są pomiary; sekcja testowania wskazuje, co zapisywać.

Możesz wysłać taką prośbę: „Sprawdź leniwe ładowanie na tej stronie. Główne zdjęcie i obrazy na pierwszym ekranie niech ładują się normalnie. Odłóż odpowiednie zdjęcia niżej i zarezerwuj ich miejsce, żeby tekst nie przeskakiwał. Przetestuj telefon i komputer oraz porównaj czas ładowania głównego zdjęcia przed zmianą i po niej”. Dodaj link i wskaż obrazy pojawiające się późno.

Które obrazy można załadować później?

Otwórz typową stronę bez przewijania. Zapisz, które obrazy widać i które pomagają zrozumieć treść. Powtórz na wąskim telefonie i dużym ekranie: baner, nagłówek i galeria produktów mogą znaleźć się w innych miejscach.

Decyduj na podstawie rzeczywistego położenia, nie nazwy pliku czy kolejności przesyłania. Pierwszy obraz w bibliotece nie musi być pierwszy na stronie. Zdjęcie pod długim wstępem może też trafić na pierwszy ekran w innym szablonie.

Jeśli ten sam obraz od razu widać na komputerze, a na telefonie jest niżej, normalne ładowanie to bezpieczniejszy początek. loading nie oferuje zapytania medialnego jak picture. Nie dodawaj skryptu zależnego od rozmiaru ekranu tylko po to, by oszczędzić jedno żądanie. Najpierw sprawdź, czy jego koszt jest istotny.

Ukryte zdjęcie galerii niekoniecznie zostanie pobrane później. Skrypt galerii może wczytywać je z wyprzedzeniem niezależnie od atrybutów. Sprawdź szybkie przechodzenie i powrót do poprzednich zdjęć, nie tylko przewijanie strony.

Dlaczego główny obraz nie powinien czekać?

Largest Contentful Paint (LCP) mierzy, jak szybko pojawia się największy element treści na pierwszym ekranie. Zwykle jest to główne zdjęcie, ale może nim być blok tekstu. Znajdź go w raporcie wydajności. Jeśli to obraz, nie opóźniaj go. Adres obecny w początkowym HTML pozwala przeglądarce zacząć wcześniej; dodanie go dopiero przez skrypt może wydłużyć oczekiwanie.

Usunięcie lazy loading nie rozwiązuje wszystkich przyczyn opóźnienia. Odpowiedź serwera, wielkość pobieranego pliku i wyświetlanie nadal mogą mieć znaczenie. Poradnik Google dotyczący optymalizacji LCP rozdziela te etapy. Poradnik Pixilo o Core Web Vitals odróżnia problemy ładowania od przesunięć układu.

Stosuj fetchpriority="high" wybiórczo dla obrazu o potwierdzonym znaczeniu. Wysoki priorytet całej galerii nie tworzy użytecznej kolejności. Nie usuwa też opóźnienia wynikającego z leniwego ładowania.

Sprawdzenie działania CMS i galerii

Przed instalacją wtyczki zbadaj opublikowany obraz. CMS, motyw lub usługa optymalizacji mogą już dodawać atrybut. Patrz na wynikowy HTML i rzeczywiste żądanie, nie tylko opcję o nazwie „optymalizacja obrazów”.

Zarządzaj zachowaniem w jednym miejscu. Jeśli skrypt zmienia adresy, otacza obrazy dodatkowymi elementami lub ładuje galerię z wyprzedzeniem, drugi mechanizm utrudni diagnozę. Zacznij od jednej strony i wyłącz opóźnianie głównego zdjęcia.

Tło CSS to osobny przypadek: atrybut img nie działa na deklarację tła. Poproś opiekuna szablonu o sprawdzenie, jak przeglądarka odnajduje ten zasób. Wklejenie HTML do bloku treści nie zmienia tła motywu.

Dodawanie natywnego lazy loading w HTML

Dla ilustracji wyraźnie poniżej pierwszego ekranu zachowaj prawdziwy adres w src i dodaj atrybut ładowania. Zastąp przykładowe ścieżki własnymi plikami. Tekst alternatywny opisuje zawartość obrazu; instrukcje przepisu zostają w tekście. Obraz wyłącznie dekoracyjny powinien mieć alt="".

<img
  src="/images/recipe-step-04.webp"
  width="1200"
  height="800"
  loading="lazy"
  alt="Ciasto złożone nad nadzieniem, z jeszcze otwartymi brzegami"
>

Zdjęcie zmierzone jako LCP na pierwszym ekranie wymaga innego ustawienia:

<img
  src="/images/finished-loaf.webp"
  width="1200"
  height="800"
  loading="eager"
  fetchpriority="high"
  alt="Świeżo upieczony chleb ze złocistą skórką"
>

eager oznacza normalne ładowanie, zwykle tak jak pominięcie loading. Jawna wartość pomaga, gdy szablon inaczej dodaje lazy loading automatycznie. Nie oznacza natychmiastowego zakończenia pobierania. Dokumentacja elementu obrazu w MDN wyjaśnia atrybuty.

Przeglądarka ustala, kiedy obraz jest dostatecznie blisko, by go zażądać, czasem zanim będzie widoczny. Żądanie poza ekranem nie dowodzi błędu. Nie opieraj oceny na stałej odległości przewijania. Przeczytaj poradnik web.dev o natywnym lazy loading.

Rezerwowanie miejsca i zachowanie wariantów

W width i height wpisz wymiary pliku źródłowego w pikselach, tutaj 1200 × 800. Określają proporcje; CSS może wyświetlić obraz mniejszy. Skopiowane do innego kształtu zarezerwują niewłaściwe miejsce. Przy skalowaniu bez kadrowania:

.article-image {
  display: block;
  max-width: 100%;
  height: auto;
}

Dodaj class="article-image" lub dostosuj istniejącą regułę. Przy stałym kadrze zarezerwuj wyświetlany obszar. Sprawdź rzeczywisty układ, bo inne reguły CSS mogą nadpisać ustawienia.

Lazy loading nie zastępuje srcset i sizes. Zachowaj przydatne warianty do wyboru pliku. W picture ustawienie ładowania należy do img. Poradnik o obrazach responsywnych zawiera pełne przykłady.

Testowanie opublikowanej zmiany

1. Zapisz punkt odniesienia. Zanotuj URL, wielkość okna, element i czas LCP, początek żądania głównego obrazu i dane obrazów przesłane przed przewijaniem. Określ, czy to pierwsza wizyta, czy test z pamięcią podręczną.
2. Sprawdź żądania. Otwórz Network przed odświeżeniem i filtruj obrazy. Zapisz pliki żądane na początku oraz moment rozpoczęcia.
3. Zmień jedną regułę. Usuń opóźnienie głównego zdjęcia lub włącz je dla późniejszych ilustracji.
4. Potwierdź opublikowany wynik. Po potrzebnym odświeżeniu pamięci podręcznej sprawdź atrybuty i adresy. Lokalna edycja nie zmienia jeszcze publicznej strony.
5. Powtórz i przewijaj. Porównaj równoważne próby. Przewijaj wolno i szybko, sprawdź galerie i linki do sekcji. Szukaj pustych miejsc i przesunięć.

„Disable cache” wyłącza pamięć podręczną przeglądarki, gdy narzędzia programistyczne są otwarte, ale nie czyści pamięci serwera ani CDN. Dokumentacja Chrome dotycząca Network wyjaśnia analizę. Zachowaj te same warunki sieci i porównaj kilka prób, nie tylko najlepszą.

Zaczynaj od góry przy tym samym oknie, ustawieniach sieci i czasie obserwacji przed przewijaniem. Najpierw zapisz początkowe wyniki, by kolejne żądania nie zniekształciły porównania. Przywrócona pozycja przewijania może też od razu uruchomić obraz niżej.

Dobra zmiana szybko udostępnia początek i pokazuje dalsze obrazy wtedy, gdy są potrzebne. Mniej początkowych żądań pomaga tylko przy płynnym czytaniu i nawigacji. Użyj poradnika PageSpeed do porównania wyników.

Przykład: okładka i dwanaście ilustracji

Długi artykuł ma okładkę na pierwszym ekranie i dwanaście zdjęć niżej. Ogólna reguła opóźnia wszystkie trzynaście. Na telefonie okładka pojawia się późno mimo lekkiego pliku. To przykładowa procedura, a nie zmierzony wzrost szybkości.

Sprawdź, czy okładka jest elementem LCP. Usuń jej opóźnienie i przetestuj tylko tę zmianę. Zachowaj wybiórcze opóźnianie oraz miejsce dla dalszych obrazów. Jeśli pierwsza ilustracja jest widoczna od razu na komputerze, również ładuj ją normalnie.

Po publikacji porównaj start żądania i LCP w podobnych warunkach. Sprawdź wszystkie dwanaście zdjęć i link do sekcji. Jeśli okładka dociera wcześnie, lecz pozostaje ukryta przez animację, zbadaj opóźnienie wyświetlania zamiast znów zmieniać atrybut.

Zachowanie dostępności obrazów dla wyszukiwarek

Używaj trafnego tekstu alternatywnego i prawdziwego adresu. Skrypt pozostawiający jedynie element zastępczy do kliknięcia lub przewinięcia wymaga sprawdzenia. Wskazówki Google dotyczące opóźnionej treści zalecają ładowanie przy wejściu w widoczny obszar bez uzależnienia od zdarzenia interakcji.

W razie potrzeby sprawdź wyrenderowaną stronę w inspekcji adresu URL w Search Console. Czy ważne adresy obrazów występują w wyrenderowanym HTML? Ustawienie wydajności nie gwarantuje indeksowania wszystkich obrazów ani lepszych pozycji.

Najczęstsze pytania

Czy wszystkie obrazy powinny ładować się leniwie?

Nie. Wybierz według położenia i znaczenia. Potrzebne od razu, szczególnie obraz LCP, nie powinny czekać.

Czy plik będzie mniejszy?

Nie, zmienia się moment żądania. Zmniejsz lub skompresuj osobną kopię, jeśli problemem są wymiary lub wielkość pliku.

Czy potrzebuję biblioteki JavaScript?

Nie do natywnego ładowania zwykłych obrazów HTML. Przy wyłączonym JavaScript opóźnianie nie działa, a obrazy z prawdziwymi adresami ładują się normalnie. Skrypt przechowujący jedyny adres w data-src potrzebuje rozwiązania zastępczego. Własny mechanizm wybieraj dla konkretnej potrzeby i dokładnie testuj.

Dlaczego niektóre obrazy poza ekranem ładują się od razu?

Mogą być dostatecznie blisko albo ładowane z wyprzedzeniem przez inny komponent. Sprawdź inicjatora żądania i ustawienia galerii lub motywu, zanim uznasz to za błąd.

Czy asynchroniczne dekodowanie zastępuje lazy loading?

Nie. decoding dotyczy dekodowania i wyświetlania, a loading opóźniania. Jedno ustawienie nie potwierdza drugiego.

Podsumuj za pomocąChatGPT (otwiera się w nowej karcie)Grok (otwiera się w nowej karcie)Google (otwiera się w nowej karcie)Perplexity (otwiera się w nowej karcie)Claude (otwiera się w nowej karcie)