Wolna strona internetowa - jak ją przyspieszyć?

Trzy narzędzia wystarczą i każde odpowiada na inne pytanie.

Zacznij od danych o prawdziwych użytkownikach, nie od symulacji. Strona bywa szybka na łączu światłowodowym i nie do zniesienia na telefonie w terenie, a to ten drugi przypadek decyduje o utracie klienta.

Zwróć uwagę na czas do pierwszego bajtu. Jeśli serwer odpowiada dłużej niż pół sekundy, żadne sztuczki po stronie przeglądarki tego nie nadrobią i problem leży w hostingu albo w kodzie generującym stronę.

W typowej witrynie firmowej obrazy odpowiadają za większość wagi strony i jednocześnie są najłatwiejsze do naprawy.

Trzy rzeczy do zrobienia po kolei: skalowanie do rozmiaru, w jakim obraz jest naprawdę wyświetlany, konwersja do formatu WebP oraz opóźnione ładowanie tego, co poniżej pierwszego ekranu.

Dane z naszych wdrożeń pokazują, że sama konwersja i kompresja zdejmuje typowo 50-80% wagi obrazów. Strona z pięcioma megabajtami zdjęć schodzi do jednego, a na wolnym połączeniu przekłada się to na kilkukrotnie szybsze wczytanie.

Szczegóły opisujemy w poradniku optymalizacja zdjęć na stronie, a samo opóźnione ładowanie w lazy loading.

Bez pamięci podręcznej każde wejście na stronę uruchamia PHP i zapytania do bazy, żeby zbudować dokładnie ten sam wynik, co minutę wcześniej. Cache zapisuje gotową stronę i podaje ją od razu.

Warstw jest kilka i warto rozumieć, która co robi. Pamięć strony zapisuje gotowy HTML. Pamięć obiektów odciąża bazę przy powtarzalnych zapytaniach. Pamięć opcode przyspiesza samo wykonywanie PHP. Cache przeglądarki sprawia, że wracający użytkownik nie pobiera tych samych plików drugi raz.

Najczęstszy błąd to włączenie trzech wtyczek cache naraz. Zamiast się sumować, potrafią się wykluczać i psuć koszyk albo formularze. Konfigurację opisujemy w poradniku cache w WordPress.

Nie liczba wtyczek decyduje o szybkości, tylko to, co robią. Jedna źle napisana potrafi spowolnić witrynę bardziej niż dwadzieścia porządnych.

Sprawdź, które wtyczki ładują swoje skrypty i style na wszystkich podstronach, choć są potrzebne tylko na jednej. Klasyczny przykład to wtyczka formularza kontaktowego dokładająca kod do każdej strony w serwisie.

Motyw uniwersalny z kreatorem wizualnym kosztuje osobno. Elastyczność jest okupiona wagą, bo szablon musi obsłużyć każdy możliwy układ, także ten, którego nie używasz.

To najczęściej pomijana warstwa, bo kod nie jest Twój i nie widać go w plikach witryny. Każdy piksel reklamowy, okno czatu, mapa dojazdu i osadzone wideo dokłada połączenie do obcego serwera oraz kilkaset kilobajtów.

Otwórz zakładkę Sieć w przeglądarce i posortuj żądania po rozmiarze. Typowa witryna firmowa ma tam pięć do dziesięciu obcych domen, z czego połowa pochodzi z narzędzi wdrożonych lata temu i nieużywanych od tego czasu.

Trzy sensowne ruchy: usuń to, czego nikt nie analizuje, ładuj czat dopiero po interakcji użytkownika, a mapę zastąp statycznym obrazem z linkiem. Osadzone wideo zamień na miniaturę, która uruchamia odtwarzacz po kliknięciu.

Skrypty analityczne warto zostawić, ale wystarczy jeden zestaw. Trzy narzędzia mierzące to samo kosztują trzy razy tyle czasu ładowania i nie dają trzy razy więcej wiedzy.

Witryna po kilku latach nosi w bazie rzeczy, których nikt nie ogląda. Autozapisy wersji wpisów, kosz, spam w komentarzach, dane po usuniętych wtyczkach i wpisy tymczasowe, które nie wygasły.

Przy dużym sklepie dochodzi historia zamówień i logi wtyczek, które zapisują każde zdarzenie i nigdy nie sprzątają. Tabela rosnąca do setek tysięcy wierszy spowalnia zapytania nawet na dobrym serwerze.

Porządek robi się w trzech krokach: kopia zapasowa, usunięcie danych osieroconych po wtyczkach, ograniczenie liczby zapisywanych wersji wpisów. Ostatnie ustawia się jedną linią w `wp-config.php`, wpisem `define( 'WP_POST_REVISIONS', 5 );`.

Czyszczenie bazy bez kopii zapasowej to najprostsza droga do nieodwracalnej straty, dlatego kolejność jest tu nienegocjowalna.

Jeśli czas do pierwszego bajtu przekracza pół sekundy, a strona ma cache, przyczyna jest po stronie serwera.

