Jak rozmiar obrazów wpływa na Core Web Vitals

Na które Core Web Vitals wpływają obrazy?

Largest Contentful Paint (LCP) mierzy moment narysowania największego widocznego obrazu lub bloku tekstu. Może nim być wyeksponowane zdjęcie, lecz nie automatycznie logo ani największy plik. Najpierw zidentyfikuj element. Poradnik LCP Google wyjaśnia wykrywanie, pobieranie i renderowanie.

Cumulative Layout Shift (CLS) mierzy nieoczekiwane przesunięcia. Bez zarezerwowanego miejsca obrazy mogą po wczytaniu wypchnąć treść. Poradnik CLS zaleca wymiary pozwalające przeglądarce zachować proporcje miejsca.

Interaction to Next Paint (INP) dotyczy reakcji na działania użytkownika. Kompresja zdjęcia nie naprawia automatycznie wolnego menu ani kosztownej obsługi kliknięcia. Zbadaj je osobno z dokumentacją INP.

Kiedy wynik Core Web Vitals jest dobry?

Tabela przedstawia progi dobrego wyniku z wytycznych Core Web Vitals Google. Wszystkie trzy metryki muszą spełniać wymagania w 75. percentylu rzeczywistych wizyt, osobno dla urządzeń mobilnych i komputerów. Mniejszy obraz lub jeden dobry test laboratoryjny nie oznacza, że strona przechodzi ocenę. Jeśli problemem jest INP, zbadaj opóźnienia interakcji zamiast ponownie kompresować zdjęcie.

Zacznij od widocznego głównego obrazu

Na stronie produktu zbadaj główne zdjęcie, w artykule okładkę lub nagłówek wskazany przez raport. Przed utworzeniem kopii zapisz wielkość pliku, wymiary pikselowe i rozmiar wyświetlania do porównania przed i po.

Jeśli zdjęcie jest zbyt duże dla miejsca, przygotuj mniejsze przez zmianę rozmiaru. Następnie porównaj eksport JPG na WebP. Oceń potrzebne szczegóły produktu i tekst, nie tylko zmniejszenie rozmiaru pliku.

Pozwól przeglądarce wcześniej ładować główny obraz

Nie stosuj leniwego ładowania do obrazu LCP. Nawet mały plik pojawi się późno, gdy skrypty opóźnią jego wykrycie. Poproś twórcę motywu lub strony o sprawdzenie rzeczywistego żądania, jeśli kompresja niewiele pomaga.

Opóźnione ładowanie stosuj selektywnie niżej na stronie. Pierwsze widoczne zdjęcie galerii jest potrzebne od razu; następne mogą docierać, gdy użytkownik się zbliża.

Zidentyfikuj zmierzony obraz LCP na opublikowanej stronie. Powinien być wykrywany wcześnie i nie ładowany z opóźnieniem. Programista może rozważyć fetchpriority="high" dla tego konkretnego obrazu; zastosowanie do całej galerii niweczy priorytet. Sprawdź ponownie żądania sieciowe.

Utrzymaj stabilny układ

Podaj szerokość i wysokość w kodzie oraz zachowaj proporcje w responsywnych stylach. Sprawdź stronę na wąskim ekranie telefonu i szerokim ekranie komputera. Przy celowym kadrowaniu konsekwentnie rezerwuj pole wyświetlanego kadru.

Gdy ruch nie ustępuje, sprawdź bannery, osadzone treści i fonty. Wymiana zdjęcia nie naprawi komunikatu wstawianego nad artykułem po pojawieniu się strony.

Wymiary HTML takie jak width="1200" i height="800" określają proporcje. CSS nadal może zwęzić obraz przez max-width: 100% i height: auto. Sprawdź, czy motyw nie narzuca sprzecznej stałej wysokości. Celowo kadrowana karta potrzebuje odpowiednio zarezerwowanego obszaru.

Jeśli akapit nadal skacze przy pojawieniu się mniejszego pliku, może brakować zarezerwowanego miejsca. Popraw wymiary lub kontener kadrowania i przetestuj ponownie. Stabilna ramka może też zawierać wolny obraz: rezerwacja miejsca nie zmniejsza pliku.

Weryfikuj po jednej zmianie

1. Zapisz URL, urządzenie i problematyczny element.
2. Zmień jeden obraz lub ustawienie ładowania.
3. Potwierdź, że strona żąda nowego pliku, nie starego z pamięci podręcznej.
4. Powtórz test i obejrzyj widok początkowy.
5. Zachowaj zmianę, jeśli jakość i pomiar ją uzasadniają.

Eksport to tylko część wydajności. Kontynuuj z procedurą PageSpeed dla obrazów.