Lighthouse i Core Web Vitals: szybka strona poza wynikiem 100

Co oznaczają LCP, INP i CLS?

LCP odnosi się do pojawienia się największego istotnego elementu w obszarze widoku. INP opisuje opóźnienie reakcji na interakcje, a CLS nieoczekiwane przesunięcia układu. Według web.dev progi dobrego wyniku to odpowiednio do 2,5 sekundy, do 200 milisekund oraz do 0,1. Ocena terenowa opiera się na 75. percentylu wizyt, z podziałem na urządzenia.

Te wskaźniki pomagają znaleźć problem, ale nie opisują całego doświadczenia. Formularz może być szybki i niezrozumiały. Koszyk może nie przeskakiwać, a nadal pokazywać błędną cenę. Dlatego pomiar wydajności powinien uzupełniać test ukończenia zadania, a nie go zastępować.

Kontekst i materiały: web.dev: Web Vitals

Najpierw sprawdź, co użytkownik musi pobrać

Duży film w hero, obrazy w niewłaściwym rozmiarze i zbędny JavaScript mogą opóźniać pierwsze użycie. Ustal, co jest konieczne na początku, a co może pojawić się później. Głównej treści nie powinien blokować efekt dekoracyjny. Dla materiału wideo przygotuj odpowiedni podgląd i rozsądny sposób ładowania.

Przykład demonstracyjny: strona usługowa może od razu pokazać nagłówek, ofertę i przycisk kontaktu, a film uruchomić po przygotowaniu widoku. Nie oznacza to rezygnacji z charakteru wizualnego. Oznacza zaprojektowanie kolejności, w której estetyka wspiera orientację zamiast opóźniać dostęp do informacji.

Interakcje i ruch wymagają osobnego sprawdzenia

Na słabszym urządzeniu rozbudowana animacja może zajmować zasoby potrzebne do obsługi kliknięcia. Zbadaj menu, filtr, formularz i przejścia między stronami. Długie zadania JavaScript mogą powodować wrażenie, że interfejs nie odpowiada. Ogranicz pracę wykonywaną przy każdym przewinięciu i nie uruchamiaj efektów poza potrzebnym zakresem.

Zachowaj preferencję ograniczonego ruchu i możliwość zatrzymania dekoracyjnego materiału, gdy jest potrzebna. Zarezerwuj miejsce na media, aby tekst nie przesuwał się po załadowaniu. Przy przejściach dopilnuj obsługi klawiatury i fokusu. Efekt powinien kończyć się przewidywalnym, gotowym do użycia widokiem.

Jak podejmować decyzje po teście?

Testuj reprezentatywne podstrony, nie tylko stronę główną. Artykuł, karta usługi i formularz mogą mieć inne problemy. Zapisz warunki pomiaru i powtórz próbę, jeśli wynik wyraźnie się waha. Porównuj zmiany w podobnym środowisku. Lokalny serwer nie pokazuje jeszcze wpływu docelowego hostingu i sieci użytkownika.

Po publikacji sprawdź dostępne dane terenowe i najczęstsze ścieżki. Jeśli ruch jest niewielki, danych może brakować; nie traktuj tego jako wyniku zerowego. Ustal budżet zasobów dla kolejnych zmian. Wydajność łatwiej utrzymać, gdy każda nowa integracja marketingowa lub animacja ma uzasadnienie i znany koszt.