Pokrycie CSS i nieużywane style

Duże pliki CSS często zawierają style komponentów, których nie ma na bieżącej stronie. Każdy nieużywany bajt zwiększa czas parsowania, tworzenia CSSOM oraz rozmiar przesyłanych danych. Typowa aplikacja produkcyjna może mieć na danej stronie 90% lub więcej nieużywanego CSS.

Otwórz panel Coverage w DevTools (Cmd+Shift+P → Coverage). Rozpocznij nagrywanie, wejdź w interakcję ze stroną, a następnie zatrzymaj nagrywanie. Panel pokazuje każdy plik CSS wraz z procentem wykorzystania i wyróżnia nieużywane reguły na czerwono. Wyeksportuj dane Coverage jako JSON do analizy.

PurgeCSS skanuje pliki HTML, JS i szablonów w poszukiwaniu nazw klas, a następnie usuwa nieużywane reguły CSS. Skonfiguruj globs content tak, aby obejmowały wszystkie pliki, które mogą odwoływać się do nazw klas. Dodaj do safelist klasy używane dynamicznie (dodawane przez JS), aby zapobiec ich przypadkowemu usunięciu.

Kompilator JIT Tailwind generuje tylko klasy narzędziowe faktycznie używane w szablonach. Wynikowy CSS jest niewielki — często ma 5–15 KB dla całej aplikacji — ponieważ nieużywane narzędzia nigdy nie są generowane. To idealny efekt usuwania nieużywanego kodu.

W konfiguracji webpacka lub Vite dodaj PurgeCSS wraz z globami content obejmującymi wszystkie pliki szablonów. Opcja safelist przyjmuje ciągi znaków, wyrażenia regularne oraz deep-safelist dla złożonych wzorców dynamicznych klas z bibliotek takich jak Headless UI.

CSS Modules generują unikatowe nazwy klas dla każdego pliku i umożliwiają usuwanie nieużywanych modułów za pomocą konfiguracji bundlera. W paczce uwzględniane są tylko zaimportowane moduły CSS — umieszczanie komponentu wraz z jego stylami naturalnie eliminuje nieużywane style globalne.

Podziel CSS według tras w frameworkach takich jak Next.js (ekstrakcja CSS dla poszczególnych stron) albo użyj importów dynamicznych wraz z CSS Modules. Każda strona ładuje tylko własne style, dzięki czemu analiza Coverage dla pojedynczej strony, a nie całej aplikacji, staje się miarodajna.

Audyt Lighthouse „Reduce unused CSS” szacuje możliwą oszczędność bajtów po usunięciu nieużywanych reguł. Wskazuje konkretne zasoby arkuszy stylów z wysokim odsetkiem nieużywanego kodu. Użyj go jako wskazówki przy ustalaniu, które pliki przeanalizować w pierwszej kolejności.

Analiza Coverage rejestruje tylko stany widoczne podczas nagrywania. Stany hover, otwarte okna modalne, stany błędów i stany uwierzytelnionego użytkownika trzeba wywołać ręcznie podczas nagrywania Coverage, aby uniknąć nieprawidłowego usunięcia odpowiadających im stylów.

Monolityczne globalne arkusze stylów z czasem gromadzą nieużywany CSS, gdy funkcje są usuwane. CSS komponentów (CSS Modules, Styled Components, narzędzia Tailwind) łatwiej uporządkować, ponieważ style znajdują się obok komponentów i są usuwane razem z nimi.

W przypadku dużych starszych plików CSS najpierw użyj UnCSS lub PurgeCSS w trybie report-only. Posortuj reguły według częstotliwości użycia. Wyodrębnij i usuń wyraźnie nieużywane style wtyczek dostawców. Pracuj stopniowo, aby przypadkowo nie usunąć stylów dla rzadko występujących stanów.

Co mierzy panel Coverage w Chrome DevTools?

Analiza wykorzystania CSS za pomocą panelu Coverage w DevTools i Lighthouse pozwala identyfikować nieużywane reguły. PurgeCSS i Tailwind JIT automatyzują usuwanie martwego kodu. CSS Modules i dzielenie CSS według tras zapobiegają gromadzeniu się nieużywanych stylów. Razem minimalizują rozmiar CSS i czas parsowania.