# CSS coverage

> CSS coverage is the share of a page's downloaded CSS that the page actually uses. The rest is unused code the browser still has to process.

- **Check ID:** P9
- **Area:** [Performance](https://be1st.ai/glossary/performance)
- **Tool:** [SEO + Security + Performance](https://be1st.ai/tools/ssp-audit)
- **Page:** https://be1st.ai/glossary/performance/css-coverage

## Why it matters

CSS is a render-blocking resource: the browser must process all CSS rules before rendering the page. If 70% of CSS is unused, the browser wastes time parsing it. Removing unused CSS improves FCP and LCP and reduces page size.

## In practice

The Bootstrap framework often loads 90% unused CSS if only a few components are used. Tailwind CSS with its purge feature removes unused classes and reduces CSS from 3 MB to 10 KB. If your website uses 500 KB of CSS but actually needs only 50 KB, you are unnecessarily slowing down rendering.

## How be1st checks it

Measures the percentage of unused CSS code on the page. The ideal value is less than 50% unused CSS. Unused CSS styles unnecessarily increase file sizes, slow down downloads, and block page rendering because the browser must process all CSS rules.

[SEO + Security + Performance](https://be1st.ai/tools/ssp-audit), Performance tab.

Every check ends as: Pass, Warning, Fail.

## Sources

- [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)

## Related terms

- [JS coverage](https://be1st.ai/glossary/performance/js-coverage): JS coverage is the share of a page's downloaded JavaScript that actually runs on the page. Unused code still costs download and parsing time.
- [Response time (TTFB)](https://be1st.ai/glossary/performance/response-time-ttfb): Time to First Byte (TTFB) is the time from sending a request to receiving the first byte of the server's answer. It shows how fast the server and the network respond.
- [HTML size (performance)](https://be1st.ai/glossary/performance/html-size): HTML size is the weight of a page's HTML document in kilobytes. The browser has to download and parse all of it before it can show the page.
- [External resources](https://be1st.ai/glossary/performance/external-resources): External resources are the separate script and stylesheet files a page loads. Each one is another download that can delay rendering.
- [Inline CSS](https://be1st.ai/glossary/performance/inline-css): Inline CSS is styling written directly in the HTML, in `<style>` blocks or style attributes, instead of in a separate stylesheet file.
- [Inline JS](https://be1st.ai/glossary/performance/inline-js): Inline JavaScript is code written directly in the HTML inside `<script>` tags, instead of in a separate file the browser can cache.