Twoja strona na cudzym telefonie. Pięć liczb z Lighthouse

Otwierasz swoją stronę setny raz. Wchodzi od razu, zdjęcie na miejscu, wszystko działa.

Nic dziwnego. Przeglądarka trzyma ją w pamięci, łącze masz dobre, ekran duży.

Klient otwiera ją pierwszy raz. W autobusie, na jednym pasku zasięgu, na telefonie sprzed trzech lat.

Twoja przeglądarka pamięta, klient nie

Jest darmowe narzędzie, które ogląda stronę jego oczami. Nazywa się Lighthouse i siedzi w przeglądarce Chrome.

Najprościej wejść w nie przez PageSpeed Insights — wpisz tę nazwę w wyszukiwarkę. Podajesz adres, czekasz chwilę, dostajesz raport.

Pomiar idzie z cudzej maszyny. Twoja pamięć podręczna niczego tam nie podkoloryzuje.

Lighthouse nie mierzy też na Twoim łączu. Udaje wolne 4G i zwalnia procesor czterokrotnie, żeby po drugiej stronie stanął zwykły telefon.

Dlatego jego liczby są gorsze od tego, co widzisz codziennie. To nie usterka narzędzia, tylko druga strona lustra.

Uruchom pomiar trzy razy, nie raz. Wyniki potrafią skakać o kilka punktów i dopiero ten środkowy coś znaczy.

Raport ma dwie zakładki: telefon i komputer. Otwórz obie i zapisz z nich wynik wydajności — tę dużą liczbę u góry, od zera do stu.

To pierwsza z pięciu liczb w tym wpisie i jedyna, która sama powstaje z innych pomiarów. Nie z tych pięciu — Lighthouse ma własny zestaw, w którym każdy pomiar waży inaczej.

W tym zestawie są trzy z moich pięciu liczb: LCP, CLS i TBT. Zielone zaczyna się od 90, czerwone kończy na 49.

Piszę o Lighthouse w wersji 10 i nowszej. W starszych wagi były rozłożone inaczej, więc i ta duża liczba znaczyła co innego.

Różnica między telefonem a komputerem to dokładnie ta część, której nie widzisz. Klient stoi po stronie tej niższej.

Zakładka komputera jest tą pochlebną. Zapisz ją dla porządku, ale decyzje podejmuj z tej drugiej.

LCP: ile klient patrzy w puste pole

Druga liczba mówi, kiedy na ekranie pojawia się największy element. Zwykle jest nim zdjęcie u góry albo duży nagłówek.

W raporcie nazywa się LCP. Do 2,5 sekundy jest dobrze, powyżej 4 sekund — źle.

Tak wygląda LCP z drugiej strony: szare pole w miejscu zdjęcia, w cudzej ręce, w drodze z pracy.

Do tego momentu klient patrzy właśnie w taki prostokąt. Nie wie, czy strona się ładuje, czy jest zepsuta.

Otwieram strony specjalistów i najczęściej widzę dokładnie to. Puste pole zamiast zdjęcia, przez chwilę dłuższą, niż ktokolwiek chce czekać.

Największym elementem bywa też film w tle albo pierwszy slajd karuzeli. Wtedy klient czeka na coś, o co wcale nie prosił.

Co z tym zrobić: sprawdź w raporcie, który element jest tym największym. Prawie zawsze jest to jedno zdjęcie u góry i prawie zawsze da się je odchudzić.

Nie każ przeglądarce doładowywać go na końcu. Jeśli Twój kreator ma przy zdjęciach „leniwe ładowanie", przy tym jednym je wyłącz.

CLS: ile razy treść ucieka spod palca

Trzecia liczba nie ma jednostki. Mierzy, ile treści przeskoczyło w bok albo w dół, kiedy strona się doładowywała.

Znasz to z drugiej strony ekranu. Celujesz w „Cennik", w ostatniej chwili wskakuje baner i trafiasz w coś zupełnie innego.

Do 0,1 jest dobrze. Powyżej 0,25 jest źle — i wtedy klient klika na oślep.

Drugim sprawcą bywa czcionka. Strona rysuje tekst krojem zapasowym, po chwili podmienia go na Twój i wszystko zjeżdża o linijkę niżej.

