Critical CSS
Critical CSS (krytyczny arkusz stylów) to technika optymalizacji stron internetowych polegająca na wyodrębnieniu i wdrożeniu minimalnego zestawu stylów CSS niezbędnych do prawidłowego wyrenderowania treści znajdujących się w pierwszej widocznej części ekranu (ang. Above the Fold – bez konieczności przewijania strony).
Kod ten wstrzykuje się bezpośrednio do sekcji <head> dokumentu HTML jako styl wewnętrzny (inline), natomiast pozostałą, niekrytyczną część arkusza stylów ładuje się asynchronicznie w tle. Dzięki temu przeglądarka może natychmiast wyświetlić pierwszą sekcję strony bez oczekiwania na pobranie całego, często bardzo ciężkiego pliku .css.
Problem tradycyjnego ładowania CSS (Render-Blocking)
Z punktu widzenia przeglądarki arkusze stylów CSS są traktowane jako zasoby blokujące renderowanie (Render-Blocking Resources).
Domyślnie, dopóki przeglądarka nie pobierze i nie przeanalizuje całego pliku CSS wskazanego w tagu <link rel="stylesheet">, nie wyświetli użytkownikowi ani jednego piksela treści – nawet jeśli 90% kodu w tym pliku dotyczy elementów znajdujących się na samym dole strony (stopki, formularzy czy widoków mobilnych).
Jak działa Critical CSS w praktyce?
Przekształcenie tradycyjnego ładowania stylów w model zorientowany na Critical CSS przebiega w trzech krokach:
-
Wyodrębnienie (Extraction): Specjalne narzędzia (np. Critical, PurgeCSS, wtyczki do CMS) analizują stronę i generują kod CSS odpowiadający wyłącznie za widoczną część ekranu przy pierwszym wejściu.
-
Wstrzyknięcie Inline: Wygenerowany Critical CSS umieszcza się bezpośrednio w sekcji nagłówkowej dokumentu:
<head> <style> /* Krytyczne style renderujące treść Above the Fold */ body { margin: 0; font-family: sans-serif; } header { background: #fff; display: flex; } .hero-banner { height: 400px; color: #000; } </style> </head> -
Asynchroniczne ładowanie reszty (Deferred CSS): Pełny, zewnętrzny plik ze stylami ładuje się w tle, używając techniki nieblokującej (np. za pomocą
rel="preload"zamienianego narel="stylesheet"po pobraniu):<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
Wpływ Critical CSS na SEO i Core Web Vitals
-
Drastyczna poprawa FCP (First Contentful Paint): Pierwszy tekst lub element graficzny pojawia się na ekranie użytkownika niemal natychmiast po pobraniu pierwszych bajtów kodu HTML.
-
Skrócenie wskaźnika LCP (Largest Contentful Paint): Jeśli głównym elementem widoku (LCP element) jest nagłówek tekstowy lub baner w sekcji głównej, wyrenderuje się on bez opóźnień generowanych przez pobieranie zewnętrznych arkuszy stylów.
-
Eliminacja zasobów blokujących w PageSpeed Insights: Pozwala rozwiązać powszechne ostrzeżenie Google „Eliminuj zasoby blokujące renderowanie”.
-
Lepszy UX na słabych połączeniach (np. 3G/LTE w podróży): Użytkownik widzi treść strony natychmiast, nawet przy powolnym pobieraniu reszty zasobów.
