Core Web Vitals pomagają rozmawiać o jakości doświadczenia użytkownika na konkretnych przykładach. LCP dotyczy szybkości wyświetlenia głównej treści, INP reakcji na działanie użytkownika, a CLS stabilności układu. Same wyniki nie zastępują oceny strony, ale wskazują miejsca, w których użytkownik może czekać, klikać bez odpowiedzi albo tracić pozycję elementu.
Najpierw zmierz, potem optymalizuj
Wynik laboratoryjny i dane rzeczywistych użytkowników odpowiadają na różne pytania. Test kontrolowany pomaga znaleźć przyczynę, a dane terenowe pokazują, co dzieje się na urządzeniach i sieciach odwiedzających. Przed zmianami warto zapisać URL, urządzenie, wersję i najcięższe zasoby, aby sprawdzić, czy poprawa nie była przypadkowa.
Budżet zasobów
Każdy obraz, arkusz stylów, font i skrypt ma koszt pobrania, parsowania albo wykonania. Dla strony firmowej sensowny budżet oznacza między innymi: jeden główny obraz z właściwym rozmiarem, lokalne fonty, ograniczenie bibliotek, brak skryptów blokujących renderowanie oraz ładowanie elementów poniżej pierwszego ekranu dopiero wtedy, gdy są potrzebne.
Trzy praktyczne obszary poprawy
- LCP: zoptymalizuj główny obraz, preconnect tylko tam, gdzie jest potrzebny, i nie blokuj go ciężkim JavaScriptem.
- INP: skracaj zadania na głównym wątku, ogranicz listenery i przeliczanie układu po kliknięciu.
- CLS: rezerwuj miejsce na obrazy, reklamy i fonty, aby układ nie przesuwał się po załadowaniu.
Ważne: wynik 100 w narzędziu laboratoryjnym jest użytecznym celem kontroli wdrożenia, ale nie jest gwarancją stałego wyniku dla każdej sieci i każdego urządzenia.
Największą poprawę zwykle daje usunięcie niepotrzebnego zasobu, a nie dołożenie kolejnej warstwy optymalizacji. Dlatego wydajność powinna być kryterium projektu od początku. W FAQ utilite.io opisujemy także podejście do lekkich stron bez zbędnych systemów i opłat.