Jak poprawiłam mobile PageSpeed z 67 na 84 – optymalizacja WordPress krok po kroku
Wstęp
Znacie to? Tworzysz strony dla klientów, dopieszczasz każdy szczegół, a potem patrzysz na swoją własną witrynę i… no cóż. „Później to poprawię”, „Działa w sumie”, „Nie mam teraz czasu”.
Tak było ze mną przez ostatnie miesiące. Desktop wyglądał świetnie – 98/100 w PageSpeed. Ale mobile? 67/100. Auć!
Jako osoba, która tworzy strony dla innych, nie mogłam dłużej ignorować własnej wizytówki. W końcu moi potencjalni klienci też przeglądają internet głównie na telefonie.
Postanowiłam to naprawić. Oto co zrobiłam.
Stan początkowy - rzeczywistość nie była różowa
Mobile: 67/100
Kiedy zobaczyłam szczegóły, zrobiło mi się słabo:
- First Contentful Paint: 4.2s (powinno być poniżej 1.8s)
- Largest Contentful Paint: 5.8s (powinno być poniżej 2.5s)
- Cumulative Layout Shift: 3.2s
Ten ostatni był najgorszy. CLS to miara tego, jak bardzo treść „skacze” podczas ładowania. 3.2s oznaczało, że użytkownicy próbując kliknąć przycisk, nagle widzieli jak cała treść przeskakuje i klikali nie wiadomo co.
Nie o to chodzi w dobrej stronie.
Krok 1: Wymiana cache - z W3 Total Cache na WP Fastest Cache
Miałam zainstalowane W3 Total Cache, ale… szczerze mówiąc, nigdy nie poświęciłam czasu żeby je prawidłowo skonfigurować. Masa opcji, złożone ustawienia, a ja po prostu „włączyłam i zapomniałam”. Efekt? Cache praktycznie nie działał jak powinien.
Postanowiłam zacząć od nowa. Usunęłam W3 Total Cache i zainstalowałam WP Fastest Cache – prostszą wtyczkę, która „po prostu działa”.
Konfiguracja WP Fastest Cache jest o wiele bardziej przejrzysta
Włączone m.in.:
- Cache włączony (oczywiście!)
- Minifikacja HTML i CSS
- Łączenie plików CSS
- Osobny cache dla mobile (ważne!)
- Wyłączenie emoji
Nie włączałam:
- Minifikacji JavaScript – Elementor nie lubi takich eksperymentów
- Łączenia JS – to prosi się o problemy
Krok 2: Kadence ma ukryte skarby
Używam Kadence Theme od dawna, ale dopiero teraz zajrzałam do sekcji „Wydajność” w ustawieniach motywu.
O matko, ile tam opcji!
Włączyłam:
- Zoptymalizowany blok grupy
- Lokalne Google Fonts (szybciej plus zgodne z RODO)
- Wyłączenie duplikatu sitemapy (Yoast i tak robi swoją)
Efekt: Wynik skoczył do 86. No dobra, potem spadł do 82, znowu 84… PageSpeed ma swoje humory i wyniki wahają się plus minus 5 punktów. To normalne.
Krok 3: Fix CLS
Największy problem mojej strony to CLS – 3.2 sekundy skakania treści.
Po chwili detektywistyki znalazłam winowajcę: avatary w opiniach Google. Nie miały określonych wymiarów, więc przeglądarka nie wiedziała ile miejsca zarezerwować. Treść ładowała się, potem avatary, i bum – wszystko przeskakiwało.
Rozwiązanie? Dodałam kilka linijek CSS w Wygląd, Dostosuj, Dodatkowy CSS:
.wprevpro_t1_IMG_4 {
width: 50px;
height: 50px;
}
.wprevpro_t1_outer_div_0 {
min-height: 250px;
}
Efekt: CLS spadło z 3.2s do… 0. Zero. Idealnie. To była gra warta świeczki.
Krok 4: Google Analytics - czy naprawdę tego potrzebuję?
PageSpeed wrzeszczało o 126 KB nieużywanego JavaScript. Większość to Google Analytics.
Zastanowiłam się: kiedy ostatnio zaglądałam do GA? Nie pamiętam. Używam głównie Google Search Console do podstawowych statystyk.
Wyłączyłam GA przez Complianz (miałam je tam kiedyś skonfigurowane i… zapomniałam):
- Ustawienia, Complianz, Kreator
- „Czy sporządzasz statystyki?” – Nie
- Zapisz
Efekt: Minus 75 KB JavaScript. Strona ładuje się wyraźnie szybciej.
Krok 5: Cleanup wtyczek - mniej znaczy więcej
Przejrzałam listę wtyczek i wyrzuciłam to, czego nie używam.
Najważniejsze: Akismet. Po co mi ochrona przed spamem w komentarzach, skoro nie mam włączonych komentarzy?
Usunęłam też jedną wtyczkę, której nawet nie pamiętam po co instalowałam (pewnie był jakiś test, coś nie działało, zostało).
Zostało to, czego naprawdę używam: Polylang, UpdraftPlus i kilka innych niezbędnych.
Wyniki - było warto
PRZED:
- Mobile: 67/100
- FCP: 4.2s
- LCP: 5.8s
- CLS: 3.2s (dramat!)
PO:
- Mobile: 79-84/100 (średnio około 82)
- FCP: 2.3s (45 procent lepiej!)
- LCP: 4.0s (31 procent lepiej!)
- CLS: 0 (idealnie!)
Desktop pozostał na poziomie 98-99/100 (już był dobry).
Co się nauczyłam
1. Twórcy stron często zapominają o swoich witrynach
Skupiamy się na projektach dla klientów, a własne strony zostają „na później”. Dopiero gdy w końcu usiadłam i poświęciłam chwilę, zdałam sobie sprawę jak łatwo to poprawić.
2. Cache to must-have, nie nice-to-have
Plus 12 punktów za 30 minut? To najlepsza inwestycja czasu w optymalizację. Bez dyskusji.
3. CLS to cichy zabójca konwersji
Użytkownicy nie mówią „ej, ta strona ma wysoki CLS”. Oni po prostu denerwują się, że treść skacze i… wychodzą. Naprawienie tego powinno być priorytetem.
4. PageSpeed nie jest stały
Wyniki wahały się między 79 a 86. To normalne. Nie panikuj jeśli jeden test pokazuje 82, a następny 84. Liczy się trend, nie pojedynczy wynik.
5. 84/100 to świetny wynik dla WordPressa
Szczególnie z Elementorem i pełną funkcjonalnością. Nie musisz mieć 100/100 – 80 plus to już bardzo dobrze.
Checklista - jeśli chcesz zoptymalizować swoją stronę
Przed rozpoczęciem:
- Zrób backup
- Zaktualizuj wszystko (wtyczki, theme, WordPress)
- Zrób test PageSpeed i zapisz wynik
Podstawowa optymalizacja (1-2h):
- Sprawdź czy Twój cache działa prawidłowo (może warto zmienić wtyczkę?)
- Przejrzyj opcje wydajności w swoim theme
- Znajdź i napraw elementy powodujące CLS
- Sprawdź tracking scripts – może coś wyłączyć?
- Cleanup wtyczek – usuń co nieużywane
- Delete cache i przetestuj kilka razy
Weryfikacja:
- Strona wygląda OK? (otwórz w incognito)
- Wszystko działa? (formularze, menu, etc.)
- Test na prawdziwym telefonie
Podsumowanie
Z 67 na 84 punkty w Mobile PageSpeed. CLS z 3.2s na 0. Strona ładuje się szybciej, wygląda lepiej, użytkownicy są zadowoleni.
Czy to perfekcja? Nie. Czy to wystarczy? Jak najbardziej.
Czasem najlepszą strategią jest po prostu usiąść i zająć się własną stroną. Bo choć tworzę strony dla innych, moja własna też zasługuje na uwagę.
A teraz mam stronę, której nie wstydzę się pokazać. I to chyba najważniejsze.
Potrzebujesz pomocy z optymalizacją Twojej strony WordPressa? Skontaktuj się ze mną!
