Gdy przeglądarka pobiera zewnętrzny plik CSS, wstrzymuje renderowanie strony do jego pełnego przetworzenia. Krytyczny CSS pozwala ominąć to opóźnienie i wyświetlić pierwszy widok strony szybciej.
Co to jest krytyczny CSS
Krytyczny CSS (Critical CSS) to minimalny zestaw reguł stylów potrzebny do wyrenderowania fragmentu strony widocznego natychmiast po wejściu — bez przewijania. Ten obszar nazywa się “above the fold”.
Te style nie są ładowane jako zewnętrzny plik CSS. Są osadzane bezpośrednio w sekcji <head> dokumentu HTML — jako kod inline. Dzięki temu przeglądarka może natychmiast wyrenderować widok początkowy, a pozostałą część arkuszy stylów pobiera asynchronicznie w tle.
Dlaczego CSS blokuje renderowanie
Zewnętrzne pliki CSS są domyślnie zasobami blokującymi renderowanie. Przeglądarka musi pobrać plik CSS, przetworzyć go w całości i zbudować CSSOM (model obiektowy arkuszy stylów). Dopiero po tych krokach zaczyna wyświetlać cokolwiek na ekranie.
Przy ciężkich arkuszach stylów — generowanych np. przez page buildery — może to trwać setki milisekund, zanim użytkownik zobaczy jakikolwiek element strony.
Jak krytyczny CSS poprawia wydajność
Wdrożenie krytycznego CSS bezpośrednio skraca czas First Contentful Paint (FCP) i Largest Contentful Paint (LCP). Przeglądarka ma wszystko, czego potrzebuje do pierwszego wyrenderowania, bez czekania na zewnętrzny arkusz stylów.
Skala poprawy zależy od tego, jak ciężki był oryginalny plik CSS i jaka część stylu jest faktycznie potrzebna above the fold. Strony z rozbudowaną strukturą zyskują zwykle najbardziej.
Jak wdrożyć krytyczny CSS w WordPress
Są dwa sposoby.
Automatycznie przez wtyczki. WP Rocket, FlyingPress, Autoptimize i Hummingbird mają opcje generowania i osadzania krytycznego CSS. Wtyczka analizuje stronę, wyodrębnia style potrzebne dla widoku nad linią załamania i wstrzykuje je inline w <head>.
Ręcznie. Narzędzia deweloperskie takie jak Critical (npm) lub Penthouse pozwalają wygenerować kod krytycznego CSS dla konkretnego szablonu. Wynik osadzasz w pliku header.php motywu lub przez filtr wp_head. Ręczna metoda daje większą kontrolę, ale wymaga powrotu do niej po każdej zmianie projektu graficznego.
Czego unikać przy wdrożeniu
FOUC (Flash of Unstyled Content). Jeśli krytyczny CSS jest niekompletny lub błędnie wygenerowany, strona przez ułamek sekundy wyświetla surowy, niestylizowany tekst zanim załaduje się pełny arkusz. Szczególnie widoczne na wolniejszych połączeniach.
Zbyt duży kod inline. Krytyczny CSS osadzony w HTML nie powinien być zbyt rozbudowany. Jeśli zestaw “krytycznych” stylów przekracza kilkadziesiąt KB, zwiększa wagę samego dokumentu HTML i może opóźnić pierwsze renderowanie strony, szczególnie na urządzeniach mobilnych i wolniejszych połączeniach.
Dynamiczne elementy. Wtyczki automatycznie generujące krytyczny CSS często pomijają style dla dynamicznych komponentów — menu mobilnego, slidera, elementów zmieniających się po przewinięciu. Po włączeniu tej opcji warto sprawdzić stronę na urządzeniu mobilnym i w trybie responsywnym w DevTools.
Krytyczny CSS a usuwanie nieużywanego CSS
To dwie różne techniki, które łatwo ze sobą pomylić.
Krytyczny CSS porządkuje kolejność dostarczania stylów — mówi przeglądarce, które style załadować od razu, a które mogą poczekać.
Usuwanie nieużywanego CSS (Unused CSS) całkowicie eliminuje z arkusza reguły, które nie są używane na danej stronie. Fizycznie zmniejsza plik CSS.
Obie techniki można stosować razem. Krytyczny CSS dotyczy optymalizacji kolejności ładowania, nie czyszczenia kodu. Więcej o redukcji rozmiaru plików CSS i JavaScript: Minifikacja w WordPress.
Krytyczny CSS a metryki wydajności
Krytyczny CSS ma bezpośredni wpływ na FCP i LCP. FCP pokazuje, kiedy użytkownik po raz pierwszy widzi treść na ekranie, a LCP mierzy czas wyrenderowania największego widocznego elementu strony i należy do Core Web Vitals.
Ta technika nie wpływa bezpośrednio na CLS ani INP, ale może znacząco poprawić odczuwalną szybkość ładowania pierwszego widoku. Jeśli chcesz zrozumieć szerszy kontekst wskaźników wydajności i narzędzi pomiarowych, zajrzyj do artykułu Metryki wydajności w WordPress.