Jak przyspieszyć stronę internetową: prosty poradnik

W skrócie

• Sprawdzaj szybkość przede wszystkim na telefonie. Ludzie na telefonach mają zwykle słabszy sprzęt i wolniejszy internet.
• Google ocenia szybkość trzema wskaźnikami: LCP (jak szybko widać główną treść), INP (jak szybko strona reaguje na kliknięcie) i CLS (czy elementy przeskakują).
• Najwięcej dają zwykle lżejsze zdjęcia, potem usunięcie zbędnych dodatków, porządek w czcionkach i dobre ustawienia serwera.
• Zmieniaj jedną rzecz naraz i sprawdzaj wynik przed zmianą i po niej.

Jak sprawdzić szybkość strony

Wystarczą trzy darmowe narzędzia Google:

• PageSpeed Insights (pagespeed.web.dev): wpisujesz adres strony i dostajesz dwa rodzaje wyników. Na górze są dane od prawdziwych odwiedzających, o ile strona ma ich wystarczająco dużo. Niżej jest test Lighthouse, w którym program naśladuje telefon i wolne łącze.
• Lighthouse w przeglądarce Chrome: ten sam test, uruchamiany na Twoim komputerze. Przydaje się, gdy chcesz szybko sprawdzić efekt zmiany. Znajdziesz go w narzędziach dla programistów (klawisz F12), w zakładce Lighthouse.
• Raport Core Web Vitals w Google Search Console: pokazuje, które podstrony są za wolne według danych od prawdziwych odwiedzających. Search Console to bezpłatny panel, w którym Google pokazuje właścicielowi dane o jego stronie.

Wynik testu zmienia się przy każdym uruchomieniu, bo zależy od tego, jak obciążony jest w danej chwili internet i serwer. Zrób kilka pomiarów i patrz na typowy wynik, a nie na jeden.

Co oznaczają LCP, INP i CLS

Wskaźnik	Co mierzy	Dobry wynik
LCP	Jak szybko pojawia się największy element na ekranie, na przykład zdjęcie albo nagłówek	do 2,5 sekundy
INP	Jak szybko strona reaguje na kliknięcie albo dotknięcie	do 0,2 sekundy
CLS	Jak bardzo elementy przeskakują podczas ładowania (im mniej, tym lepiej)	do 0,1

Google uznaje stronę za szybką, jeśli dobry wynik ma co najmniej trzy czwarte wizyt. INP w 2024 roku zastąpił starszy wskaźnik o nazwie FID, więc w starszych poradnikach możesz trafić na nieaktualne informacje.

Zdjęcia: najczęstszy winowajca

Zdjęcie prosto z aparatu albo telefonu może ważyć kilka megabajtów, a na stronie wyświetla się jako niewielki obrazek. To najczęstsza przyczyna wolnego ładowania.

• Zmniejsz zdjęcia do rozmiaru, w jakim naprawdę są wyświetlane, i przygotuj kilka wersji: mniejszą dla telefonów, większą dla dużych ekranów.
• Zapisuj je w nowoczesnych formatach AVIF albo WebP. Przy podobnej jakości ważą zwykle wyraźnie mniej niż JPG i PNG, a działają we wszystkich współczesnych przeglądarkach.
• Wczytuj zdjęcia niżej na stronie dopiero wtedy, gdy ktoś do nich przewinie (tak zwane leniwe ładowanie). Nie rób tego z dużym zdjęciem na samej górze strony, bo wtedy główna treść pojawi się później.
• Najważniejsze zdjęcie na górze strony oznacz jako pilne, żeby przeglądarka pobrała je jako pierwsze. Programista zrobi to jednym dopiskiem w kodzie.
• Podawaj wymiary każdego zdjęcia. Przeglądarka zostawi na nie miejsce i tekst nie będzie przeskakiwał.

Czcionki

