LCP

Co to jest LCP

LCP to czas do chwili, w której na ekranie pojawia się największy element treści. Zegar rusza, gdy strona zaczyna się ładować, i staje nie wtedy, gdy ładowanie się kończy, tylko wtedy, gdy widać to, po co ktoś przyszedł.

O tym, co jest „największe”, decyduje przeglądarka, nie ty, i prawie zawsze jest to jedna z trzech rzeczy: zdjęcie w nagłówku, pierwszy duży tytuł albo tło, które okazuje się osobnym elementem. Wszystko poniżej pierwszego ekranu jest pomijane.

Dlaczego akurat ten wskaźnik

LCP pilnuje momentu, w którym odwiedzający przestaje patrzeć na nic. Cokolwiek mówi całkowity czas ładowania, strona jest bezużyteczna, dopóki nie pojawi się jej główny element.

To również ten wskaźnik z Core Web Vitals, który najwięcej stron oblewa, i ten, który najbardziej opłaca się naprawić, bo przy okazji zwykle poprawiają się pozostałe dwa.

Co realnie poprawia LCP

Poprawia go prawie zawsze usuwanie, a nie strojenie.

Przy migracji z WordPressa LCP poprawia się nie dlatego, że skompresowałem zdjęcia. Poprawia się dlatego, że żądanie nie czeka już na arkusze stylów wtyczek, ładowarkę fontów, skrypt slidera i skrypt cookies, a każde z nich blokuje przeglądarce narysowanie czegokolwiek. Wyślij HTML gotowy przed przyjściem żądania, a nagłówek nie ma za czym stać w kolejce.

Dwa błędy znajduję niemal w każdym audycie. Pierwszy: zdjęcie w nagłówku ma loading="lazy", czyli przeglądarka dostaje polecenie, żeby zaczekać z pobraniem jedynego obrazka, który ten wskaźnik mierzy. Zwykle dlatego, że wtyczka dodała ten atrybut wszystkim obrazkom na stronie. Drugi: font jest pobierany przez arkusz stylów, który sam jest pobierany przez inny arkusz, więc tytuł nie ma się czym narysować, dopóki nie skończą się dwie rundy w obie strony. Na spoko.space font jest preładowany razem z dokumentem właśnie z tego powodu.

Reszta czasu to serwer. Wolny pierwszy bajt jest sufitem: żadna praca po stronie przeglądarki nie zejdzie poniżej czasu, który zajęła odpowiedź.

Czym LCP nie jest

LCP nie jest czasem ładowania strony ani wynikiem z Lighthouse. Lighthouse daje liczbę z laboratorium, z jednej symulowanej wizyty, bez banera cookies i bez tagów marketingowych. Wynik, który się liczy, pochodzi z prawdziwych sesji w Chrome z 28 dni. Te dwie wartości rutynowo się nie zgadzają, a gdy się nie zgadzają, Google patrzy na dane z pola.