Jak naprawić dostarczanie obrazów w PageSpeed Insights

1. 01Otwórz problematyczną stronę w PageSpeed Insights lub Lighthouse. Wybierz raport mobilny albo komputerowy, rozwiń informację o dostarczaniu obrazów i zapisz wskazany URL oraz sugerowaną zmianę.
2. 02Znajdź obraz na stronie. W narzędziach deweloperskich porównaj pobrany obraz z wymiarami wyświetlania, uwzględniając gęstość ekranu. Sprawdź wybrane źródło, nie tylko oryginał w bibliotece mediów.
3. 03Jeśli dostarczany obraz ma za dużo pikseli, najpierw popraw responsywne rozmiary lub ustawienia motywu. Jeśli wymiary pasują, porównaj kompresję lub obsługiwany format alternatywny.
4. 04Przygotuj w edytorze kopię o potrzebnych wymiarach. Dla odpowiednich plików użyj kompresora obrazów Bitinz i sprawdź tekst, krawędzie, przezroczystość oraz gradienty przed zastąpieniem czegokolwiek.
5. 05Opublikuj nowy obraz lub zmianę szablonu. Sprawdź, czy strona pobiera nową wersję zamiast starej z pamięci podręcznej, i powtórz raport z tym samym ustawieniem urządzenia.

Chrome szacuje oszczędność na podstawie rozmiaru pobierania i wydajnego stosunku bajtów do pikseli danego formatu. Obrazy z szacowaną oszczędnością poniżej 4 KiB nie są oznaczane. To próg raportowania, nie zalecany maksymalny rozmiar obrazu.

Lighthouse 13 zastąpił starsze audyty obrazów tą informacją; Lighthouse 12 wcześniej ustawił widok informacji jako domyślny. Ostrzeżenia o formacie, nadmiarowych wymiarach i ciężkich animacjach mogą wymagać różnych działań. Szerszy proces opisuje poradnik kompresji obrazów dla witryny.

• WordPress: sprawdź rozmiar wybrany w bloku lub motywie oraz faktyczne znaczniki srcset i sizes. WordPress tworzy warianty responsywne, ale własny szablon lub niedokładny opis układu nadal może dostarczać niewłaściwy rozmiar. Zmiana samego oryginału może pozostawić starsze wygenerowane kopie w użyciu.
• Shopify: obrazy sklepu są już optymalizowane przez CDN Shopify, także pod kątem formatu. Shopify podaje, że ręczna kompresja przed wysłaniem jest zbędna. Przy ostrzeżeniu sprawdź szerokość żądaną przez motyw i znaczniki responsywne zamiast wielokrotnie pogarszać źródło. Twórca motywu może sprawdzić image_url i image_tag.
• Next.js: użyj ustawień responsywnych komponentu Image i ustaw sizes zgodnie z rzeczywistym układem, zwłaszcza z fill. Bez odpowiedniej wartości wąski obraz może zostać potraktowany jak szerokość całego widoku i pobrany w większym wariancie. Sama zmiana jakości nie poprawia tego niedopasowania.

Zachowaj edytowalny oryginał. Dla samodzielnie serwowanych obrazów porównaj rzeczywisty rozmiar i wygląd przygotowanego pliku; pomoże porównanie JPG, PNG i WebP. Bitinz nie zmienia wymiarów obrazów. Konwersja WebP może powiększyć plik, więc zachowaj wersję właściwą dla strony.

Przy regularnej publikacji API dla deweloperów może przetwarzać pliki z kontem i miesięcznym limitem. Nie naprawia znaczników motywu ani układu responsywnego. Po uruchomieniu automatyzacji ponownie sprawdź dostarczaną stronę.

• Oznaczony URL odpowiada zmienionemu obrazowi i wersji.
• Przeglądarka wybiera odpowiednie źródło dla różnych ekranów.
• Kompresja zachowuje użyteczne szczegóły, przezroczystość i łagodne gradienty.
• Niewłaściwe leniwe ładowanie nie opóźnia głównego widocznego obrazu.
• Nowy raport używa tego samego urządzenia; sprawdzono też rzeczywisty wygląd i ładowanie strony.