Czym jest LCP, FID oraz CLS i jak wpływają na pozycjonowanie?

Trzy skróty rozłożone na czynniki pierwsze

Baner wejsciowyParallax

Czym jest LCP, FID oraz CLS i jak wpływają na pozycjonowanie?

Trzy skróty rozłożone na czynniki pierwsze

Autor nie posiada zdjęcia
Tomasz Piasecki
30 marca 2021

Trzy skróty, które w ostatnich miesiącach weszły do słownika każdego, kto zajmuje się stronami. Problem z nimi polega na tym, że brzmią jak techniczny żargon, więc łatwo je odrzucić jako sprawę wyłącznie programisty.

Tymczasem każdy z nich opisuje coś, co użytkownik odczuwa fizycznie. Pierwszy mówi, jak długo patrzy na pustą stronę. Drugi — czy strona odpowiada, gdy wreszcie w coś kliknie. Trzeci — czy treść nie ucieka mu spod palca w trakcie ładowania. To nie są abstrakcje, to opis irytacji przełożony na liczby.

Rozbieram poniżej każdy z tych wskaźników osobno: co dokładnie mierzy, jaki ma próg i co go najczęściej psuje. Bez wchodzenia w kod, ale też bez udawania, że wystarczy włączyć wtyczkę.

LCP — kiedy pojawia się treść

Largest Contentful Paint mierzy czas do wyrenderowania największego elementu treści widocznego w oknie przeglądarki. Zwykle jest to zdjęcie nagłówkowe, blok wideo albo duży fragment tekstu.

Sens tego pomiaru jest prosty: użytkownik uznaje stronę za załadowaną nie wtedy, gdy przeglądarka skończy pracę, ale wtedy, gdy zobaczy to, po co przyszedł. Dlatego LCP zastąpił starsze wskaźniki, które mierzyły pierwsze cokolwiek na ekranie — pojawienie się nagłówka i pustego kontenera nie jest odpowiedzią na potrzebę użytkownika.

Google przyjęło próg 2,5 sekundy dla oceny dobrej. Powyżej czterech sekund wynik jest zły, między nimi mieści się strefa wymagająca poprawy. Pomiar dotyczy siedemdziesiątego piątego centyla, czyli trzy czwarte wizyt musi zmieścić się w progu — nie średnia, co ma duże znaczenie, bo średnią łatwo poprawić szybkimi wizytami, a centyl wymaga zajęcia się tymi najgorszymi.

Co psuje LCP najczęściej: powolna odpowiedź serwera, ciężki obraz bohaterski wgrany w rozdzielczości aparatu, blokujące renderowanie arkusze stylów i skrypty w nagłówku, a także ładowanie treści dopiero po wykonaniu skryptu. Ostatni przypadek jest szczególnie kłopotliwy w serwisach opartych na frameworkach renderujących wszystko w przeglądarce.

FID — czy strona reaguje

First Input Delay mierzy opóźnienie między pierwszą interakcją użytkownika — kliknięciem, dotknięciem, naciśnięciem klawisza — a momentem, w którym przeglądarka zaczyna tę interakcję obsługiwać.

Nie mierzy więc czasu wykonania akcji, tylko czas oczekiwania w kolejce. Jeśli przeglądarka jest w tym momencie zajęta wykonywaniem skryptu, nie ma jak zająć się kliknięciem i użytkownik dostaje wrażenie, że strona zamarła. Każdy zna to z telefonu: strona wygląda na gotową, klika się w menu i nic się nie dzieje.

Próg dobrej oceny to 100 milisekund. Powyżej trzystu wynik jest zły. Warto zaznaczyć jedno: FID da się zmierzyć tylko na prawdziwym użytkowniku, bo wymaga jego kliknięcia. Dlatego w narzędziach laboratoryjnych zobaczysz zamiast niego wskaźnik zastępczy mierzący całkowity czas blokowania wątku — to inna liczba, ale poprawianie jej poprawia też FID.

Winowajcą jest praktycznie zawsze JavaScript: duże paczki kodu wykonywane przy wczytaniu, biblioteki dołączane w całości dla jednej funkcji, skrypty firm trzecich uruchamiane od razu. Lekarstwo to dzielenie kodu, odkładanie tego, co nie jest potrzebne do pierwszego widoku, i bezlitosny przegląd listy narzędzi zewnętrznych.

CLS — czy układ stoi w miejscu

