Wydajność i Core Web Vitals — szybkie rozwiązanie internetowe
LCP, INP i CLS — cele Google dla tego, jak strona jest rzeczywiście doświadczana
Wstęp
Wydajność nie jest ulepszeniem, które się dodaje na koniec — jest częścią tego, czy rozwiązanie internetowe rzeczywiście działa dla użytkownika. Rozporządzenie dotyczące kształcenia w zakresie tworzenia stron internetowych wymaga, aby uczeń mógł zoptymalizować rozwiązanie internetowe pod względem wydajności technicznej. Google zebrał najważniejsze miary postrzeganej wydajności w trzech metrykach zwanych Core Web Vitals, które są używane zarówno do oceny doświadczenia użytkownika, jak i stanowią sygnał w rankingu wyszukiwarki.
Trzy cele — i granice dla 'dobrego'
Każdy cel ma granicę dla 'dobrego', granicę dla 'złego', i przestrzeń zwaną 'można ulepszyć'. Google ocenia stronę na podstawie 75. percentyla rzeczywistych odwiedzin — to znaczy, że co najmniej trzy z czterech odwiedzin muszą osiągnąć dobrą granicę, zanim strona jako całość zostanie uznana za dobrą na ten cel.
| Cel | Co to mierzy | Dobrze | Źle |
|---|---|---|---|
| LCP (Największe Rysowanie Zawartości) | Jak szybko najwększa widoczna zawartość jest wyświetlana | 2,5 sekund lub mniej | Ponad 4 sekundy |
| INP (Interakcja do następnego farbiowania) | Jak szybko strona wizualnie reaguje na akcję użytkownika | 200 milisekund lub mniej | Ponad 500 milisekund |
| CLS (Cumulative Layout Shift) | Ile widocznej zawartości nieoczekiwanie przesuwa się podczas ładowania | 0,1 lub mniej | Over 0,25 |
LCP — najważniejsza zawartość powinna być wyświetlana szybko
LCP mierzy, kiedy największy i najbardziej widoczny element w widocznym obszarze jest w pełni załadowany — często obraz bohaterski lub nagłówek. Najczęstsze przyczyny słabej LCP to ciężkie, niezoptymalizowane obrazy, wolny serwer i zasoby blokujące renderowanie strony podczas pobierania. Optymalizuj obrazy pod względem rozmiaru i formatu, pozwól na wczesne pobieranie zasobów krytycznych i unikaj czekania na najważniejszą treść, zanim użytkownik patrzy na rzeczy, które jeszcze nie widział.
INP — reakcja na kliknięcie
INP zastąpił w 2024 roku poprzedni cel FID i patrzy szerzej na responsywność: mierzy całą sekwencję od działania użytkownika do wizualnej reakcji strony, w całej wizycie, a nie tylko pierwszej interakcji. Ciężkie zadania JavaScript, które blokują główny wątek, to typowy sprawca — przycisk, który nie reaguje od razu, ponieważ przeglądarka jest zajęta czymś innym. Rozwiązaniem jest podzielenie dużych zadań na mniejsze części i unikanie niepotrzebnie ciężkiej pracy, właśnie gdy użytkownik interaguje.
CLS — gdy zawartość przeskakuje pod oczami użytkownika
CLS występuje, gdy widoczna zawartość strony przesuwa się bez działania użytkownika — klasycznym przykładem jest obraz bez określonych wymiarów, który rezerwuje swoje miejsce dopiero po załadowaniu, przesuwając tekst poniżej. Inny przykład to zawartość, która nagle pojawia się na górze strony, gdy właśnie czytasz lub klikasz. Zarezerwuj miejsce dla obrazów i osadzanej zawartości z góry i unikaj wstawiania nowej zawartości nad tym, co użytkownik już ogląda.
- 01Optymalizuj i skaluj obrazy do rzeczywistego rozmiaru, w którym się wyświetlają
- 02Pozwól pobrać niekrytyczne JavaScript i styling bez blokowania najważniejszej zawartości
- 03Podziel ciężką pracę JavaScript na mniejsze kawałki
- 04Zawsze podawaj szerokość i wysokość obrazów i osadzonej zawartości
- 05Buforuj to, co się często nie zmienia
“Użytkownik nie ocenia twojego kodu — ocenia szybkość, z jaką strona wydaje się gotowa do użytku.”
— Zwykła zasada w wydajności sieci