Czym jest krytyczny CSS – LiteSpeed Cache
FOUC, a krytyczny CSS
Jeśli w przeszłości testowałeś zaawansowane funkcje LiteSpeed Cache w trakcie optymalizacji WordPress, możliwe że spotkałeś się z błędem FOUC (flash of unstyled content). Pojawia się on, gdy przeglądarka pokazuje zawartość strony, zanim w pełni załaduje pliki stylu. W takim momencie przeglądarka nie wie jeszcze, jak powinna wyglądać treść, i chwilowo wyświetla zawartość bez żadnego formatowania. Na pomoc przychodzi wtedy krytyczny CSS.
Błąd FOUC jest efektem ubocznym funkcji Asynchronicznej optymalizacji ładowania CSS. Jest to powszechny problem nie tylko we wtyczce LiteSpeed Cache, ale również w innych wtyczkach pamięci podręcznej. W tym artykule skupimy się na tym, czym jest i jak posługiwać się krytycznym CSS, by rozwiązać problem FOUC.
Czym jest asynchroniczne ładowanie kodu CSS?
Zacznijmy od podstaw. Aby poprawnie wyświetlić daną stronę, Twoja przeglądarka potrzebuje dwóch rzeczy. Pierwszą z nich jest kod HTML, który zawiera strukturę elementów, treść i funkcje witryny, natomiast drugą jest kod CSS określający jak powyższe elementy będą wyglądały po załadowaniu.
W niezoptymalizowanej witrynie cały kod CSS, który jest linkowany w nagłówku HTML, jest ładowany przed samą treścią HTML. Takie rozwiązanie powoduje przedłużenie czasu oczekiwania, a tym samym (w mniejszym lub większym stopniu) spowalnia stronę. W związku z tym, testery szybkości stron, jak np. PageSpeed Insights, zalecają asynchroniczne ładowanie CSS.
Asynchroniczne ładowanie CSS jest ładowaniem zawartości i stylizacji na zmianę, bez czekania na każdy element strony przed załadowaniem kolejnego.
Czym jest krytyczny CSS?
Asynchroniczne ładowanie kodu może powodować problem, o którym wspomnieliśmy na samym początku, czyli FOUC. Widzisz tekst oraz obrazy, jednakże zamiast wyświetlać się w danym formacie, witryna przez chwilę wygląda jak z lat 90-tych. Aby załadować kod CSS asynchronicznie i uniknąć niepotrzebnych błędów optymalizacyjnych, trzeba użyć krytycznego CSS.
Arkusze stylów mogą zawierać naprawdę sporo linijek kodu i być złożone, dlatego tak długo trzeba czekać na ich pełne załadowanie się. Do wyświetlenia zawartości strony widocznej na ekranie potrzebny jest jedynie ułamek arkuszu stylu – tę część nazywamy właśnie krytycznym CSS.
W ten sposób możemy szybko załadować najpotrzebniejszy kod CSS, by przeglądarka wiedziała jak wyświetlić zawartość, która jest początkowo widoczna, i załadowała resztę HTML i CSS asynchronicznie.
Obsługa krytycznego CSS w LiteSpeed Cache
Wtyczka LiteSpeed Cache posiada trzy ustawienia definiujące sposób obsługi krytycznego CSS na stronie WordPress. W panelu admina WordPress przejdź do LiteSpeed Cache.
Wybierz „Ustawienia główne”, w prawym górnym rogu kliknij „Wyświetl zaawansowane opcje”, a następnie wejdź w zakładkę „Optymalizuj”.
Ładuj CSS asynchronicznie
Ustawienie asynchronicznego ładowania CSS jest domyślnie wyłączone. W takim trybie, strona internetowa ładuje się w normalny sposób, tzn. przeglądarka pobiera cały kod CSS z nagłówka HTML przed kontynuowaniem wyświetlenia treści.
Po włączeniu tej opcji, kod CSS i HTML będą ładowane w tym samym czasie, co sprawi że witryna załaduje się szybciej. Na tym etapie możemy napotkać błąd FUOC, dlatego aby uniknąć tego problemu, musimy wygenerować krytyczny CSS i sprawić, by wczytywał się jako pierwszy. Do tego będziemy potrzebować następnego ustawienia.
Wygeneruj krytyczny CSS
Ta opcja jest domyślnie wyłączona, jednakże po włączeniu asynchronicznego ładowania CSS, przełącza się w tryb aktywny. Gdy oba ustawienia są włączone, zdalny serwer LiteSpeed generuje krytyczny CSS i przesyła go dalej do LS Cache.
W niektórych przypadkach może pojawić się jednak inny mały problem. Kiedy Twoja strona nie ma jeszcze wygenerowanego krytycznego CSS (lub po wyczyszczeniu pamięci podręcznej), pierwszy użytkownik, który odwiedzi witrynę, będzie musiał czekać na odpowiedź zdalnego serwera LiteSpeed przed wygenerowaniem stylu. Jako że może to chwilę potrwać, zespół LiteSpeed Tech przygotował dla nas 3 ustawienie, które definitywnie rozwiązuje problemy z asynchronicznym ładowaniem strony.
Wygeneruj krytyczny CSS w tle
Aby uniknąć oczekiwania na początkowe generowanie krytycznego kodu CSS, musimy włączyć jego obliczanie w tle (opcja ta nie będzie miała żadnego wpływu na stronę, jeżeli 2 pozostałe opcje są wyłączone).
Gdy ustawienie generowania krytycznego CSS w tle jest włączone, pierwszy użytkownik odwiedzający stronę nie będzie musiał czekać na jej załadowanie. Zamiast tego, LS Cache z góry doda Twoją stronę do kolejki opartej na zadaniach cron, aby wygenerować ją później w tle. Tym samym oszczędzisz czasu odwiedzającemu, a witryna załaduje się w międzyczasie asynchronicznie.
Sprawdź najszybszy na rynku hosting WordPress oraz hosting Ecommerce.
Warto wiedzieć
- Krytyczny CSS na serwerze LiteSpeed jest generowany osobno dla różnych typów strony, które są wyświetlane w Twojej witrynie. Nie jest jednak generowany strona po stronie. Po włączeniu powyższych funkcji, zostanie więc stworzonych kilka zestawów krytycznego CSS – jeden stosowany dla postów, jeden dla archiwum kategorii, jeden dla produktów, … itd.
- Użycie polecenia „Opróżnij wszystko” spowoduje usunięcie wszystkich wygenerowanych zestawów krytycznego CSS. Jeśli jednak wyczyścisz tylko jedną podstronę, np. stronę produktu, usuniesz jedynie zestaw krytycznego CSS odpowiedzialnego za podstrony produktów.
- Nie zawsze koniecznym jest usunięcie wszystkiego. Lepiej skierować swoją uwagę na to, co faktycznie powinno zostać wyczyszczone. Polecenie „Opróżnij wszystko” usuwa nie tylko krytyczny CSS, ale także zoptymalizowany styl CSS i JavaScript. Rozważ użycie polecenia „Opróżnij cały cache”, jeśli chcesz usunąć tylko i wyłącznie zapisaną pamięć podręczną (ta opcja pozostawia wszystko inne w stanie nienaruszonym).
Odbieramy telefony, odpisujemy na maile, nie ukrywamy kosztów, a dodatkowo oferujemy najszybsze pakiety hostingowe na rynku. Uważasz, że to zwroty marketingowe? Sprawdź sam/a!
Jeśli nie będziesz zadowolony/a, zwrócimy Ci pieniądze.
Twoje strony i sklepy przeniesiemy za darmo!
Jeżeli masz jakiekolwiek pytania, skontaktuj się z nami! Kliknij tutaj.
Chcesz dowiedzieć się o nas trochę więcej? Przejdź na stronę JCHost.pl.