WP Rocket: strona ładuje się bez CSS albo przez chwilę wygląda na zepsutą – jak to naprawić
Strona pojawia się najpierw jako sam tekst, a układ wraca dopiero przy przewijaniu albo kliknięciu? Które opcje WP Rocket to powodują i jak pogodzić szybkość z wyglądem.
W skrócie: jeśli strona na WordPressie z WP Rocket ładuje się najpierw jako tekst bez wyglądu albo układ pojawia się dopiero po ruchu myszą, zwykle któraś opcja optymalizacji jest ustawiona zbyt agresywnie. Typowi podejrzani to usuwanie nieużywanego CSS, asynchroniczne ładowanie CSS bez pasującego krytycznego CSS i opóźnianie wykonania JavaScript. Opcje trzeba wyłączać po kolei, czyścić cache i testować w oknie prywatnym. Potem można ustawić konkretne wyjątki.
WP Rocket to jedna z najbardziej znanych wtyczek cache dla WordPressa i wiele stron wyraźnie przyspiesza. Druga strona medalu: część opcji zmienia to, kiedy i jak ładują się CSS i JavaScript. Jeśli nie pasuje to do motywu albo page buildera, odwiedzający widzi najpierw niedokończoną stronę. Dla wyników szybkości w Google bywa to nawet lepsze, ale dla człowieka przed ekranem wyraźnie gorsze.
Typowe objawy
- Przy pierwszym wejściu strona przez moment wygląda jak sam tekst z niebieskimi linkami, potem układ przeskakuje.
- Menu, slider albo animacje działają dopiero po ruchu myszą, przewinięciu albo dotknięciu.
- Niektóre elementy, np. ikony, czcionki albo okienka, w ogóle się nie pokazują.
- Zalogowani administratorzy widzą wszystko normalnie, bo WP Rocket domyślnie nie serwuje im cache.
Ostatni punkt warto zapamiętać: zawsze testować po wylogowaniu albo w oknie prywatnym.
Opcje, które to powodują
Usuwanie nieużywanego CSS (Remove Unused CSS)
WP Rocket analizuje każdą stronę i wysyła tylko ten CSS, który jest na niej faktycznie potrzebny. Jeśli wynik tej analizy jest niepełny albo elementy powstają później przez JavaScript, np. menu, slidery czy okienka, brakuje ich stylów. Rozwiązanie: wpisać dotknięte pliki CSS albo klasy jako wyjątki w ustawieniach albo wyłączyć opcję i korzystać z krytycznego CSS.
Asynchroniczne ładowanie CSS i krytyczny CSS
W tym trybie WP Rocket najpierw ładuje tylko mały „krytyczny CSS” dla widocznej części strony, a resztę później. Jeśli krytyczny CSS jest nieaktualny albo niepełny, np. po zmianie w motywie, powstaje właśnie ten krótki moment bez wyglądu. Rozwiązanie: wygenerować krytyczny CSS ponownie i wyczyścić cache.
Opóźnianie wykonania JavaScript (Delay JavaScript Execution)
Przy tej opcji JavaScript uruchamia się dopiero, gdy odwiedzający coś zrobi: przewinie, kliknie, dotknie ekranu. Jeśli motyw albo page builder ładuje część wyglądu przez JavaScript, pojawia się on dopiero po pierwszym ruchu. Rozwiązanie: wyłączyć z opóźniania skrypty motywu, menu i page buildera.
Jak postępować
- Zanotować, które opcje są włączone.
- W „Optymalizacja plików” wyłączać opcje po kolei. Po każdej zmianie wyczyścić cache i sprawdzić stronę w oknie prywatnym.
- Gdy strona wygląda poprawnie, wiadomo, która opcja zawiniła.
- Pozostałe opcje włączyć z powrotem, a dla winnej opcji ustawić wyjątki, zamiast wyłączać ją na stałe, jeśli to możliwe.
- Wyczyścić też inne cache: hostingu i ewentualnie Cloudflare.
Gdy nic nie pomaga
Czasem problemem jest sama strona: motyw z ogromną ilością CSS, kilka rozszerzeń page buildera i kilkanaście wtyczek, z których każda ładuje własne pliki. Wtedy wtyczka cache może tylko łagodzić objawy. Na dłuższą metę lżejsza strona daje więcej szybkości niż kolejna opcja optymalizacji. Więcej w artykule WordPress bez page buildera.
Profesjonalna pomoc
Konfiguruję cache tak, żeby strona była szybka i od pierwszej chwili wyglądała poprawnie, oraz znajduję prawdziwe hamulce w motywie i wtyczkach. Więcej w usłudze przyspieszenie strony, od 490 € netto.
