Dlaczego jedna strona ładuje się w sekundę, a inna w sześć

Sprawdź sam: dwa telefony obok siebie

Po lewej typowa strona małej firmy z czterema częstymi problemami. Po prawej ta sama strona zrobiona porządnie. Wybierz jakość internetu i włączaj przełączniki. Telefony ładują się w prawdziwym czasie, a przy bardzo długim ładowaniu animacja jest przyspieszona.

To uproszczona symulacja telefonu ze średniej półki. Liczy pobieranie plików przy wspólnym łączu, czekanie na serwer i czytanie kodu przez telefon. Konkretne sekundy zależą od strony, ale proporcje między poprawkami są takie, jakie widzę w pomiarach stron klientów.

Ile czasu ma Twoja strona

Google uznaje stronę za szybką, gdy największy element na ekranie telefonu, zwykle zdjęcie albo nagłówek, pojawia się w ciągu 2,5 sekundy. Między 2,5 a 4 sekundami to wynik „do poprawy”, powyżej 4 sekund wynik słaby.

Klienci są jeszcze mniej cierpliwi. Według badania Google z 2016 roku 53% odwiedzin z telefonu kończyło się wyjściem, gdy strona ładowała się dłużej niż 3 sekundy. Badanie ma już kilka lat, ale dzisiejsze telefony i przyzwyczajenia raczej nie zwiększyły naszej cierpliwości.

1. Zdjęcie prosto z aparatu

Zdjęcie z telefonu albo aparatu waży zwykle 3-6 MB i ma szerokość 4000-6000 pikseli. Ekran telefonu potrzebuje ułamka tego. Jeśli takie zdjęcie stoi na górze strony, przy słabym zasięgu samo jego pobieranie trwa kilkanaście sekund.

Co pomaga:

• zmniejszenie zdjęcia do rozmiaru, w jakim naprawdę się wyświetla,
• nowsze formaty, czyli WebP albo AVIF, które przy tej samej jakości ważą kilka razy mniej niż JPG,
• osobne wersje zdjęcia dla telefonu i dla komputera, żeby telefon nie pobierał dużej,
• wczytywanie dalszych zdjęć dopiero przy przewijaniu. Zdjęcie na samej górze ładuje się od razu.

Po takich zmianach zdjęcie na górze strony waży zwykle 100-250 KB zamiast kilku megabajtów.

2. Wtyczki i skrypty

Każda wtyczka, slider, okienko czatu czy kod do statystyk to plik, który telefon musi pobrać i przeczytać. Najgorzej, gdy robi to przed pokazaniem treści: klient patrzy na biały ekran, chociaż tekst strony już dotarł. Słabszy telefon czyta duży kod dłużej, niż go pobiera, więc nawet szybki internet tu nie pomoże.

Co pomaga:

• usunięcie nieużywanych wtyczek. Na stronach po kilku latach często połowa z nich nic już nie robi,
• wczytywanie skryptów po treści, a nie przed nią,
• czat, mapa czy film wczytywane dopiero po kliknięciu, a nie przy otwarciu strony.

W symulacji właśnie ta poprawka daje najwięcej przy dobrym 4G: tekst pojawia się ponad dwa razy szybciej.

3. Czcionki

Ładne kroje pisma to część wyglądu strony, ale każdy krój i każda grubość to osobny plik. Jeśli strona używa pięciu krojów z obcego serwera i czeka na nie z pokazaniem tekstu, klient widzi pusty ekran, choć treść już jest.

Co pomaga:

• dwa kroje zamiast pięciu, w tym jeden ze zmienną grubością,
• pliki czcionek na serwerze strony, a nie na obcym,
• pokazanie tekstu od razu czcionką systemową i podmiana kroju po chwili. Przy dobrym ustawieniu nikt tego nie zauważa.

4. Serwer

Zanim przyjdzie pierwszy fragment strony, serwer musi ją przygotować. Na tanim hostingu, gdzie strona z wtyczkami składa się od nowa przy każdej wizycie, trwa to często prawie sekundę. Google za dobry czas odpowiedzi serwera uznaje do 0,8 sekundy, a szybkie strony odpowiadają w kilkadziesiąt milisekund.

Co pomaga:

• pamięć podręczna, czyli gotowa strona trzymana na serwerze, zamiast składania jej przy każdej wizycie,
• serwery blisko klienta: sieć, która wysyła stronę z najbliższego miasta, a nie z jednej serwerowni,
• strona statyczna, czyli przygotowana raz, przy publikacji. Tak buduję strony: nie ma czego składać przy wizycie.

Jak sprawdzić swoją stronę w 2 minuty

1. Wejdź na pagespeed.web.dev.
2. Wpisz adres swojej strony i kliknij „Analizuj”.
3. Patrz na zakładkę dla telefonu, nie dla komputera. Wynik od 90 to wynik dobry, 50-89 do poprawy, poniżej 50 słaby.
4. Sprawdź wiersz „Największe wyrenderowanie treści”. To właśnie czas, po którym klient widzi najważniejszą część strony. Dobrze, jeśli jest poniżej 2,5 s.

Jeśli strona ma dużo odwiedzin, na górze raportu zobaczysz też dane od prawdziwych użytkowników Chrome. Są cenniejsze niż sam test, bo pokazują, jak strona działa u Twoich klientów, a nie w laboratorium.