Które przełączniki LiteSpeed Cache włączyć, dlaczego Deferred zamiast Delayed i czemu Combine psuje strony. Konfiguracja, którą wdrażamy u klientów, ekran po ekranie.
LiteSpeed Cache to najskuteczniejsza darmowa wtyczka przyspieszająca WordPressa - pod jednym warunkiem: strona musi stać na serwerze LiteSpeed, bo tylko wtedy działa jej serce, czyli cache na poziomie serwera. W tym poradniku przechodzimy przez konfigurację ekran po ekranie: które przełączniki włączyć, które zostawić w spokoju i - co najważniejsze - które potrafią zepsuć stronę, jeśli włączysz je bez zrozumienia.
Konfiguracja poniżej to zestaw, który wdrażamy u klientów na naszych serwerach. Nie jest to „wszystko na maksa" - to ustawienia, które dają realne przyspieszenie bez ryzyka, że formularz przestanie działać, a strona zamarznie do pierwszego kliknięcia.
Typowa wtyczka cache buduje kopie stron w PHP - żądanie i tak przechodzi przez WordPressa, tylko krótszą ścieżką. LiteSpeed Cache działa inaczej: gotowe strony serwuje bezpośrednio serwer WWW, zanim PHP w ogóle wstanie. Różnica jest zasadnicza - odpowiedź z cache serwerowego to typowo kilkadziesiąt milisekund, niezależnie od tego, jak ciężka jest sama strona.
Warunek: serwer LiteSpeed (lub OpenLiteSpeed). Na cudzym Apache czy nginx wtyczka też się zainstaluje, ale jej główny mechanizm nie zadziała i zostaną tylko optymalizacje dodatkowe. Na naszym hostingu każdy pakiet działa na LiteSpeed, więc wtyczka pracuje w pełnym trybie od razu po instalacji.
Zainstaluj wtyczkę „LiteSpeed Cache" z oficjalnego katalogu i aktywuj. Wejdź w LiteSpeed Cache - Cache i upewnij się, że główny przełącznik „Enable Cache" jest włączony. Już samo to daje największy pojedynczy zysk całej konfiguracji.
Test, czy cache serwerowy naprawdę działa: otwórz stronę w trybie prywatnym przeglądarki, a następnie w narzędziach deweloperskich (zakładka Sieć) sprawdź nagłówki odpowiedzi. Szukasz nagłówka x-litespeed-cache: hit. Pierwsza odsłona pokaże „miss" (strona dopiero trafia do cache), druga powinna pokazać „hit". Jeśli zawsze widzisz „miss", sprawdź sekcję o wykluczeniach niżej.
W podzakładce Excludes dodaj adresy, które nigdy nie powinny trafić do cache. Dla sklepu WooCommerce wtyczka robi to automatycznie (koszyk, kasa, moje konto), ale niestandardowe strony - np. własny formularz wyceny z dynamiczną treścią - trzeba dopisać ręcznie.
To sekcja odpowiedzialna za miniaturyzację i przestawianie CSS/JS. Zalecenia oparte na naszych wdrożeniach:
CSS Minify, JS Minify: włącz. Usuwanie białych znaków jest bezpieczne i zawsze coś daje.
CSS Combine, JS Combine: zostaw wyłączone. Łączenie plików miało sens w czasach HTTP/1.1. Przy HTTP/2 i HTTP/3 przeglądarka pobiera wiele plików równolegle, a jeden wielki plik po każdej zmianie musi być pobrany w całości od nowa. Combine to też najczęstsze źródło zepsutych stylów.
Load JS Deferred: wybierz „Deferred", nie „Delayed". To najważniejsza decyzja w całej zakładce i miejsce, w którym poradniki z internetu wyrządzają najwięcej szkód. Tryb opóźniony (Delayed) wstrzymuje wykonanie skryptów do pierwszej interakcji użytkownika - wynik w testach syntetycznych pięknieje, ale strona jest martwa do pierwszego ruchu myszą: nie działa menu, slider stoi, formularz nie reaguje. Widzieliśmy sklepy, które „przyspieszyły" w PageSpeed i równocześnie zaczęły gubić klientów. Deferred wykonuje skrypty po sparsowaniu HTML - strona jest interaktywna od razu.
Wykluczenia z deferu: jeśli po włączeniu Deferred coś przestaje działać, niemal zawsze winny jest skrypt zależny od jQuery wykonywany przed jego załadowaniem. Dodaj jquery do pola „JS Deferred / Delayed Excludes" - to standardowe wykluczenie, które stosujemy domyślnie.
Generate Critical CSS / UCSS: zaawansowane i wymagające testów po każdej zmianie motywu. Włączaj tylko, jeśli po zmianie potrafisz sprawdzić stronę na kilku szablonach podstron. Źle wygenerowany krytyczny CSS objawia się „mignięciem" niestylowanej treści.
Po każdej zmianie w tej zakładce: wyczyść cache (Toolbox - Purge All) i przeklikaj stronę w trybie prywatnym - menu, formularz, koszyk. Dlaczego te metryki w ogóle mają znaczenie, tłumaczymy w tekście o Core Web Vitals.
Lazy Load Images: włącz, ale w polu wykluczeń umieść obraz główny nagłówka (hero). Leniwe ładowanie obrazu, który jest największym elementem pierwszego ekranu, pogarsza LCP zamiast go poprawiać - przeglądarka celowo odkłada pobranie rzeczy, którą powinna pobrać najpierw.
Image Optimization (WebP): wtyczka potrafi wysłać obrazy do darmowej usługi QUIC.cloud i odebrać wersje WebP. Działa dobrze, wymaga tylko cierpliwości przy pierwszym przebiegu na dużej bibliotece. Alternatywy i szerszy kontekst formatów opisuje poradnik o optymalizacji obrazów.
Crawler odwiedza podstrony w tle i odbudowuje cache, zanim zrobi to pierwszy gość - dzięki temu nikt nie trafia na wolną odsłonę „miss". Ma sens na sklepach i większych serwisach; na pięciostronicowej wizytówce różnicy nie zauważysz.
ESI (Edge Side Includes) pozwala cachować stronę „z dziurami" - np. cały sklep z cache, a mini-koszyk w nagłówku generowany na żywo. Potężne, ale każdy blok ESI to osobne żądanie; włączaj punktowo, nie globalnie.
Browser Cache: włącz - ustawia nagłówki ważności dla plików statycznych, dzięki czemu powracający gość nie pobiera ich ponownie. Uzupełnia się z kompresją opisaną w tekście o gzip i brotli.
Wtyczka sama czyści właściwe strony po edycji wpisu, zmianie menu czy aktualizacji produktu. Ręczne „Purge All" jest potrzebne po:
Jeśli klient mówi „nie widzę zmian na stronie", w 9 na 10 przypadków patrzy na starą kopię - z cache serwera albo własnej przeglądarki. Purge All plus tryb prywatny rozstrzygają sprawę w minutę.
| Objaw | Najczęstsza przyczyna | Co zrobić |
|---|---|---|
| zawsze „x-litespeed-cache: miss" | strona ustawia ciasteczko dla każdego gościa (wtyczka zgód, licznik) i wpada w wykluczenia | znajdź ciasteczko w narzędziach deweloperskich, skonfiguruj wtyczkę zgód tak, by nie ustawiała ciasteczka przed interakcją |
| menu/slider nie działa po włączeniu optymalizacji JS | defer objął jquery albo skrypt inline zależny od jquery | dodaj jquery do wykluczeń deferu, wyczyść cache |
| rozjechane style | CSS Combine albo błędny krytyczny CSS | wyłącz Combine/UCSS, Purge All, włączaj pojedynczo |
| w koszyku widać cudze dane | cachowanie stron, które powinny być wykluczone | sprawdź wykluczenia WooCommerce, wyłącz cache dla zalogowanych |
| PageSpeed świetny, strona „nie reaguje" przez pierwsze sekundy | tryb Delayed zamiast Deferred | przełącz na Deferred - wynik w teście minimalnie spadnie, realna używalność wzrośnie |
Dla 90% stron wystarczy: Enable Cache, Minify CSS/JS, Load JS Deferred (z wykluczonym jquery), Lazy Load z wykluczonym obrazem hero, Browser Cache i WebP. Bez Combine, bez Delayed, bez agresywnych eksperymentów. Taka konfiguracja regularnie sprowadza czas odpowiedzi serwera do kilkudziesięciu milisekund i poprawia Core Web Vitals bez psucia funkcji strony - a wynik możesz zweryfikować od razu w naszym teście szybkości.
Pamiętaj o kolejności: najpierw działający cache serwerowy, potem optymalizacje frontendu, na końcu eksperymenty. I po każdej zmianie - tryb prywatny i przeklikanie strony. Test syntetyczny nie kupi nic w Twoim sklepie; użytkownik z martwym menu po prostu wyjdzie.
Wszystkie poradniki z kategorii: Szybkość i wydajność