Moja strona dostała 66 na 100. Co poprawiłem.
wynik wydajności na telefonie, przed i po poprawkach
Krótko
PageSpeed pokazał mojej stronie 66 na 100 na telefonie. Winne były głównie czcionki ładowane w całości, zdjęcie na górze strony ładowane w kolejce z resztą i dymek czatu, który przesuwał układ. Po poprawkach strona ma 92–99 w zależności od pomiaru, a układ nie skacze wcale.
Skąd w ogóle ten wynik
Pod jednym z moich postów ktoś wrzucił zrzut ekranu z PageSpeed Insights. To darmowe narzędzie Google: wpisujesz adres strony i po pół minuty widzisz, jak szybko ładuje się na telefonie. Moja strona dostała 66 na 100.
Sprzedaję strony, które mają być szybkie, więc było to niewygodne. Tym bardziej że każdy może sprawdzić to sam, w pół minuty, bez żadnego dostępu do strony. Zamiast się tłumaczyć, usiadłem do poprawek.
Wyniki przed i po
| Co mierzy | Przed | Po |
|---|---|---|
| Wydajność (na 100) | 66 | 92–99 |
| LCP: kiedy pojawia się największy element ekranu | 4,8 s | 1,5–2,9 s |
| CLS: jak bardzo układ skacze przy ładowaniu | 0,238 | 0 |
Google uznaje za dobre LCP poniżej 2,5 sekundy i CLS poniżej 0,1. CLS spadł do zera. LCP waha się między pomiarami i w części z nich wciąż przekracza granicę. To przez film na górze strony, o którym piszę niżej.
Po lewej zrzut z komentarza, po prawej pomiar po poprawkach. Wynik zmienia się między pomiarami, w moich testach od 92 do 99.
Co spowalniało stronę
- Czcionki. Ładowałem trzy pełne pliki czcionki, po około 110 KB każdy, ze znakami alfabetów, których strona w ogóle nie używa. Telefon musiał je pobrać, zanim pokazał tekst. Teraz pobiera tylko litery łacińskie z polskimi znakami, a czcionka używana dopiero niżej na stronie nie blokuje pierwszego ekranu.
- Zdjęcie na górze strony. Przeglądarka nie wiedziała, że to najważniejszy element, i ładowała je w kolejce z resztą. Teraz dostaje pierwszeństwo i lżejszy format (AVIF).
- Dymek czatu. Wyskakiwał sam po dwóch sekundach i rozpychał układ strony. Stąd ten skok 0,238. Teraz unosi się nad stroną, niczego nie przesuwa i pokazuje się dopiero po pierwszym przewinięciu.
- Animacja tytułu. Nagłówek wyłaniał się z przezroczystości, więc przez chwilę dla Google go nie było. Teraz wjeżdża samym ruchem i jest widoczny od pierwszej klatki.
- Wideo niżej na stronie. Plik 1,4 MB ładował się od razu, chociaż nikt go jeszcze nie oglądał. Teraz pobiera się dopiero, gdy zbliżasz się do tej sekcji.
Dlaczego film w tle zostaje
Bez filmu na górze strona miała w testach 95–100. Z filmem ma 92–99. Sprawdziłem obie wersje i sama nieruchoma klatka wyglądała płasko, bez kontrastu. Zostawiłem film: kilka punktów mniej, ale strona wygląda tak, jak ma wyglądać, a wynik i tak mieści się w przedziale, który Google uznaje za dobry (90–100).
Przy stronach klientów robię tak samo: pokazuję obie wersje i to klient decyduje, co jest dla niego ważniejsze.
Co robię od teraz
Od teraz każdą stronę, swoją i klienta, sprawdzam w PageSpeed przed oddaniem i jeszcze raz po wdrożeniu. Cel to co najmniej 90 na telefonie. Jeśli Twoja obecna strona ładuje się wolno, napisz albo zadzwoń. Powiem Ci, co ją spowalnia.