Co z tym zrobić: każde zdjęcie ma mieć w kodzie podaną szerokość i wysokość. Baner zgody i wtyczki mają dostać swoje miejsce, zanim się załadują.

Jeśli składasz stronę samodzielnie w kreatorze, poszukaj przy zdjęciu pola z wymiarami. Jeśli robił ją ktoś inny, to dla niego robota na godzinę.

TBT: ile czasu strona nie słyszy dotknięcia

Czwarta liczba to milisekundy, w których strona jest zajęta sobą. W raporcie stoi jako TBT.

Gotowa strona to nie to samo co strona, która słucha. Obraz jest już namalowany, a przeglądarka wciąż przelicza skrypty.

To ten moment, gdy wszystko już widać, dotykasz przycisku i nic się nie dzieje. Dotykasz drugi raz, potem trzeci.

Do 200 milisekund jest dobrze, powyżej 600 źle. Ze wszystkiego, co składa się na wynik wydajności, ta jedna liczba waży najwięcej — blisko jedną trzecią.

Ten czas zjadają skrypty. Okienko czatu, dwa piksele reklamowe, narzędzie do zgód, karuzela z opiniami.

Co z tym zrobić: wypisz je na kartce, wszystkie co do jednego. Wyrzuć te, których danych nie oglądasz i o których nie umiesz powiedzieć, po co tam są.

Waga strony: ile klient ściąga, żeby zobaczyć nagłówek

Piąta liczba jest najbardziej dosłowna: ile ta strona waży. Lighthouse zapala ostrzeżenie mniej więcej powyżej 1,6 megabajta.

Do wyniku wydajności ta liczba nie wchodzi wcale. Narzędzie podaje ją obok, jako ostrzeżenie — a klient i tak ściąga wszystko.

Przelicz to sobie na sekundy. Wolne 4G z pomiaru to jakieś 200 kilobajtów na sekundę.

Megabajt zdjęcia robi się wtedy pięcioma sekundami czekania. Trzy takie zdjęcia w galerii to piętnaście sekund, w których klienta dawno nie ma.

Co z tym zrobić: w raporcie jest lista plików od najcięższego. Zejdź z rozmiarem zdjęć do tego, w jakim naprawdę wyświetlają się na stronie.

Sprawdź przy okazji, ile pikseli ma to zdjęcie naprawdę. Jeśli na telefonie wyświetla się na szerokość ekranu, cztery tysiące pikseli leżą tam po nic.

Format też robi różnicę. Ten sam kadr zapisany jako WebP waży zwykle wyraźnie mniej niż JPG, a na ekranie wygląda tak samo.

Aparat robi zdjęcia na wydruk, nie na stronę. Kadr z sesji waży kilka megabajtów, a u Ciebie zajmuje pół ekranu telefonu.

Kiedy te liczby nie są Twoim problemem

Powiem uczciwie: sto punktów nie sprzedaje. Błyskawiczna strona bez ceny i bez przycisku zostawia klienta z tym samym pytaniem, z którym przyszedł.

Jeśli w tym miesiącu zajrzało do Ciebie dwadzieścia osób, zacznij od tego, żeby było ich więcej. Te pięć liczb pomaga wtedy, gdy jest komu się ładować.

Wszystkie pięć ma zresztą jedną wspólną cechę. Żadna nie jest o Tobie — każda jest o człowieku, który stoi w autobusie i czeka.

Twoja strona ładuje się dla Ciebie z pamięci, dla niego od zera. Tylko ten drugi pomiar ma szansę cokolwiek sprzedać.

W skrócie

• Wpisz swój adres w PageSpeed Insights i otwórz zakładkę telefonu — to jest widok klienta.
• Zapisz pięć liczb: wydajność, LCP, CLS, TBT i wagę strony. Resztę raportu na razie zostaw.
• Odchudź największe zdjęcie u góry, bo to ono decyduje o LCP.
• Podaj wymiary zdjęć i zarezerwuj miejsce na baner, żeby treść nie uciekała spod palca.
• Wyrzuć skrypty, których danych nie oglądasz. To najtańsze sekundy do odzyskania.

Te pięć liczb zmierzysz samodzielnie i za darmo, cudzym narzędziem. Po to jest ten wpis.