Dlaczego szybkość strony ma znaczenie
Klient, który szuka usługi, zwykle ma otwartych kilka kart z różnymi firmami. Jeśli Twoja strona przez dłuższą chwilę pokazuje białe tło, nie musi czekać — wystarczy, że wróci do wyników wyszukiwania i kliknie następny wynik. Nie potrzebuję tu statystyk: każdy z nas zamknął kiedyś stronę, która nie chciała się załadować.
Szybkość ma też znaczenie dla Google. Wyszukiwarka mierzy, jak strony zachowują się u prawdziwych użytkowników, a zestaw tych pomiarów, czyli Core Web Vitals, jest wykorzystywany przez jej systemy rankingowe. Jednocześnie Google podkreśla, że nie ma jednego takiego sygnału, a najważniejsza pozostaje trafność treści. Szybka strona bez dobrej odpowiedzi na pytanie klienta nie wygra z wolniejszą, która tę odpowiedź daje.
Dlatego traktuję szybkość jak uprzejmość wobec klienta, a nie wyścig o punkty. Strona ma szybko pokazać to, po co ktoś przyszedł, i nie przeszkadzać mu w działaniu.
Co właściwie znaczy „szybka strona”
Czas ładowania strony to nie jedna liczba. Dla odwiedzającego liczą się trzy momenty: kiedy widzi najważniejszą treść, kiedy strona reaguje na jego kliknięcie i czy układ nie przeskakuje, gdy dochodzą kolejne elementy.
Strona może technicznie ładować się kilka sekund, a mimo to sprawiać wrażenie szybkiej — jeśli menu, nagłówek i przycisk pojawiają się od razu, a zdjęcia i dodatki dochodzą w tle. Odwrotnie też się zdarza. Strona, która „wczytała się” błyskawicznie, ale przez kolejną chwilę nie reaguje na dotyk albo przesuwa przycisk w momencie kliknięcia, jest dla klienta po prostu wolna i irytująca.
Te trzy momenty odpowiadają wskaźnikom, których używa Google: LCP, INP i CLS. Co dokładnie mierzą i jakie mają progi, wyjaśniam osobno w artykule Core Web Vitals po ludzku. Tutaj skupiam się na praktyce: jak sprawdzić swoją stronę i co poprawić.
Jak sprawdzić szybkość swojej strony
Zacznij od najprostszego testu. Otwórz stronę na swoim telefonie, na danych komórkowych, a nie na firmowym Wi-Fi — najlepiej tam, gdzie zasięg bywa słabszy. Zobacz, po jakim czasie widzisz nagłówek i przycisk kontaktu, czy możesz od razu przewijać i czy nic nie skacze. To nie jest pomiar, ale dobrze pokazuje to, co widzi klient.
PageSpeed Insights
To bezpłatne narzędzie Google: wpisujesz adres strony i dostajesz raport. Pokazuje dwa rodzaje danych, które warto odróżniać:
- Dane od użytkowników — pomiary z przeglądarki Chrome u prawdziwych osób, zebrane z ostatnich 28 dni. To one pokazują, jak strona działa naprawdę.
- Test laboratoryjny — jednorazowa symulacja na jednym urządzeniu i przy ustalonym łączu. Z niej pochodzi wynik punktowy od 0 do 100 i lista podpowiedzi, co poprawić.
Jeśli strona ma mały ruch, danych od użytkowników może nie być wcale albo narzędzie pokaże dane dla całej domeny zamiast jednej podstrony. Przy małych firmach to normalne. Zostaje wtedy test laboratoryjny — przydatny, choć jego wyniki potrafią się różnić między kolejnymi pomiarami.
Raport w Google Search Console
Jeśli masz Search Console, znajdziesz w nim raport Core Web Vitals. Grupuje podobne podstrony, osobno dla telefonów i komputerów, i oznacza je jako dobre, wymagające poprawy albo słabe. Też opiera się na danych od prawdziwych użytkowników, więc przy niewielkim ruchu bywa pusty.
Jak czytać wynik punktowy
Wynik 90 lub więcej Google oznacza jako dobry, 50–89 jako wymagający poprawy, a poniżej 50 jako słaby. Traktuj go jak termometr, nie jak cel. Dobry wynik w teście nie gwarantuje dobrych doświadczeń prawdziwych użytkowników, a pogoń za setką potrafi pochłonąć czas, który lepiej przeznaczyć na treść. Ważniejsze jest, czy klient szybko widzi ofertę i może z niej skorzystać.
Co najczęściej spowalnia stronę firmową
Przy przeglądach stron firmowych najczęściej spotykam kilka tych samych przyczyn. Rzadko chodzi o jedną rzecz — zwykle kilka drobiazgów sumuje się w wolną stronę.
- Za duże zdjęcia. Fotografia prosto z aparatu albo telefonu waży wielokrotnie więcej, niż potrzeba. Telefon pobiera obraz przygotowany na duży monitor, choć wyświetla go w małym okienku.
- Karuzela i wideo na górze strony. Kilka dużych zdjęć w sliderze albo film w tle to ciężar ładowany jako pierwszy — właśnie wtedy, gdy klient czeka na treść.
- Zewnętrzne skrypty. Czat, piksele reklamowe, osadzone mapy, kanały z mediów społecznościowych, widżety z opiniami. Każdy dokłada pracy przeglądarce, a część z nich opóźnia reakcję strony na kliknięcia.
- Rozbudowany motyw i wtyczki. Gotowe szablony często ładują kod do funkcji, z których nie korzystasz, i to na każdej podstronie.
- Fonty. Kilka krojów pisma w wielu odmianach to kolejne pliki do pobrania, zanim tekst wyświetli się w docelowym wyglądzie.
- Wolny serwer. Jeśli serwer długo „myśli”, zanim odeśle pierwszy fragment strony, nic, co dzieje się później, tego nie nadrobi.
- Brak pamięci podręcznej i kompresji. Przeglądarka za każdym razem pobiera wszystko od nowa, a pliki płyną w pełnym rozmiarze.
Dobra wiadomość: większość tych przyczyn widać w raporcie PageSpeed Insights i da się je poprawić bez przebudowy całej strony.
Jak poprawić szybkość strony — od najprostszych kroków
Proponuję kolejność, w której zwykle pracuję: najpierw rzeczy, które dają dużo przy małym wysiłku, potem zmiany wymagające programisty.
1. Zdjęcia: rozmiar, format i kolejność
- zmniejsz zdjęcia do wymiarów, w jakich są wyświetlane — zdjęcie na całą szerokość ekranu to co innego niż miniatura w liście,
- używaj nowoczesnych formatów, takich jak WebP lub AVIF, i kompresji, której nie widać gołym okiem,
- przygotuj kilka wersji tego samego obrazu, żeby telefon dostawał mniejszą, a duży monitor większą,
- zdjęcia niżej na stronie ładuj dopiero wtedy, gdy klient do nich przewija — to tak zwane leniwe ładowanie,
- nie stosuj leniwego ładowania do głównego zdjęcia na górze strony, bo ono ma przyjść jak najwcześniej,
- podawaj wymiary zdjęć w kodzie, żeby przeglądarka zarezerwowała dla nich miejsce, a tekst nie przeskakiwał.
W wielu systemach do zarządzania treścią część z tego dzieje się automatycznie, o ile zdjęcie wgrane do panelu nie jest ogromnym plikiem prosto z aparatu. Dlatego warto zmniejszyć je przed wgraniem.
2. Porządek w dodatkach
Zrób listę wszystkiego, co strona ładuje z zewnątrz, i przy każdej pozycji zadaj pytanie: czy ktoś z tego korzysta? Czat, na który nikt nie odpowiada, stary piksel po zakończonej kampanii czy osadzony kanał z Instagrama na stronie głównej to częste przykłady.
To, co zostaje, często można ładować później. Mapa dojazdu może pojawić się dopiero po kliknięciu w jej podgląd, a film — po kliknięciu w miniaturę. Klient, który ich potrzebuje, kliknie. Pozostali nie muszą na nie czekać.
3. Treść przed dodatkami
Przeglądarka czyta stronę po kolei. Jeśli na początku kodu stoją duże pliki stylów i skryptów, tekst i przycisk muszą na nie czekać. Programista może tak uporządkować kolejność, żeby najpierw pojawiły się menu, nagłówek i najważniejsza treść, a reszta doładowała się w tle. Ta sama zasada dotyczy fontów: tekst powinien być czytelny od razu, nawet jeśli docelowy krój pisma dochodzi chwilę później.
Tę zasadę pokazuję na interaktywnym porównaniu w prezentacji optymalizacji: dwie wersje tej samej strony, które różnią się tylko kolejnością i wagą ładowanych elementów.
4. Serwer, pamięć podręczna i kompresja
Pamięć podręczna sprawia, że przy kolejnej wizycie przeglądarka nie pobiera ponownie logo czy stylów. Kompresja zmniejsza pliki przesyłane przez sieć. Na stronach, które system składa przy każdym wejściu, na przykład w WordPressie, dużo daje też zapisywanie gotowych podstron, żeby serwer nie budował każdej od zera.
Jeśli mimo to serwer odpowiada wolno, problem może leżeć w samym hostingu: przeciążonej maszynie, przestarzałym oprogramowaniu albo serwerze daleko od Twoich klientów. Zmiana hostingu bywa wtedy najprostszą poprawką — pod warunkiem, że przeprowadzi się ją z planem i bez przerwy w działaniu strony.
5. Motyw i wtyczki
Jeśli strona stoi na rozbudowanym szablonie z kilkudziesięcioma wtyczkami, przegląd zwykle pokazuje kilka, bez których można się obejść. Każda usunięta wtyczka to mniej kodu do załadowania i mniej rzeczy do aktualizowania. Bywa jednak, że ciężar siedzi w samym motywie i bez jego wymiany niewiele da się zrobić.
Co możesz zrobić sam, a co lepiej zlecić
| Zadanie | Sam | Z wykonawcą |
|---|---|---|
| Test na telefonie i w PageSpeed Insights | Tak | Gdy potrzebujesz interpretacji wyników |
| Zmniejszanie zdjęć przed wgraniem do panelu | Tak | Automatyczne skalowanie i formaty w systemie strony |
| Usunięcie zbędnych widżetów i wtyczek | Często tak, ostrożnie | Gdy nie wiesz, od czego zależy działanie strony |
| Kolejność ładowania, fonty i skrypty | Rzadko | Tak |
| Pamięć podręczna, kompresja, serwer | Rzadko | Tak |
| Wymiana motywu lub przebudowa | Nie | Tak |
Zanim cokolwiek usuniesz, zrób kopię zapasową. Po każdej zmianie sprawdź formularze, menu i koszyk, jeśli go masz. Wtyczki bywają ze sobą powiązane w nieoczywisty sposób, a wyłączenie jednej potrafi zatrzymać wysyłkę zapytań.
Kiedy poprawki nie wystarczą
Czasem po przejściu całej listy strona nadal jest ciężka, bo problem siedzi w fundamentach: przestarzałym systemie, kreatorze, który nie daje dostępu do kodu, albo motywie zbudowanym z dziesiątek modułów. Wtedy każda kolejna poprawka kosztuje więcej, a daje mniej.
W takiej sytuacji warto policzyć, czy odświeżenie strony na lżejszej podstawie, z zachowaniem treści i adresów, nie wyjdzie taniej niż dalsze łatanie. Nie zawsze tak jest. Dlatego najpierw sprawdzam, ile da się osiągnąć poprawkami, a dopiero potem rozmawiamy o przebudowie.
Jak dbam o szybkość stron, które robię
Szybkość planuję razem z wyglądem, a nie po publikacji. Już przy projekcie decyduję, co klient ma zobaczyć najpierw, ile zdjęć naprawdę potrzeba na górze strony i które dodatki mogą poczekać. Przed publikacją sprawdzam stronę narzędziami, ale też zwyczajnie: czytam, przewijam i klikam na telefonie.
Lżejsze obrazy, uporządkowany kod i pomiary są w cenie każdej strony — od odświeżenia za 3 490 zł netto po rozbudowany serwis. Nie obiecuję konkretnego wyniku punktowego, bo zależy on też od serwera, urządzenia i łącza odwiedzającego. Obiecuję, że strona będzie przygotowana tak, żeby nie kazała czekać.
Jeśli masz już stronę i chcesz wiedzieć, co ją spowalnia, zacznij od audytu SEO od 990 zł netto. Sprawdzam w nim technikę, w tym szybkość, i wskazuję, co poprawić najpierw. A jeśli wolisz, żeby ktoś na stałe pilnował aktualizacji, kopii i wydajności, jest opieka techniczna od 249 zł netto miesięcznie.