# Nevyužité CSS (CSS coverage)

> CSS coverage je podiel stiahnutého CSS, ktorý stránka naozaj použije. Zvyšok je nevyužitý kód, ktorý musí prehliadač aj tak spracovať.

- **Číslo kontroly:** P9
- **Oblasť:** [Výkon](https://be1st.ai/sk/glossary/performance)
- **Nástroj:** [SEO + Bezpečnosť + Výkon](https://be1st.ai/sk/tools/ssp-audit)
- **Stránka:** https://be1st.ai/sk/glossary/performance/css-coverage

## Prečo na tom záleží

CSS je render-blocking zdroj: prehliadač musí spracovať všetky CSS pravidlá pred vykreslením stránky. Ak 70 % CSS nie je použitých, prehliadač zbytočne stráca čas ich spracovaním. Odstránenie nepoužitého CSS zlepší FCP a LCP a zmenší veľkosť stránky.

## V praxi

Bootstrap framework načítava často 90 % nepoužitého CSS ak sa použije len pár komponentov. Tailwind CSS s purge funkciou odstráni nepoužité triedy a zmenší CSS z 3 MB na 10 KB. Ak váš web používa 500 KB CSS, ale reálne potrebuje len 50 KB, spomaľujete renderovanie zbytočne.

## Ako to be1st kontroluje

Meria percento nepoužitého CSS kódu na stránke. Ideálna hodnota je menej ako 50 % nepoužitého CSS. Nepoužité CSS štýly zbytočne zväčšujú súbory, spomaľujú stiahnutie a blokujú renderovanie stránky, pretože prehliadač musí spracovať všetky CSS pravidlá.

[SEO + Bezpečnosť + Výkon](https://be1st.ai/sk/tools/ssp-audit), záložka Výkon.

Každá kontrola skončí ako: V poriadku, Varovanie, Chyba.

## Zdroje

- [Remove unused CSS](https://developer.chrome.com/docs/lighthouse/performance/unused-css-rules) (Chrome for Developers)
- [Defer non-critical CSS](https://web.dev/articles/defer-non-critical-css) (web.dev)
- [Coverage: Find unused JavaScript and CSS](https://developer.chrome.com/docs/devtools/coverage) (Chrome DevTools)

## Súvisiace pojmy

- [Nevyužitý JavaScript (JS coverage)](https://be1st.ai/sk/glossary/performance/js-coverage): JS coverage je podiel stiahnutého JavaScriptu, ktorý sa na stránke naozaj spustí. Nevyužitý kód aj tak stojí čas na stiahnutie a spracovanie.
- [Čas odozvy servera (TTFB)](https://be1st.ai/sk/glossary/performance/response-time-ttfb): Time to First Byte (TTFB) je čas od odoslania požiadavky po prijatie prvého bajtu odpovede servera. Ukazuje, ako rýchlo odpovedá server a sieť.
- [Veľkosť HTML (výkon)](https://be1st.ai/sk/glossary/performance/html-size): Veľkosť HTML je váha HTML dokumentu stránky v kilobajtoch. Prehliadač ho musí celý stiahnuť a spracovať, kým stránku ukáže.
- [Externé zdroje](https://be1st.ai/sk/glossary/performance/external-resources): Externé zdroje sú samostatné súbory skriptov a štýlov, ktoré stránka načítava. Každý z nich je ďalšie sťahovanie, ktoré môže oddialiť vykreslenie.
- [Inline CSS](https://be1st.ai/sk/glossary/performance/inline-css): Inline CSS sú štýly zapísané priamo v HTML, v blokoch `<style>` alebo v atribútoch style, namiesto samostatného súboru so štýlmi.
- [Inline JS](https://be1st.ai/sk/glossary/performance/inline-js): Inline JavaScript je kód zapísaný priamo v HTML v značkách `<script>` namiesto samostatného súboru, ktorý si prehliadač vie uložiť do cache.