Cumulative Layout Shift jest z tej trójki najmniej intuicyjny, a jednocześnie najbardziej wkurzający dla użytkownika. Mierzy sumę niespodziewanych przesunięć elementów w trakcie ładowania strony.

Klasyczny scenariusz: czytasz akapit, w tym momencie doładowuje się baner nad nim, tekst zjeżdża o sto pikseli w dół. Albo sięgasz do przycisku, a chwilę przed kliknięciem pojawia się nad nim pole, więc trafiasz w coś innego. To nie jest kwestia estetyki, to prowadzi do przypadkowych kliknięć — w sklepie potrafi kosztować konwersję.

Wynik nie jest tu czasem, a bezwymiarową liczbą. Dobra ocena to poniżej 0,1, zła powyżej 0,25. Liczy się iloczyn tego, jak duża część ekranu się przesunęła i jak daleko.

Przyczyny są bardzo powtarzalne. Obrazy i ramki bez zadeklarowanych wymiarów, więc przeglądarka nie rezerwuje na nie miejsca. Reklamy i treści wstawiane dynamicznie ponad istniejącą treścią. Banery zgód pojawiające się z opóźnieniem. Kroje pisma podmieniane po wczytaniu, co zmienia wysokość bloków tekstu. Naprawa w większości przypadków polega na jednym: zarezerwować miejsce z góry.

Jak to przekłada się na ranking

Tu potrzebna jest ostrożność, bo wokół tej sprawy narosło dużo nadinterpretacji.

Google zapowiedziało, że sygnały doświadczenia na stronie staną się częścią rankingu, i konsekwentnie powtarza, że trafność treści pozostanie ważniejsza. To znaczy, że nie ma progu, po którego przekroczeniu strona spada, i nie ma premii za wynik idealny. Realistycznie: przy dwóch stronach o zbliżonej wartości merytorycznej szybsza i stabilniejsza ma przewagę.

Druga rzecz, o której warto pamiętać: te wskaźniki mierzą doświadczenie, a nie jakość treści. Najszybsza pusta strona nie wyprzedzi wolnego, ale wyczerpującego artykułu. Traktuję je więc jako higienę, nie jako dźwignię pozycji.

Trzecia — jest efekt uboczny, o którym rzadziej się mówi, a który dla klientów jest zwykle bardziej przekonujący niż ranking. Poprawa tych trzech liczb podnosi skuteczność ruchu płatnego, bo część użytkowników wychodzi ze strony, zanim cokolwiek zobaczy, a za ich kliknięcie już zapłaciłem.

Gdzie to sprawdzać i jak czytać wyniki

Do stanu faktycznego używam raportu w Search Console, bo pokazuje dane zebrane od realnych użytkowników Chrome i grupuje adresy według szablonów. To najbliższe temu, co widzi wyszukiwarka.

Do diagnozy używam narzędzi laboratoryjnych, które dają konkretną listę problemów z szacowanym zyskiem czasowym. Pamiętam przy tym, że pojedynczy pomiar potrafi się wahać — powtarzam go kilka razy, zanim uznam wynik za punkt odniesienia.

Najważniejsza zasada interpretacji: nie mieszaj tych dwóch źródeł. Poprawa oceny laboratoryjnej z pięćdziesięciu na osiemdziesiąt punktów nie jest dowodem na nic, dopóki dane z pola za miesiąc tego nie potwierdzą. Widziałem serwisy z przyzwoitą oceną laboratoryjną i złymi danymi rzeczywistymi — najczęściej dlatego, że realni użytkownicy wchodzili z telefonów na wolnym łączu, a symulacja zakładała warunki lepsze od przeciętnych.

I rzecz na koniec: warto zmierzyć stan wyjściowy i zapisać go, zanim ktokolwiek zacznie coś naprawiać. Bez tego za pół roku nie odpowiesz na pytanie, czy praca miała sens.

Podziel się tym artykułem z innymi!

Twitter Facebook Linke.din
Autor nie posiada zdjęcia
Tomasz Piasecki
Specjalista Google Ads / SEM
Zajmuję się kampaniami Google Ads i widocznością stron w wyszukiwarce. Na blogu UDI Group piszę o tym, jak ustawienia kampanii i decyzje techniczne przekładają się na realne wyniki. Staram się tłumaczyć mechanizmy, a nie tylko podawać gotowe przepisy.