Dlaczego strona ładuje się wolno i jak to naprawić

Najpierw zmierz, potem poprawiaj

Wrażenie, że strona "jakoś wolno chodzi", nie wystarczy. Bez pomiaru można spędzić tydzień na zmianach, które niczego nie zmienią. Są trzy narzędzia, które w zupełności wystarczą na start.

Google PageSpeed Insights

Wklejasz adres strony i dostajesz wynik osobno dla telefonu i dla komputera. Najważniejsza jest sekcja z listą problemów i szacowanym czasem do odzyskania. Zwróć uwagę, które elementy narzędzie wskazuje jako największe: zwykle powtarza się kilka tych samych zdjęć i skryptów. Testuj podstrony, nie tylko stronę główną. Ofertowa albo blogowa potrafi wypaść znacznie gorzej.

Zakładka Network w przeglądarce

Wciśnij F12, przejdź do zakładki Network i odśwież stronę. Zobaczysz listę wszystkich plików, ich rozmiar i czas pobierania. Posortuj po rozmiarze. Jeżeli na górze siedzi zdjęcie ważące kilka megabajtów, masz odpowiedź w pierwszej minucie. Sprawdź też, ile w ogóle jest żądań. Sto kilkadziesiąt plików na prostej stronie firmowej to sygnał, że coś jest ładowane bez potrzeby.

Search Console

W raporcie Core Web Vitals widzisz dane od realnych użytkowników, a nie z testu laboratoryjnego. To istotna różnica. PageSpeed pokazuje symulację, Search Console pokazuje, jak strona zachowuje się na sprzęcie i łączach Twoich odbiorców. Adresy są tam grupowane, więc od razu widać, czy problem dotyczy całego serwisu, czy jednego szablonu podstrony.

Core Web Vitals prostym językiem

Google mierzy trzy rzeczy i wszystkie da się wytłumaczyć bez żargonu.

• LCP, czyli czas do wyświetlenia największego elementu na ekranie. Zwykle to zdjęcie w nagłówku albo duży blok tekstu. Dobra wartość to do 2,5 sekundy.
• INP, czyli reakcja strony na kliknięcie. Klikasz w menu i mierzysz, ile trwa, zanim coś się wydarzy. Dobra wartość to do 200 milisekund.
• CLS, czyli przeskakiwanie układu podczas ładowania. Zaczynasz czytać, a tekst nagle zjeżdża w dół, bo doładowało się zdjęcie. Dobra wartość to do 0,1.

Te trzy wskaźniki nie opisują tego samego. Strona może ładować się szybko, a i tak irytować przeskakującym układem.

Najczęstsze przyczyny i co z nimi zrobić

Zdjęcia wgrane bez obróbki

To przyczyna numer jeden. Zdjęcie prosto z aparatu albo ze stocka ma kilka tysięcy pikseli szerokości, a na stronie wyświetla się w kontenerze o szerokości 800 pikseli. Przeglądarka i tak musi pobrać cały plik.

Poprawka: przeskaluj zdjęcia do wymiarów, w jakich faktycznie się wyświetlają, i skompresuj je. Zapisz w formacie WebP albo AVIF, które przy podobnej jakości ważą wyraźnie mniej niż JPEG. Do każdego obrazka dopisz atrybuty width i height, żeby przeglądarka zarezerwowała miejsce jeszcze przed pobraniem pliku. To wprost naprawia CLS. Zdjęciom poniżej pierwszego ekranu dodaj loading="lazy", żeby ładowały się dopiero przy przewijaniu. Zdjęciu w nagłówku tego atrybutu nie dodawaj, bo opóźnisz LCP.

Skrypty zewnętrzne

Czat, piksel reklamowy, mapa Google, karuzela, dwa narzędzia analityczne, wtyczka do opinii. Każde z nich dokłada własne pliki, często z innego serwera. Strona czeka na wszystkie.

Poprawka: wypisz, co masz podpięte, i skreśl to, czego nie używasz. Reszcie dodaj async albo defer, żeby nie blokowały renderowania. Mapę zamień na statyczny obrazek z linkiem do nawigacji. Czat ładuj dopiero po kliknięciu w ikonę.

Wtyczki i ciężkie motywy

Szablony z kreatorów stron muszą obsłużyć każdy możliwy układ, więc ładują kod również dla sekcji, których nie masz. Do tego dochodzą wtyczki instalowane pod jedną funkcję i nigdy nieusunięte.

Poprawka: przejrzyj listę wtyczek i wyłącz nieużywane. Pamiętaj, że wyłączona wtyczka nadal potrafi zostawiać ślady w kodzie, więc usuwaj, a nie dezaktywuj. Przy mocno rozbudowanych szablonach czasem prościej i taniej jest napisać stronę od nowa lekkim kodem, zamiast wycinać po kawałku to, czego motyw nie potrzebuje.

Serwer bez cache i kompresji

Jeśli serwer wysyła pliki nieskompresowane i każe przeglądarce pobierać je od zera przy każdej wizycie, tracisz czas na pustym miejscu.

Poprawka: włącz kompresję (gzip lub brotli) i nagłówki cache dla plików statycznych. Na hostingach współdzielonych bywa też tak, że serwer po prostu odpowiada wolno. Wtedy żadna optymalizacja kodu tego nie nadrobi i trzeba zmienić pakiet albo dostawcę.

Fonty

Fonty ładowane w standardowy sposób blokują wyświetlenie tekstu. Użytkownik widzi puste miejsce, choć treść jest już pobrana.

Poprawka: dodaj preload dla najważniejszego kroju, ustaw font-display: swap i ogranicz liczbę odmian. Trzy grubości zwykle wystarczą, a każda kolejna to dodatkowy plik.

Od czego zacząć

Nie musisz robić wszystkiego naraz. Z mojego doświadczenia największą różnicę dają dwie rzeczy: uporządkowanie zdjęć i ograniczenie skryptów zewnętrznych. To zwykle kilka godzin pracy, a efekt widać w pomiarze od razu. Reszta, czyli fonty, cache i porządki w kodzie, dokłada się później.

1. Zmierz stan wyjściowy w PageSpeed Insights i zapisz wynik.
2. Popraw zdjęcia: rozmiar, kompresja, WebP, width, height, loading="lazy".
3. Zrób przegląd skryptów i wywal, co zbędne.
4. Włącz kompresję i cache na serwerze.
5. Zmierz ponownie i porównaj z zapisanym wynikiem.

Kiedy warto zlecić audyt

Jeśli lista problemów w PageSpeed nic Ci nie mówi albo poprawki nie dają efektu, sensowniej jest sprawdzić stronę porządnie. Audyt pokazuje, co realnie spowalnia konkretnie Twoją stronę, w jakiej kolejności to naprawiać i ile z tego da się zrobić bez przebudowy. U mnie audyt zaczyna się od 349 zł. Pracuję zdalnie, z klientami z całej Polski, więc lokalizacja nie ma znaczenia. Odezwij się, jeśli chcesz, żebym rzucił okiem.