Dlaczego strona www wolno ładuje się na telefonie

Klient pisze, że strona na telefonie „zamula”, a u niego w biurze wszystko działa. Prawie zawsze przyczyną jest jeden z siedmiu problemów opisanych poniżej, a jego usunięcie nie wymaga przebudowy strony.

Test w PageSpeed to nie wszystko

PageSpeed Insights i Lighthouse wykonują test syntetyczny, czyli jednorazowe wczytanie strony na symulowanym telefonie przy spowolnionym połączeniu. Każde uruchomienie daje nieco inny wynik, a 100 punktów nie oznacza jeszcze, że strona działa szybko u Twoich klientów.

Google, oceniając stronę, korzysta z danych od prawdziwych użytkowników Chrome z ostatnich 28 dni, zbieranych w raporcie CrUX (Chrome UX Report). Liczą się trzy wskaźniki:

• LCP: czas wyświetlenia głównej treści, dobry wynik to do 2,5 s,
• INP: czas reakcji strony na kliknięcie, dobry wynik to do 200 ms,
• CLS: przesunięcia elementów podczas ładowania, dobry wynik to do 0,1.

Te dane sprawdzisz w CrUX Vis albo w Google Search Console, w raporcie Podstawowe wskaźniki internetowe. Dla małej strony firmowej często ich jednak nie ma, ponieważ CrUX obejmuje tylko strony o odpowiednio dużym ruchu. Wtedy można zbierać je samodzielnie, np. za pomocą bezpłatnej usługi Cloudflare Web Analytics albo biblioteki web-vitals połączonej z Google Analytics.

Dlatego test syntetyczny traktuję jako narzędzie diagnostyczne: pokazuje, co spowalnia stronę i ile ważą poszczególne elementy. To, czy poprawki rzeczywiście pomogły, sprawdzam w danych od użytkowników.

1. Zdjęcia wgrane prosto z aparatu

Baner na górze strony, zdjęcie ze stocku, skan dokumentu. Na jednej ze stron sam baner ważył 3 MB, a pod nim znajdowała się galeria certyfikatów: pełne skany po 2-3 MB, wyświetlane jako miniatury wielkości znaczka. Cała strona główna ważyła 12,7 MB.

Zdjęcia przekonwertowałem do formatu WebP, a w galerii zastąpiłem oryginały miniaturami, które WordPress i tak tworzy podczas wgrywania. Waga strony spadła do 691 KB.

2. Brak cache

Bez cache WordPress przy każdym wejściu uruchamia kod PHP, pobiera dane z bazy i generuje stronę od nowa. Na typowym hostingu współdzielonym zajmuje to serwerowi 0,4-0,5 s, zanim w ogóle zacznie wysyłać stronę do przeglądarki. Z włączonym cache ten sam serwer odpowiada w około 0,05 s.

Na serwerach LiteSpeed wystarczy bezpłatna wtyczka LiteSpeed Cache. Na innych hostingach podobne rozwiązanie jest często dostępne w panelu, a o szczegóły warto zapytać pomoc techniczną. W sklepie cache trzeba skonfigurować ostrożnie: koszyk, konto klienta i składanie zamówienia muszą być z niego wyłączone.

3. Lazy load obrazków above the fold

Wtyczki do optymalizacji często włączają lazy load dla wszystkich obrazków, także tych above the fold, czyli w części strony widocznej od razu po wejściu, bez przewijania. Przeglądarka pobiera wtedy logo i baner na samym końcu, a logo bez określonych wymiarów po wczytaniu powiększa nagłówek, przez co cała strona przesuwa się w dół.

Na trzech z sześciu stron, które sprawdzałem w październiku, właśnie to pogarszało wynik CLS. Wystarczy wykluczyć logo i baner z opóźnionego ładowania w ustawieniach wtyczki.

4. Czcionki z Google Fonts

Gdy strona korzysta z Google Fonts, przeglądarka musi połączyć się z dwoma dodatkowymi serwerami, zanim wyświetli tekst czcionką użytą w projekcie. Dodatkowo motywy często pobierają wszystkie odmiany czcionki, od najcieńszej po najgrubszą, razem z kursywą, choć strona korzysta tylko z trzech.

Dlatego czcionki umieszczam na serwerze strony, w jednym pliku zawierającym tylko używane odmiany i polskie znaki. Przy ostatniej takiej zmianie plik ważył 37 KB zamiast 109 KB pobieranych z Google.

5. Widżety ładowane od razu

Rezerwacje, czat, mapa, opinie z Google. Każdy taki widżet pobiera własne skrypty i ciasteczka, nawet jeśli znajduje się dopiero w stopce. Widżet do umawiania wizyt na jednej ze stron zwiększał jej wagę o 1,4 MB.

Można go skonfigurować tak, aby ładował się dopiero wtedy, gdy użytkownik przewinie stronę do tej sekcji. Kto do niej nie dotrze, w ogóle go nie pobierze.

6. Baner ustawiony jako tło w CSS

Przeglądarka trafia na takie zdjęcie dopiero po pobraniu i przetworzeniu arkusza stylów. Jedna linia w sekcji head strony (preload z wysokim priorytetem) sprawia, że zaczyna je pobierać od razu. Przy wolnym połączeniu może to przyspieszyć wyświetlenie banera o kilkaset milisekund.

7. Slider na górze strony

Karuzela z kilkoma dużymi zdjęciami na samej górze to popularne rozwiązanie na stronie głównej, ale też jedno z najbardziej obciążających. Przeglądarka od razu pobiera wszystkie slajdy oraz skrypt slidera, który musi się uruchomić, zanim pokaże pierwsze zdjęcie. Na jednej ze stron cztery zdjęcia w sliderze ważyły łącznie ponad 4 MB, a główna treść w teście na telefonie pojawiała się dopiero po 24 sekundach.

Najlepiej zastąpić slider jednym zdjęciem z tekstem. Jeśli slider ma zostać, zdjęcia muszą być lekkie: pierwsze ładowane od razu, z wysokim priorytetem, a kolejne dopiero przy zmianie slajdu.

Ile to daje

Po takich poprawkach główna treść w testach syntetycznych na telefonie pojawia się zwykle po 2-4 sekundach zamiast kilkunastu, a w skrajnych przypadkach kilkudziesięciu. U prawdziwych użytkowników różnica bywa mniejsza, ponieważ zwykle mają szybsze połączenie niż w teście, ale poprawa jest odczuwalna. Jeśli Twoja strona wolno ładuje się na telefonie, napisz do mnie. Sprawdzę, co ją spowalnia, i powiem, co da się poprawić.