Wprowadzenie
Wynik w PageSpeed Insights lub Lighthouse to nie tylko kwestia próżności. To miernik użyteczności, wydajności, komfortu użytkownika. Gdy strona działa szybko, użytkownik zostaje; gdy działa wolno — odchodzi. W tym artykule przedstawię, jak w 14 dni naprawdę można osiągnąć wynik około 98/100 — opisując metody, pułapki i konkretne techniki.
Początkowy stan i wyzwania
- Strona działała przeciętnie: długi czas ładowania obrazu tła, sporo bibliotek JS, skrypty blokujące renderowanie.
- Motyw / szablon nie był zoptymalizowany na mobile.
- Brak cache’owania, brak CDN, obrazy w dużych rozdzielczościach.
Plan działania w ciągu 14 dni
| Dzień | Zadania |
|---|---|
| 1-2 | Audyt: narzędzia typu Lighthouse, PageSpeed Insights — zidentyfikowanie największych hamulców: obrazy, skrypty, CSS, serwer |
| 3-5 | Optymalizacja obrazów: konwersja do WebP / AVIF, dobór odpowiednich wymiarów, lazy loading |
| 6-8 | Minifikacja i redukcja plików CSS / JS — połączenie plików, usunięcie zbędnych bibliotek |
| 9-10 | Ustawienie cache’owania: przeglądarkowego, serwerowego, wykorzystanie CDN, jeśli to możliwe |
| 11-12 | Poprawa wersji mobilnej: responsywny layout, zmniejszenie skali elementów, uproszczenie interfejsu |
| 13-14 | Testy, iteracje: mierzenie wyników, eliminowanie kolejnych wąskich gardeł, retesting |
Konkrety techniczne
- Obrazy zmniejszono o 60-80% bez widocznej utraty jakości – dobór formatów, kompresja.
- Skrypty ładowane asynchronicznie lub przeniesione na dół strony, żeby nie blokowały ładowania treści pierwszego ekranu.
- Korzystanie z cache’owania zasobów statycznych (CSS, JS, grafiki).
- CDN – serwery rozmieszczone geograficznie, by użytkownicy z różnych miejsc mieli szybki dostęp.
Wyniki
- Wynik PageSpeed Insights: ~98/100 — mocno poprawiony względem stanu początkowego.
- Skrócony czas ładowania pierwszego ekranu (First Contentful Paint), szybciej użytkownik widzi coś sensownego.
- Lepsze doświadczenie użytkowników mobile: mniej porzucanych sesji, dłuższy czas spędzany na stronie.
