Largest Contentful Paint (LCP)
Largest Contentful Paint to wskaźnik, który odpowiada za pierwsze wrażenie dotyczące szybkości strony. Nie mierzy on czasu ładowania całej witryny od A do Z, ponieważ użytkownik nie musi widzieć stopki na dole strony, aby zacząć z niej korzystać. LCP mierzy czas potrzebny na wyświetlenie największego elementu wizualnego w obszarze, który widzimy na ekranie bez przewijania. Zazwyczaj jest to zdjęcie główne produktu, duży baner reklamowy lub duży blok tekstu nagłówkowego.
Skąd bierze się wynik LCP?
Ocenie podlega czas od momentu wpisania adresu strony do pełnego wyrenderowania wspomnianego elementu.
Słaby wynik LCP pojawia się najczęściej wtedy, gdy:
Serwer potrzebuje zbyt dużo czasu, aby w ogóle wysłać pierwsze dane do przeglądarki.
Główny element wizualny (np. zdjęcie) jest zbyt ciężki i pobiera się zbyt wolno przez sieć.
Przeglądarka najpierw pobiera inne, niewidoczne dla użytkownika elementy (np. skrypty śledzące), zamiast w pierwszej kolejności zająć się renderowaniem tego, co najważniejsze dla oka.
Interaction to Next Paint (INP)
Interaction to Next Paint to metryka, która bada responsywność witryny podczas całej wizyty użytkownika. Z perspektywy biznesowej to kluczowy wskaźnik – ocenia on, czy strona nie „zamraża się”, gdy użytkownik próbuje wejść z nią w interakcję, na przykład klikając w menu, rozwijając koszyk czy wpisując dane w formularzu dostawy.
Skąd bierze się wynik INP?
Google mierzy czas, jaki upływa od momentu fizycznego działania użytkownika (kliknięcie, tapnięcie w ekran telefonu) do momentu, w którym strona realnie pokazuje wizualny efekt tej akcji. Końcowy wynik INP to najgorszy, czyli najdłuższy czas reakcji odnotowany podczas sesji. Opóźnienia te wynikają z faktu, że „mózg" przeglądarki jest w danym momencie zbyt przeciążony przetwarzaniem ciężkiego kodu (najczęściej JavaScriptu), by natychmiast zareagować na kliknięcie klienta.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift to jedyny wskaźnik w zestawie Core Web Vitals, który nie jest wyrażany w sekundach/milisekundach. CLS to miara stabilności wizualnej strony. Mówi o tym, czy elementy na ekranie pozostają na swoim miejscu, czy też niespodziewanie przesuwają się w trakcie ładowania, co bywa niezwykle irytujące. Klasycznym przykładem wysokiego CLS jest sytuacja, gdy użytkownik próbuje kliknąć w przycisk „Anuluj”, ale w tym samym ułamku sekundy nad nim ładuje się element graficzny, spychając przycisk w dół, przez co użytkownik klika w link, którego wcale nie wybierał.
Skąd bierze się wynik CLS?
Algorytm Google oblicza przestrzeń, jaką zajmują skaczące elementy, oraz dystans, o jaki się przesunęły.
Wynik pogarsza się w sytuacjach, gdy:
Przeglądarka nie wie, jakie wymiary ma dany obrazek lub baner reklamowy przed jego pobraniem. W efekcie najpierw wyświetla tekst, a gdy obrazek w końcu się załaduje, gwałtownie „rozpycha” układ strony.
Formatowanie ładuje się z opóźnieniem. Przeglądarka najpierw pokazuje tekst czcionką standardową, a po ułamku sekundy podmienia ją na docelową, co zmienia szerokość i układ całych akapitów.