• Trzymaj czcionki na tym samym serwerze co stronę, zamiast pobierać je z zewnętrznych usług. To jedno połączenie mniej i mniej kłopotów z prywatnością.
• Używaj mniej grubości i rodzajów czcionek. Każdy plik to kolejne dane do pobrania.
• Zostaw w plikach czcionek tylko potrzebne znaki. Dla strony po polsku wystarczy alfabet łaciński z polskimi literami.
• Każ przeglądarce pobrać najważniejsze czcionki od razu, a do tego czasu pokazywać tekst zwykłą czcionką. Dzięki temu tekst jest widoczny od pierwszej chwili.

Skrypty i wtyczki

Skrypty to kod, który dodaje stronie funkcje, na przykład czat, galerię albo statystyki. Każdy trzeba pobrać i uruchomić, a na słabszym telefonie to trwa. Ciężkie skrypty potrafią na chwilę zablokować stronę, przez co gorzej reaguje ona na kliknięcia.

• Usuń wtyczki i dodatki, których nikt nie używa: stare widżety, nieużywane przewijane galerie, dwa narzędzia do statystyk zamiast jednego.
• Wczytuj skrypty tylko tam, gdzie są potrzebne. Formularz z jednej podstrony nie musi wczytywać się na wszystkich.
• Skrypty, które nie są potrzebne od razu, wczytuj później, gdy strona już się pokaże.
• Uważaj na dodatki od innych firm: czaty, mapy, odtwarzacze filmów i kody reklamowe. Mapę Google można na przykład wczytać dopiero po kliknięciu.

Serwer i zapamiętywanie plików

• Czas odpowiedzi serwera to moment, od którego zaczyna się całe ładowanie. Wolny hosting spowalnia każdą podstronę.
• Kompresja, czyli zmniejszanie plików przed wysłaniem, sprawia, że tekst i kod strony szybciej docierają do odwiedzającego.
• Pamięć podręczna, czyli zapamiętywanie plików przez przeglądarkę, sprawia, że przy kolejnej wizycie nie trzeba ponownie pobierać czcionek i zdjęć, które się nie zmieniły.
• Nowoczesny sposób przesyłania danych (HTTP/2 albo HTTP/3) i certyfikat SSL, czyli kłódka przy adresie, są dziś standardem na dobrym hostingu.

Stabilny układ, czyli CLS

Przeskakujący tekst irytuje i prowadzi do przypadkowych kliknięć. Najczęstsze przyczyny:

• zdjęcia i okienka bez podanych wymiarów,
• baner albo komunikat wstawiany nad treścią, która już się wyświetliła,
• czcionka, która po wczytaniu zajmuje więcej albo mniej miejsca niż ta zastępcza.

Zostaw miejsce na każdy element, który pojawia się z opóźnieniem, i dobierz czcionkę zastępczą podobną do docelowej.

Od czego zacząć: kolejność działań

1. Zmierz najważniejsze podstrony na telefonie i zapisz wyniki.
2. Zmniejsz zdjęcia na górze strony i największe zdjęcia na stronie.
3. Usuń zbędne wtyczki i skrypty.
4. Uporządkuj czcionki.
5. Sprawdź, czy serwer zmniejsza pliki i czy przeglądarka może je zapamiętywać.
6. Zmierz ponownie i porównaj.

Kiedy przyspieszanie nie wystarczy

Czasem strona jest wolna przez sam sposób, w jaki ją zbudowano: ciężki szablon, kreator stron, który tworzy mnóstwo kodu, albo dziesiątki powiązanych ze sobą wtyczek. Wtedy każda poprawka daje niewiele, a koszt rośnie. W takiej sytuacji warto porównać koszt dalszego łatania z modernizacją strony.

Jeśli chcesz, żebyśmy zajęli się tym za Ciebie, zobacz, jak wygląda optymalizacja szybkości strony. Mierzymy przed zmianami i po nich, więc efekt widać w liczbach.