Dlaczego obrazy na mojej stronie ładują się wolno?

Zacznij od jednej wolnej strony

Otwórz opublikowaną stronę na telefonie i komputerze. Zwróć uwagę, który obraz pojawia się późno, czy cała strona działa wolno i czy tekst przesuwa się, gdy pojawiają się obrazy.

1. Zapisz adres strony i obraz, którego dotyczy problem.
2. Uruchom test w PageSpeed Insights i zachowaj uwagi dotyczące obrazów.
3. Jeśli witryną zajmuje się ktoś inny, przekaż tej osobie adres i raport. Poproś o sprawdzenie tego obrazu przed zmianą całej biblioteki.

Kolejne sekcje pomogą wybrać następny krok. Przy dokładniejszym badaniu panel Network w przeglądarce pokazuje, jakie pliki pobiera strona i ile trwa każde żądanie.

Dopasuj kontrolę do objawu

Opcjonalnie: zbadaj obraz w panelu Network

Na komputerze otwórz stronę w Chrome. Otwórz narzędzia deweloperskie skrótem Ctrl + Shift + J w Windows lub Linux albo Command + Option + J na Macu. Wybierz kartę Network i wykonaj te kroki:

1. Wybierz filtr obrazów Img.
2. Włącz Disable cache i odśwież stronę z otwartym panelem. Dzięki temu sprawdzisz nowe pobranie zamiast kopii zapisanej przez przeglądarkę.
3. Wybierz żądanie dotyczące problematycznego obrazu. Sprawdź podgląd, aby upewnić się, że to właściwy plik.
4. Zapisz adres obrazu i rozmiar pliku.
5. Otwórz Timing, aby sprawdzić, na co żądanie zużywa czas, a następnie Initiator, aby zobaczyć, co je uruchomiło.

To ustawienie przeglądarki nie czyści pamięci podręcznej serwera witryny ani CDN. CDN dostarcza pliki witryny z rozproszonych serwerów i może przechowywać własne kopie.

Przy późnym starcie sprawdź, czy żądanie uruchamia HTML, skrypt czy leniwe ładowanie. Przy wczesnym starcie i długim oczekiwaniu porównaj inny obraz oraz dokument HTML. Gdy plik przychodzi szybko, ale nie widać obrazu, zbadaj CSS, animacje i JavaScript. Popraw etap, który rzeczywiście zabiera czas.

Timing pokazuje, na co żądanie zużywa czas, na przykład czekanie na serwer lub pobieranie. Initiator pokazuje, co je uruchomiło, np. HTML lub skrypt. To odróżnia duży plik od późnego żądania.

Dokumentacja panelu Network w Chrome

W Timing odróżnij Queueing lub Stalled, Waiting for server response (TTFB) oraz Content Download. Czas przed wysłaniem żądania może wynikać z planowania pracy przeglądarki lub nawiązywania połączenia; nie jest wyłącznie pracą serwera. TTFB obejmuje także czas przesyłu w sieci, więc długie oczekiwanie samo w sobie nie dowodzi problemu z hostingiem. Długie pobieranie wskazuje na ilość danych i szybkość połączenia. Porównaj kilka żądań w tych samych warunkach.

Zmniejsz niepotrzebnie duże pliki

Jeśli mała karta pobiera ogromne zdjęcie, zacznij od wymiarów. Przygotuj proporcjonalną kopię narzędziem do zmiany rozmiaru, a następnie porównaj WebP lub AVIF, jeśli system dostarczania je obsługuje. W wyborze pomoże poradnik o formatach.

Oceń cały pierwszy ekran. Dziesiątki małych miniatur pobieranych jednocześnie mogą łącznie przesyłać zbyt dużo danych. Ustal, które są potrzebne od razu, a które mogą poczekać, aż odwiedzający przewinie stronę bliżej nich.

Popraw czas ładowania, gdy rozmiar nie jest problemem

Nie pozwól, by leniwe ładowanie opóźniało najważniejszy widoczny obraz. Jeśli czeka on na animację lub skrypt, przeanalizuj kolejność z programistą. Poradnik Google o LCP rozróżnia opóźnienia ładowania i renderowania.

Porównaj kilka żądań, zanim obwinisz format. Jeśli HTML i inne zasoby także długo czekają, sprawdź hosting i dostarczanie treści. Dziesięć nowych eksportów raczej nie skróci oczekiwania przed odpowiedzią serwera.

Powtórz test w porównywalnych warunkach

Kolejna wizyta może być szybsza dzięki pamięci podręcznej. Zapisz, czy ładowanie korzysta z zapisanych danych, i zachowaj to samo urządzenie oraz sieć. Sprawdź też wąski ekran, aby wykryć brakujący wariant mobilny.

1. Zapisz URL wolnej strony i żądanie dotyczące obrazu.
2. Zmień plik lub sposób jego ładowania.
3. Potwierdź, że dostarczana jest nowa wersja.
4. Powtórz pomiar i sprawdź jakość obrazu.

Oceń pierwszy widok galerii łącznie: obraz główny i dwadzieścia miniatur mogą potrzebować różnych zasad. Nadaj priorytet temu, co widoczne, a resztę odłóż tam, gdzie to właściwe. Przewiń całą galerię i wróć, sprawdzając spóźnione obrazy oraz puste miejsca.