Znacie to? Tworzysz strony dla klientów, dopieszczasz każdy szczegół, a potem patrzysz na 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ć. A skoro tworzę strony dla innych, nie mogłam dłużej ignorować własnej wizytówki – moi potencjalni klienci też przeglądają internet głównie na telefonie. Postanowiłam to naprawić. Oto co zrobiłam.
Stan początkowy – nie było różowo
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żytkownik celujący w przycisk nagle widział, jak cała treść przeskakuje – i klikał nie wiadomo co. Nie o to chodzi w dobrej stronie.
Krok 1: wymiana cache – z W3 Total Cache na WP Fastest Cache
Miałam W3 Total Cache, ale… szczerze mówiąc, nigdy nie skonfigurowałam go porządnie. Masa opcji, złożone ustawienia – „włączyłam i zapomniałam”. Efekt? Cache praktycznie nie działał jak trzeba.
Zaczęłam od nowa: usunęłam W3 Total Cache i zainstalowałam WP Fastest Cache – prostszą wtyczkę, która „po prostu działa”. Włączyłam m.in. cache, minifikację HTML i CSS, łączenie plików CSS, osobny cache dla mobile (ważne!) i wyłączenie emoji. NIE włączałam minifikacji ani łączenia JavaScriptu – Elementor nie lubi takich eksperymentów.
Krok 2: Kadence ma ukryte skarby
Używam motywu Kadence od dawna, ale dopiero teraz zajrzałam do sekcji „Wydajność” w ustawieniach. Ile tam opcji! Włączyłam zoptymalizowany blok grupy, lokalne Google Fonts (szybciej i zgodnie z RODO) oraz wyłączenie duplikatu sitemapy (Yoast i tak robi swoją).
Efekt: wynik skoczył do 86. Potem spadł do 82, znów 84… PageSpeed ma humory i wyniki wahają się plus minus 5 punktów. To normalne.
Krok 3: fix CLS
Największy problem 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? 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ę go potrzebuję?
PageSpeed wrzeszczało o 126 KB nieużywanego JavaScriptu. Większość to Google Analytics. Zastanowiłam się: kiedy ostatnio zaglądałam do GA? Nie pamiętam – do podstawowych statystyk używam głównie Google Search Console. Wyłączyłam GA przez Complianz (miałam je tam kiedyś skonfigurowane i… zapomniałam). Efekt: minus 75 KB JavaScriptu, 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ż wtyczkę, której nawet nie pamiętam po co instalowałam. 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 ~82) · FCP 2.3s (45% lepiej!) · LCP 4.0s (31% lepiej!) · CLS 0 (idealnie!). Desktop został na 98-99/100 – już był dobry.
Czego się nauczyłam
- Twórcy stron często zapominają o własnych witrynach. Skupiamy się na projektach klientów, a własne strony zostają „na później”. Dopiero gdy w końcu usiadłam, zobaczyłam, jak łatwo to poprawić.
- Cache to must-have, nie nice-to-have. Plus 12 punktów za 30 minut? Najlepsza inwestycja czasu w optymalizację.
- CLS to cichy zabójca konwersji. Nikt nie powie „ej, ta strona ma wysoki CLS” – ludzie po prostu denerwują się, że treść skacze, i wychodzą.
- PageSpeed nie jest stały. Wyniki wahały się między 79 a 86. To normalne – liczy się trend, nie pojedynczy wynik.
- 84/100 to świetny wynik dla realnej strony z opiniami, fontami i wszystkimi funkcjami. Nie trzeba gonić 100 za wszelką cenę.
