Szybkość strony: jak sprawdzić ją w PageSpeed Insights i co poprawić najpierw

Większość ludzi wchodzi na strony małych firm z telefonu, często w drodze, na słabszym zasięgu. Jeśli strona ładuje się długo, część z nich nie poczeka. Przy ruchu z reklam to szczególnie bolesne, bo za kliknięcie już zapłaciłeś, a człowiek zamknął stronę, zanim zobaczył ofertę.

Na szczęście szybkość strony można sprawdzić samodzielnie, za darmo, w kilka minut. Narzędzie to PageSpeed Insights od Google.

Jak zrobić test

1. Wejdź na PageSpeed Insights i wklej adres strony. Najlepiej tej, na którą kierujesz ruch: strony głównej albo landing page z reklam.
2. Zostań na zakładce „Komórka”. Wynik na komputery jest zwykle lepszy, ale to telefon jest ważniejszy.
3. Zrób test dwa, trzy razy i porównaj. Wynik potrafi się trochę różnić między pomiarami.
4. Zapisz wynik i datę, żeby po poprawkach mieć porównanie.

Dwie części raportu

Dane z terenu

Na górze raportu możesz zobaczyć dane od prawdziwych użytkowników Chrome, którzy odwiedzali Twoją stronę. Jeśli strona ma mały ruch, tej części może nie być, bo Google nie ma wystarczająco danych. To normalne przy małych firmach.

Test laboratoryjny

Niżej jest wynik w skali do 100 i lista problemów. To symulacja ładowania strony na przeciętnym telefonie z wolniejszym połączeniem. Nie przejmuj się, jeśli wynik nie jest zielony. Liczba to wskazówka, a nie cel sam w sobie. Ważniejsze jest, co konkretnie spowalnia stronę.

Trzy wskaźniki, które warto rozumieć

To tak zwane podstawowe wskaźniki internetowe, czyli Core Web Vitals. Dla klienta przekładają się na proste odczucia: czy szybko widzi treść, czy przycisk reaguje od razu i czy nie kliknie przez przypadek w coś innego, bo układ przeskoczył.

Najszybsza poprawka szybkości to zwykle mniejsze zdjęcia, a nie nowy serwer.

Co poprawić najpierw

1. Zdjęcia

W stronach małych firm to najczęstszy problem. Zdjęcie prosto z aparatu albo telefonu potrafi ważyć kilka megabajtów, a na stronie wyświetla się w małym okienku. Co zrobić:

• zmniejsz wymiary zdjęć do rozmiaru, w jakim faktycznie się wyświetlają,
• zapisz je w nowoczesnym formacie, np. WebP, albo przynajmniej skompresuj JPG,
• włącz leniwe ładowanie dla zdjęć poniżej pierwszego ekranu,
• nie ustawiaj leniwego ładowania dla głównego zdjęcia na górze, bo to ono zwykle decyduje o LCP.

2. Wtyczki i dodatki

Na stronach opartych o WordPress często widzę kilkanaście czy kilkadziesiąt wtyczek, z których część nie jest już używana. Każda może dokładać skrypty i style ładowane na każdej podstronie. Przejrzyj listę i usuń to, czego nie potrzebujesz. Rób to ostrożnie i z kopią zapasową.

3. Skrypty zewnętrzne

Czat, mapa, widget opinii, kilka narzędzi analitycznych, wideo z YouTube osadzone na pierwszym ekranie. Każdy z nich ma swój koszt. Zastanów się, czy wszystkie są potrzebne na każdej podstronie. Mapę Google można na przykład zastąpić zdjęciem mapy z linkiem, a wideo ładować dopiero po kliknięciu.

4. Czcionki

Kilka krojów pisma w wielu grubościach to sporo danych do pobrania. Zwykle wystarczą dwa kroje i kilka grubości.

5. Hosting i pamięć podręczna

Jeśli po poprawkach w zdjęciach i dodatkach strona dalej jest wolna, sprawdź serwer. Bardzo tani hosting albo brak pamięci podręcznej potrafią wydłużyć czas odpowiedzi serwera, zanim cokolwiek zacznie się ładować.

Przykład z praktyki

Typowa sytuacja, którą widzę przy stronach usługowych: na pierwszym ekranie duże zdjęcie w tle wgrane prosto z aparatu, pod nim suwak z kilkoma kolejnymi zdjęciami w tym samym rozmiarze i osadzona mapa Google w stopce. PageSpeed Insights wskazuje wtedy zwykle zdjęcia jako główną przyczynę słabego LCP. Zmniejszenie i kompresja zdjęć, usunięcie suwaka na rzecz jednego zdjęcia i zastąpienie mapy linkiem to poprawki na jedno popołudnie, po których strona wyraźnie szybciej pokazuje treść na telefonie.

Jeśli strona stoi na kreatorze

Strony zbudowane w popularnych kreatorach online dają mniej możliwości technicznych niż własny hosting. Nie zmienisz serwera ani sposobu ładowania skryptów. Nadal jednak masz wpływ na najważniejsze rzeczy: rozmiar i liczbę zdjęć, liczbę osadzonych elementów, takich jak wideo, mapy i widżety, oraz liczbę animacji. W kreatorach często to właśnie ozdobniki, takie jak suwaki, galerie i animacje przy przewijaniu, najbardziej spowalniają stronę na telefonie.

Jak często sprawdzać szybkość

Wystarczy test po każdej większej zmianie na stronie, np. nowej sekcji, nowej wtyczce albo dodaniu skryptu, i raz na kilka miesięcy profilaktycznie. Jeśli korzystasz z Google Search Console, w raporcie dotyczącym podstawowych wskaźników internetowych zobaczysz, czy Google nie zgłasza problemów z grupami podstron. To dobre uzupełnienie pojedynczych testów.

Czego nie robić

• Nie goń setki za wszelką cenę. Strona z wynikiem 100, z której zniknęły ważne zdjęcia i przyciski, nie sprzeda lepiej.
• Nie instaluj kolejnej wtyczki „do przyspieszania” bez sprawdzenia, czy nie dubluje funkcji, które już masz.
• Nie wprowadzaj wszystkich zmian naraz na żywej stronie bez kopii zapasowej i testu formularza po zmianach.

Szybkość a reklamy

Jeśli prowadzisz reklamy, zwróć uwagę na różnicę między kliknięciami w link a wyświetleniami strony docelowej w Menedżerze reklam. Duża różnica może oznaczać, że część osób zamyka stronę, zanim się załaduje i zanim piksel zdąży zarejestrować wizytę. To dobry sygnał, żeby sprawdzić szybkość. Więcej o czytaniu wyników pisałem we wpisie o pięciu liczbach na każdy tydzień.

Plan na jedno popołudnie

1. Test w PageSpeed Insights na telefon, zapisany wynik.
2. Kompresja i zmniejszenie zdjęć na stronie głównej i landing page.
3. Przegląd wtyczek i skryptów zewnętrznych.
4. Ponowny test i porównanie.
5. Sprawdzenie, czy formularz i przyciski kontaktu dalej działają.

Jeśli strona jest stara i poprawki nie pomagają, czasem prościej zbudować nową, lekką stronę. W moim cenniku strona albo landing page do pięciu sekcji to 1499 PLN netto, z wersją mobilną i podstawowym SEO.