{"id":1511,"date":"2018-09-07T08:42:06","date_gmt":"2018-09-07T08:42:06","guid":{"rendered":"https:\/\/jchost.pl\/blog\/?p=1511"},"modified":"2025-09-10T08:33:32","modified_gmt":"2025-09-10T08:33:32","slug":"krytyczny-css","status":"publish","type":"post","link":"https:\/\/jchost.pl\/blog\/krytyczny-css\/","title":{"rendered":"Czym jest krytyczny CSS – LiteSpeed Cache"},"content":{"rendered":"\n
\n
\n
\n
\n \n
\n
\n

Czym jest krytyczny CSS – LiteSpeed Cache<\/h1> <\/div>\n<\/div>\n <\/div>\n <\/div>\n <\/div>\n
\n
\n
\n <\/div>\n
\n \n
\n
\n

\u00a0<\/p>\n

\u00a0<\/p>\n

FOUC, a krytyczny CSS<\/h2>\n

Je\u015bli w przesz\u0142o\u015bci testowa\u0142e\u015b zaawansowane funkcje LiteSpeed Cache w trakcie optymalizacji WordPress, mo\u017cliwe \u017ce spotka\u0142e\u015b si\u0119 z b\u0142\u0119dem FOUC (flash of unstyled content). Pojawia si\u0119 on, gdy przegl\u0105darka pokazuje zawarto\u015b\u0107 strony, zanim w pe\u0142ni za\u0142aduje pliki stylu. W takim momencie przegl\u0105darka nie wie jeszcze, jak powinna wygl\u0105da\u0107 tre\u015b\u0107, i chwilowo wy\u015bwietla zawarto\u015b\u0107 bez \u017cadnego formatowania. Na pomoc przychodzi wtedy krytyczny CSS<\/strong>.<\/p> <\/div>\n<\/div>\n\n

\n
\n \"krytyczny \n <\/div>\n \n \n <\/div>\n\n
\n
\n

\u00a0<\/p>\n

B\u0142\u0105d FOUC jest efektem ubocznym funkcji Asynchronicznej optymalizacji \u0142adowania CSS. Jest to powszechny problem nie tylko we wtyczce LiteSpeed Cache, ale r\u00f3wnie\u017c w innych wtyczkach pami\u0119ci podr\u0119cznej. W tym artykule skupimy si\u0119 na tym, czym jest i jak pos\u0142ugiwa\u0107 si\u0119 krytycznym CSS, by rozwi\u0105za\u0107 problem FOUC.<\/p> <\/div>\n<\/div>\n\n

\n
\n

\u00a0<\/p>\n

Czym jest asynchroniczne \u0142adowanie kodu CSS?<\/h3>\n

Zacznijmy od podstaw. Aby poprawnie wy\u015bwietli\u0107 dan\u0105 stron\u0119, Twoja przegl\u0105darka potrzebuje dw\u00f3ch rzeczy. Pierwsz\u0105 z nich jest kod HTML, kt\u00f3ry zawiera struktur\u0119 element\u00f3w, tre\u015b\u0107 i funkcje witryny, natomiast drug\u0105 jest kod CSS okre\u015blaj\u0105cy jak powy\u017csze elementy b\u0119d\u0105 wygl\u0105da\u0142y po za\u0142adowaniu.<\/p>\n

W niezoptymalizowanej witrynie ca\u0142y kod CSS, kt\u00f3ry jest linkowany w nag\u0142\u00f3wku HTML, jest \u0142adowany przed sam\u0105 tre\u015bci\u0105 HTML. Takie rozwi\u0105zanie powoduje przed\u0142u\u017cenie czasu oczekiwania, a tym samym (w mniejszym lub wi\u0119kszym stopniu) spowalnia stron\u0119. W zwi\u0105zku z tym, testery szybko\u015bci stron, jak np. PageSpeed Insights, zalecaj\u0105 asynchroniczne \u0142adowanie CSS.<\/p> <\/div>\n<\/div>\n\n

\n
\n \"asynchroniczne \n <\/div>\n \n \n <\/div>\n\n
\n
\n

\u00a0<\/p>\n

\u00a0<\/p> <\/div>\n<\/div>\n\n

\n
\n

Asynchroniczne \u0142adowanie CSS jest \u0142adowaniem zawarto\u015bci i stylizacji na zmian\u0119, bez czekania na ka\u017cdy element strony przed za\u0142adowaniem kolejnego.<\/p>\n<\/div>\n <\/div>\n<\/div>\n\n\n

\n
\n

\u00a0<\/p>\n

Czym jest krytyczny CSS?<\/h3>\n

Asynchroniczne \u0142adowanie kodu mo\u017ce powodowa\u0107 problem, o kt\u00f3rym wspomnieli\u015bmy na samym pocz\u0105tku, czyli FOUC. Widzisz tekst oraz obrazy, jednak\u017ce zamiast wy\u015bwietla\u0107 si\u0119 w danym formacie, witryna przez chwil\u0119 wygl\u0105da jak z lat 90-tych. Aby za\u0142adowa\u0107 kod CSS asynchronicznie i unikn\u0105\u0107 niepotrzebnych b\u0142\u0119d\u00f3w optymalizacyjnych, trzeba u\u017cy\u0107 krytycznego CSS.<\/p> <\/div>\n<\/div>\n\n

\n
\n

Arkusze styl\u00f3w mog\u0105 zawiera\u0107 naprawd\u0119 sporo linijek kodu i by\u0107 z\u0142o\u017cone, dlatego tak d\u0142ugo trzeba czeka\u0107 na ich pe\u0142ne za\u0142adowanie si\u0119. Do wy\u015bwietlenia zawarto\u015bci strony widocznej na ekranie potrzebny jest jedynie u\u0142amek arkuszu stylu \u2013 t\u0119 cz\u0119\u015b\u0107 nazywamy w\u0142a\u015bnie krytycznym CSS.<\/p>\n

W ten spos\u00f3b mo\u017cemy szybko za\u0142adowa\u0107 najpotrzebniejszy kod CSS, by przegl\u0105darka wiedzia\u0142a jak wy\u015bwietli\u0107 zawarto\u015b\u0107, kt\u00f3ra jest pocz\u0105tkowo widoczna, i za\u0142adowa\u0142a reszt\u0119 HTML i CSS asynchronicznie.<\/p> <\/div>\n<\/div>\n\n

\n
\n

\u00a0<\/p>\n

Obs\u0142uga krytycznego CSS w LiteSpeed Cache<\/h3>\n

Wtyczka LiteSpeed Cache posiada trzy ustawienia definiuj\u0105ce spos\u00f3b obs\u0142ugi krytycznego CSS na stronie WordPress. W panelu admina WordPress przejd\u017a do LiteSpeed Cache.<\/p>\n

Wybierz \u201eUstawienia g\u0142\u00f3wne<\/strong>\u201d, w prawym g\u00f3rnym rogu kliknij \u201eWy\u015bwietl\u00a0 zaawansowane opcje<\/strong>\u201d,\u00a0 a nast\u0119pnie wejd\u017a w zak\u0142adk\u0119 \u201eOptymalizuj<\/strong>\u201d.<\/p> <\/div>\n<\/div>\n\n

\n
\n \"krytyczny \n <\/div>\n \n \n <\/div>\n\n
\n
\n

\u00a0<\/p>\n

\u0141aduj CSS asynchronicznie<\/h4>\n

Ustawienie asynchronicznego \u0142adowania CSS jest domy\u015blnie wy\u0142\u0105czone. W takim trybie, strona internetowa \u0142aduje si\u0119 w normalny spos\u00f3b, tzn. przegl\u0105darka pobiera ca\u0142y kod CSS z nag\u0142\u00f3wka HTML przed kontynuowaniem wy\u015bwietlenia tre\u015bci.<\/p>\n

Po w\u0142\u0105czeniu tej opcji, kod CSS i HTML b\u0119d\u0105 \u0142adowane w tym samym czasie, co sprawi \u017ce witryna za\u0142aduje si\u0119 szybciej. Na tym etapie mo\u017cemy napotka\u0107 b\u0142\u0105d FUOC, dlatego aby unikn\u0105\u0107 tego problemu, musimy wygenerowa\u0107 krytyczny CSS i sprawi\u0107, by wczytywa\u0142 si\u0119 jako pierwszy. Do tego b\u0119dziemy potrzebowa\u0107 nast\u0119pnego ustawienia.<\/p> <\/div>\n<\/div>\n\n

\n
\n

Wygeneruj krytyczny CSS<\/h4>\n

Ta opcja jest domy\u015blnie wy\u0142\u0105czona, jednak\u017ce po w\u0142\u0105czeniu asynchronicznego \u0142adowania CSS, prze\u0142\u0105cza si\u0119 w tryb aktywny. Gdy oba ustawienia s\u0105 w\u0142\u0105czone, zdalny serwer LiteSpeed generuje krytyczny CSS i przesy\u0142a go dalej do LS Cache.<\/p>\n

W niekt\u00f3rych przypadkach mo\u017ce pojawi\u0107 si\u0119 jednak inny ma\u0142y problem. Kiedy Twoja strona nie ma jeszcze wygenerowanego krytycznego CSS (lub po wyczyszczeniu pami\u0119ci podr\u0119cznej), pierwszy u\u017cytkownik, kt\u00f3ry odwiedzi witryn\u0119, b\u0119dzie musia\u0142 czeka\u0107 na odpowied\u017a zdalnego serwera LiteSpeed przed wygenerowaniem stylu. Jako \u017ce mo\u017ce to chwil\u0119 potrwa\u0107, zesp\u00f3\u0142 LiteSpeed Tech przygotowa\u0142 dla nas 3 ustawienie, kt\u00f3re definitywnie rozwi\u0105zuje problemy z asynchronicznym \u0142adowaniem strony.<\/p> <\/div>\n<\/div>\n\n

\n
\n

Wygeneruj krytyczny CSS w tle<\/h4>\n

Aby unikn\u0105\u0107 oczekiwania na pocz\u0105tkowe generowanie krytycznego kodu CSS, musimy w\u0142\u0105czy\u0107 jego obliczanie w tle (opcja ta nie b\u0119dzie mia\u0142a \u017cadnego wp\u0142ywu na stron\u0119, je\u017celi 2 pozosta\u0142e opcje s\u0105 wy\u0142\u0105czone).<\/p>\n

Gdy ustawienie generowania krytycznego CSS w tle jest w\u0142\u0105czone, pierwszy u\u017cytkownik odwiedzaj\u0105cy stron\u0119 nie b\u0119dzie musia\u0142 czeka\u0107 na jej za\u0142adowanie. Zamiast tego, LS Cache z g\u00f3ry doda Twoj\u0105 stron\u0119 do kolejki opartej na zadaniach cron, aby wygenerowa\u0107 j\u0105 p\u00f3\u017aniej w tle. Tym samym oszcz\u0119dzisz czasu odwiedzaj\u0105cemu, a witryna za\u0142aduje si\u0119 w mi\u0119dzyczasie asynchronicznie.<\/p>\n

\u00a0<\/p> <\/div>\n<\/div>\n\n

\n
\n

Sprawd\u017a najszybszy na rynku hosting WordPress<\/a> oraz hosting Ecommerce<\/a>.<\/p>\n<\/div>\n <\/div>\n<\/div>\n\n\n

\n
\n

\u00a0<\/p>\n

Warto wiedzie\u0107<\/h3>\n