Czy critical CSS to wymóg dla każdej strony?

Nie — dla stron z lekkim CSS (poniżej 30 KB) zysk jest marginalny i nie warto komplikować buildu. Krytyczne dla stron z dużymi frameworkami CSS (Bootstrap, Tailwind przed JIT, ciężkie design systemy z setkami komponentów).

Tailwind ma własny mechanizm — czy potrzebuję critical CSS?

Z Tailwind v3+ JIT generuje tylko klasy faktycznie używane. Plik finalny waży zwykle 10–30 KB — często mieści się jako inline w head. Sprawdź PSI — jeśli „Eliminate render-blocking" nie wskazuje CSS, masz to ogarnięte bez dodatkowego critical CSS.

Jak utrzymywać critical CSS po zmianach designu?

Automatyzuj w pipeline buildowym — Critters, Penthouse, lub framework-specific (Critters jest wbudowany w Next.js eksperymentalnie). Manualne aktualizacje są niewykonalne dla większego serwisu — design zmienia się szybciej niż człowiek przelicza critical CSS.

Czy critical CSS pomaga w INP?

Pośrednio. Mniej blokującego CSS w head oznacza, że główny wątek szybciej kończy parsowanie i jest gotowy na interakcje. Ale INP poprawia się głównie przez optymalizację JS, nie CSS — critical CSS to zysk dla LCP i FCP.

Critical CSS — SEOGods

Critical CSS to minimalny zestaw stylów potrzebny do wyrenderowania widocznej części strony (above the fold) — wszystkiego, co użytkownik zobaczy bez scrollowania. Inline'owanie krytycznego CSS w sekcji head skraca czas do pierwszego renderu i poprawia LCP.

Dlaczego to działa

Standardowy CSS to blokujący zasób — przeglądarka musi go pobrać i sparsować, zanim zacznie renderować cokolwiek. Jeśli arkusz waży 200 KB i ładuje się 600 ms, użytkownik widzi białą stronę aż do końca jego ładowania. Critical CSS wbity bezpośrednio w HTML pozwala przeglądarce renderować pierwszą warstwę natychmiast, bez czekania na zewnętrzny plik.

Implementacja

1. Wyodrębniasz reguły CSS dotyczące tylko above-the-fold (header, hero, nawigacja, pierwsza sekcja).
2. Wstawiasz je w <style> w head — typowo 5–15 KB.
3. Resztę CSS ładujesz asynchronicznie: <link rel="preload" as="style" onload="this.rel='stylesheet'"> lub atrybut media="print" z przełączeniem na all po load.

Narzędzia

Critters (npm — zintegrowany z Next.js przez plugin), critical (Penthouse pod spodem), automatyczne pluginy w Next.js / Nuxt / Astro / SvelteKit. PageSpeed Insights wskazuje „Eliminate render-blocking resources" — to bezpośredni kandydat do critical CSS. Web.dev / Lighthouse w sekcji „Opportunities" pokażą szacowany zysk.

Kompromisy

Critical CSS zwiększa rozmiar HTML (każde żądanie pobiera te same style). Zmiana designu wymaga przeliczenia critical CSS — wymaga automatyzacji w build. Nie inline'uj wszystkiego — to anty-wzorzec, który ładuje 100 KB CSS przy każdym requeście. Reguła: tylko styles dla viewport above the fold, reszta async.