Na czym polega leniwe ładowanie
Obrazy często stanowią znaczną część danych pobieranych przez przeglądarkę. Jeśli długa strona zawiera kilkadziesiąt zdjęć, pobieranie wszystkich od razu może konkurować o zasoby z treścią widoczną na początku. Leniwe ładowanie pozwala odroczyć pobranie wybranych grafik, dopóki użytkownik nie zbliży się do nich podczas przewijania. Nie oznacza to jednak, że każda grafika powinna czekać.
Najprostszy wariant dla obrazu w kodzie HTML to atrybut loading="lazy" dodany do elementu img. Przeglądarka decyduje, kiedy rozpocząć pobieranie; nie trzeba samodzielnie wykrywać każdej zmiany położenia strony. To wskazówka dla przeglądarki, a nie gwarancja konkretnego momentu pobrania. Jej działanie warto oceniać na rzeczywistej podstronie, zwłaszcza jeśli układ zmienia się między telefonem a komputerem.
Co warto odroczyć
Dobrymi kandydatami są obrazy położone wyraźnie poniżej pierwszego ekranu: dalsze zdjęcia w artykule, kolejne rzędy produktów w katalogu czy grafiki w dolnej części strony kategorii. Użytkownik może do nich w ogóle nie dotrzeć, więc pobranie ich przy wejściu na stronę bywa zbędne. Podobnie można potraktować miniatury w dalszej części długiej listy, o ile po przewinięciu pojawiają się bez zauważalnego oczekiwania.
Nie wybieraj obrazów do odroczenia wyłącznie według numeru w kodzie. Układ mobilny może umieszczać dany element znacznie wyżej niż układ na dużym ekranie. Ważne jest też miejsce, w którym użytkownik ląduje: po otwarciu odnośnika prowadzącego do fragmentu strony od razu może zobaczyć treść położoną niżej. Dlatego przed masowym dodaniem loading="lazy" obejrzyj różne szablony i szerokości ekranu.
Czego nie opóźniać
Nie ustawiaj leniwego ładowania dla obrazu, który jest widoczny zaraz po otwarciu strony. Dotyczy to zwłaszcza dużej grafiki otwierającej artykuł, głównego zdjęcia produktu lub banera będącego istotną częścią pierwszego ekranu. Jeżeli taki obraz zostanie pobrany późno, użytkownik może długo widzieć pustą przestrzeń, a strona będzie sprawiać wrażenie niedokończonej. Dla kluczowej grafiki lepszym punktem wyjścia jest zwykłe ładowanie; w uzasadnionych przypadkach można dodatkowo rozważyć fetchpriority="high".
Uważaj też na logo, ikony i zdjęcia znajdujące się w nagłówku lub nawigacji. Zwykle są małe, ale ich opóźnienie może pogorszyć odbiór strony. Nie nadaj wszystkim obrazom wysokiego priorytetu: wtedy przestaje on pomagać w wyróżnieniu najważniejszego zasobu. Decyzję podejmuj dla konkretnego szablonu, a nie jednym ustawieniem narzuconym całej witrynie.
Wdrożenie bez zbędnych niespodzianek
Sam atrybut loading="lazy" nie zastępuje przygotowania obrazów. Dopasuj rozmiar pliku do miejsca wyświetlania, korzystaj z odpowiednich formatów i, gdy to możliwe, udostępnij warianty przez srcset oraz sizes. Podaj również wymiary obrazu w atrybutach width i height lub zarezerwuj dla niego przestrzeń w CSS. Dzięki temu treść nie będzie przesuwała się gwałtownie, gdy zdjęcie zostanie pobrane.
Jeśli używasz skryptu zamiast natywnego atrybutu, sprawdź, czy obrazy nadal mają poprawne adresy i czy nie pozostają niewidoczne po błędzie skryptu. Szczególnej uwagi wymagają obrazy ustawione jako tło w CSS: atrybut loading na elemencie img ich nie dotyczy. Leniwe ładowanie nie powinno też odbierać obrazom opisów alternatywnych tam, gdzie są potrzebne do zrozumienia treści. W typowych wdrożeniach warto zacząć od rozwiązania natywnego i dodawać dodatkowy kod dopiero wtedy, gdy istnieje konkretna potrzeba.
Krótka checklista po zmianie
Otwórz najważniejsze typy podstron na telefonie i komputerze. Sprawdź, czy główny obraz pojawia się szybko, a zdjęcia niżej doładowują się przed wejściem w pole widzenia. Przewiń stronę szybko i powoli; zwróć uwagę na puste miejsca, nagłe przesunięcia treści oraz obrazy, które nie pojawiają się wcale. Powtórz kontrolę na wolniejszym połączeniu, ponieważ przy szybkim łączu opóźnienia łatwo przeoczyć.
Następnie porównaj zachowanie strony przed zmianą i po niej, zamiast zakładać, że samo włączenie leniwego ładowania przyniosło korzyść. W narzędziach przeglądarki możesz obejrzeć kolejność pobierania obrazów i sprawdzić, czy zasoby z dołu strony nie konkurują na starcie z tymi widocznymi od razu. Jeśli ważna grafika została opóźniona, usuń z niej loading="lazy" i przetestuj ponownie. Celem jest rozsądne ustalenie kolejności ładowania, a nie maksymalna liczba obrazów oznaczonych jako leniwe.
