Optymalizacja

Co to jest krytyczny CSS (critical CSS)

Minimalny zestaw stylów potrzebny do wyświetlenia widocznej części strony, wstawiany inline w head.

Aktualizacja: 26 lipca 2026

Krótka odpowiedź

Krytyczny CSS (critical CSS) to minimalny zestaw reguł stylów potrzebnych do poprawnego wyświetlenia tego, co użytkownik widzi na pierwszym ekranie (above the fold). Wstawia się go inline w sekcji head, a resztę CSS ładuje asynchronicznie. Dzięki temu przeglądarka rysuje widoczną treść bez czekania na cały plik CSS, co poprawia FCP i LCP.

Kluczowe fakty

Co to	Style dla widocznej części strony
Gdzie	Inline w <style> w head
Reszta CSS	Ładowana asynchronicznie
Wpływ na metryki	FCP, LCP
Powiązane	render-blocking, preload

Co to jest krytyczny CSS?

Krytyczny CSS to minimalny zestaw stylów potrzebny do wyświetlenia tego, co widać na pierwszym ekranie. Wstawia się go inline w head, żeby przeglądarka mogła narysować widoczną treść, nie czekając na pobranie całego arkusza — który jest zasobem blokującym.

Jak to poprawia wydajność?

Widoczna treść pojawia się wcześniej, co poprawia FCP i LCP. Krytyczny CSS łączy się z preloadem kluczowych zasobów i asynchronicznym ładowaniem reszty stylów.

Najczęstsze pytania

Czy krytyczny CSS trzeba robić ręcznie?

Nie musisz. Narzędzia jak Critical, Penthouse czy wtyczki cache w WordPress potrafią wyodrębnić go automatycznie. Warto potem sprawdzić efekt wizualnie — automat czasem pominie regułę i widać krótkie mignięcie niestylowanej treści. Dla prostych stron ręczne wyodrębnienie też jest wykonalne.

Ile krytycznego CSS to za dużo?

Krytyczny CSS powinien być mały — zwykle do kilkunastu kilobajtów. Jeśli inline'ujesz cały arkusz, powiększasz HTML i tracisz sens optymalizacji. Chodzi tylko o reguły dla treści widocznej na starcie; reszta ma się ładować asynchronicznie.

Sprawdź swoją stronę

Wpisz adres swojej strony, w 30 sekund zobaczysz konkretną listę problemów do naprawy — wraz z wpływem na sprzedaż, SEO i koszty reklam.

Zacznij test →