Jak zoptymalizować obrazy pod kątem Google PageSpeed

Zapisz przydatny punkt odniesienia

Otwórz PageSpeed Insights, wpisz publiczny adres strony, którą chcesz sprawdzić, i uruchom test dla urządzenia mobilnego lub komputera.

1. Testuj opublikowany URL z dokładną ścieżką.
2. Zapisz, czy chodzi o telefon, czy komputer.
3. Zanotuj wskazany obraz i jego obecny adres.
4. Zachowaj wymiary oraz rozmiar pliku razem z raportem.
5. Określ cel: rozmiar, wykrywanie obrazu, stabilność układu lub inny problem.

Przed szerokimi zmianami wybierz reprezentatywną stronę: produkt ze zwykłą galerią albo artykuł z typową grafiką główną. Strona główna nie opisuje automatycznie działania wszystkich szablonów.

Wybierz celową poprawkę

Jeśli dostarczany obraz jest zbyt duży względem miejsca wyświetlania, przygotuj odpowiednie warianty. Jeśli problemem jest kodowanie, porównaj WebP przez JPG na WebP lub PNG na WebP.

Jeśli układ przesuwa się po pojawieniu się obrazu, zarezerwuj dla niego miejsce. Jeśli główny obraz jest pobierany zbyt późno, sprawdź, jak przeglądarka go wykrywa. Różnice wyjaśnia poradnik o Core Web Vitals.

Zrozum dwa rodzaje danych

PageSpeed Insights łączy test laboratoryjny Lighthouse z danymi rzeczywistych użytkowników, jeśli są dostępne. Obejmują one ostatnie 28 dni i mogą dotyczyć wszystkich stron korzystających z tego samego protokołu, nazwy hosta i portu, zamiast jednej strony. Małe witryny mogą mieć zbyt mało danych; nie oznacza to nieudanego testu. Zobacz dokumentację PageSpeed Google.

Nowy eksport może wpłynąć na następny test laboratoryjny, natomiast dane historyczne nie zaczną od razu odzwierciedlać wyłącznie zmienionej strony. Zapisz, którą część raportu porównujesz, aby nie mylić natychmiastowej poprawy testu z doświadczeniem wszystkich użytkowników.

Sprawdź, czy dane terenowe dotyczą tego adresu URL, czy całego źródła, czyli origin. Origin obejmuje strony z tym samym protokołem, nazwą hosta i portem; jego dane nie potwierdzają poprawy jednej zmienionej strony produktu. Oddziel porównania laboratoryjne konkretnej strony od tego szerszego obrazu. Odróżnij też szacowaną oszczędność bajtów od zmierzonej poprawy LCP: mniejszy obraz nie musi pojawiać się wcześniej.

Potwierdź, że zmiana jest opublikowana

Opublikuj plik i w razie potrzeby zaktualizuj odwołanie do niego. Sprawdź rzeczywiste żądanie przeglądarki. Lokalny eksport nie zmienia niczego dla odwiedzających. Jeśli nadal dostarczana jest stara wersja, sprawdź pamięć podręczną i wygenerowane warianty.

Powtórz test dla tego samego URL i tej samej kategorii urządzenia. Ponownie sprawdź niespodziewane wahania i porównuj konkretny problem, nie tylko punkty. Nie zmieniaj naraz hostingu, skryptów i wszystkich obrazów, jeśli chcesz wiedzieć, co pomogło.

Kiedy inne ograniczenia są ważniejsze

Po rozwiązaniu problemów z obrazami sprawdź pozostałe opóźnienia. Wolne odpowiedzi, ciężkie skrypty lub późne renderowanie mogą dominować. Dalsza kompresja pogorszy wtedy obrazy bez usunięcia przyczyny.

Zapisz stronę, oryginał, plik zastępczy i zaobserwowany wynik. Dzięki temu proces można powtórzyć i zauważyć pogorszenie po zmianie motywu lub układu.

Przykład: od raportu do poprawki

Załóżmy, że raport mobilny wskazuje zbyt duże zdjęcie produktu. Zapisz raport, adres strony i obrazu oraz wymiary wyświetlania. Opublikuj mniejszą kopię z tym samym kadrem na stronie testowej i potwierdź żądanie przed pomiarem. To przykład procesu, nie zmierzona poprawa punktacji.

Notuj datę, kategorię urządzenia, wymiary, rozmiar pliku, LCP, przesunięcia układu i jakość. Powtórz porównywalne testy, uwzględniając rozrzut, zamiast zestawiać najlepszy nowy z najgorszym starym. Mniejszy plik bez zmiany LCP może oznaczać dominację innego etapu.

Zdecyduj, czy zachować zmianę

Zachowaj poprawkę, gdy rozwiązuje problem bez pogorszenia detali, tekstu i układu. Gdy żądanie nadal zaczyna się późno, zbadaj wykrywanie i ładowanie. Jeśli plik dotarł, ale jest niewidoczny, sprawdź renderowanie i efekty pojawiania. Sama kompresja nie rozwiąże tych opóźnień.