Według ofert popularnych hostingów pakiety za 20-30 zł miesięcznie dzielą zasoby między wiele kont i mają najniższe limity procesów, więc przy większym ruchu strona zwalnia właśnie tam. Przyzwoity VPS zaczyna się od 50-150 zł miesięcznie, a hosting zarządzany pod WordPressa od 100-300 zł.

Zmiana hostingu jest jednak ostatecznością, nie pierwszym krokiem. Przeniesienie wolnej witryny na szybszy serwer daje poprawę, ale nie naprawia obrazów po kilka megabajtów ani wtyczek ładujących się wszędzie. Kolejność ma znaczenie, bo inaczej płacisz więcej za hosting i nadal masz wolną stronę.

Kiedy migracja jest uzasadniona i jak ją przeprowadzić bez przestoju, opisujemy w poradniku wolny hosting.

Przeglądarka wstrzymuje rysowanie strony, dopóki nie pobierze plików, które uzna za niezbędne do pierwszego widoku. Najczęściej są to arkusze stylów i czcionki.

Czcionki z zewnętrznego serwera dokładają połączenie do obcej domeny, zanim pokaże się pierwszy tekst. Przeniesienie ich na własny serwer i ograniczenie do dwóch odmian, których naprawdę używasz, zdejmuje ten koszt. Ustawienie wyświetlania zapasowej czcionki na czas pobierania sprawia, że tekst pojawia się od razu, a nie po sekundzie bieli.

Arkusze stylów motywu i wtyczek często ładują się w komplecie na każdej podstronie. Wystarczy, że jedna wtyczka galerii dokłada swój plik na stronie kontaktowej, na której żadnej galerii nie ma.

To warstwa, w której zysk liczy się w dziesiątych częściach sekundy, więc wchodzi się w nią po obrazach i cache, a nie zamiast nich.

Trzy wskaźniki opisują trzy różne rodzaje frustracji użytkownika.

Najczęstszym winowajcą CLS jest baner zgody na pliki cookie, który wpycha się nad treść po jej wyświetleniu. Rezerwacja miejsca w układzie rozwiązuje to bez żadnej pracy nad wydajnością.

Szczegółowo rozkładamy to w poradniku Core Web Vitals.

Według naszego cennika podstawowa optymalizacja, czyli obrazy, cache i minifikacja, to 500-1500 zł. Dane z większych wdrożeń, gdzie dochodzi analiza kodu i zmiana hostingu, pokazują 2000-5000 zł.

Zysk zależy od punktu wyjścia. Witryna z nieskompresowanymi zdjęciami i bez cache przyspiesza kilkukrotnie i widać to gołym okiem. Strona już zoptymalizowana zyskuje dziesiąte części sekundy i tam liczy się raczej utrzymanie stanu niż kolejne poprawki.

Wstępną analizę PageSpeed robimy bezpłatnie, żeby było wiadomo, czy w ogóle jest o co walczyć i która warstwa odpowiada za stratę czasu.

Mierz przed i po, na tym samym adresie i o podobnej porze. Pojedynczy pomiar PageSpeed potrafi wahać się o kilka punktów bez żadnej zmiany na stronie, więc porównuj serie, nie pojedyncze wyniki.

Twardsze dane niż wynik z narzędzia dają trzy rzeczy: czas do pierwszego bajtu, waga strony w kilobajtach i liczba żądań. To liczby, które nie zależą od nastroju narzędzia.

Na dane od prawdziwych użytkowników trzeba poczekać. Raport Core Web Vitals w Search Console opiera się na oknie 28 dni, więc poprawa wdrożona dziś będzie tam widoczna dopiero za kilka tygodni. To najczęstszy moment rezygnacji: wynik w narzędziu skoczył, raport milczy, ktoś uznaje, że nie zadziałało.

Sprawdź też ścieżki, które zarabiają: koszyk, formularz kontaktowy, wyszukiwarkę wewnętrzną. Optymalizacja, która przyspieszyła stronę główną i zepsuła koszyk, jest stratą, nie zyskiem.

1. Zmierz czas do pierwszego bajtu i sprawdź dane od prawdziwych użytkowników
2. Skompresuj i przeskaluj obrazy, włącz opóźnione ładowanie
3. Uruchom jedną warstwę cache strony i sprawdź, czy koszyk oraz formularze działają
4. Usuń wtyczki dublujące funkcje i te ładujące się na wszystkich podstronach
5. Zarezerwuj miejsce dla banerów i obrazów, żeby układ nie skakał
6. Dopiero teraz rozważ mocniejszy hosting albo CDN

Ta kolejność wynika z prostego rachunku: pierwsze trzy kroki kosztują kilka godzin pracy i dają największy skok, a ostatni kosztuje co miesiąc.

Robimy to jako jednorazową optymalizację albo w ramach stałej opieki nad stroną WordPress. Napisz przez formularz na stronie kontakt, a zaczniemy od bezpłatnej analizy.