Optymalizacja

Nieużywane reguły CSS - co to jest i jak je wyciąć

Reguły CSS pobierane, ale nieużywane na bieżącej stronie - można usunąć i zaoszczędzić KB.

Aktualizacja:
Krótka odpowiedź

Nieużywane reguły CSS to selektory i właściwości, które strona pobiera w arkuszu stylów, ale nie wykorzystuje na bieżącym widoku. Najczęściej pochodzą z frameworków typu Bootstrap, Tailwind w trybie bez purge, albo z arkuszy stylów wspólnych dla całego serwisu. Wycięcie nieużywanego CSS skraca rozmiar pobierania o 30-80%, przyspieszając FCP i LCP.

Kluczowe fakty
Lighthouse audit unused-css-rules
Typowy zysk 20-200 KB do wycięcia
Wpływa na metryki FCP, LCP
Najczęstsza przyczyna Bootstrap/Tailwind bez purge, jeden CSS dla całej strony

Co to jest nieużywany CSS?

Plik CSS na typowej stronie zawiera reguły dla setek elementów. Niektóre z nich są używane na bieżącej stronie, inne tylko na innych podstronach, jeszcze inne to spadek po starych szablonach. Lighthouse mierzy, ile bajtów CSS jest pobranych, ale nie potrzebnych przy bieżącym renderowaniu.

Skąd się bierze nieużywany CSS?

  • Frameworki CSS (Bootstrap, Tailwind w trybie bez purge) - zawierają reguły dla wszystkiego
  • Stare szablony, których fragmenty zostały po refaktorach
  • CSS dla wszystkich podstron w jednym pliku (typowe w WordPressie)

Jak to naprawić?

  1. PurgeCSS / Tailwind purge - automatyczne usuwanie nieużywanych reguł podczas budowania
  2. Critical CSS - wyodrębnij krytyczny CSS dla pierwszego ekranu i inline'uj w head
  3. Split per route - osobne pliki CSS dla osobnych typów podstron
  4. W WordPress: Asset CleanUp, Perfmatters - ładuj CSS tylko tam, gdzie potrzebny

Najczęstsze pytania

Dlaczego Bootstrap zawsze ma dużo nieużywanego CSS?
Bootstrap projektowany jest jako uniwersalny framework - zawiera style dla wszystkich możliwych komponentów (modali, karuzeli, formularzy, gridów, alertów). Typowa strona używa 5-10% z dostępnych klas. Bez purge ładujesz wszystkie 200+ KB CSS, używając tylko 10-20 KB.
Czym różni się critical CSS od inline CSS?
Critical CSS to PODZBIÓR Twojego CSS - tylko style dla elementów widocznych w pierwszym ekranie. Inline CSS to TECHNIKA wstawiania CSS bezpośrednio w HTML (style w <style> tag w head). Typowa optymalizacja: wyodrębniasz critical CSS i wstawiasz go inline, resztę CSS wczytujesz jako zewnętrzny plik async.
Czy Tailwind v3+ rozwiązuje problem nieużywanego CSS?
W dużej mierze tak - Tailwind v3 ma JIT mode (Just-In-Time compiler), który generuje TYLKO te klasy, których używasz w plikach HTML/JSX/Vue. Domyślnie Tailwind w produkcji ma 5-20 KB CSS (vs 3+ MB w trybie nieobecnym purge). Wymaga jednak poprawnej konfiguracji content paths.
Powiązane pojęcia
Zasoby blokujące renderowanie - co to jest i jak naprawićLCP (Largest Contentful Paint)FCP (First Contentful Paint)

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 →