# Inline CSS

> Inline CSS is styling written directly in the HTML, in `<style>` blocks or style attributes, instead of in a separate stylesheet file.

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

## Why it matters

Inline CSS cannot be cached: it is downloaded with every page load. Large blocks of inline CSS increase the HTML document size and slow down parsing. The correct approach is to inline only critical CSS for above-the-fold content and load the rest asynchronously from an external file.

## In practice

Google inlines critical CSS for above-the-fold content (roughly 10 KB) and loads the rest asynchronously. If your website has 200 KB of inline CSS in every HTML document, the user downloads unnecessary data with every request and the browser cannot cache CSS between pages.

## How be1st checks it

Measures the size of inline CSS styles directly in the HTML document. A small amount of critical inline CSS helps render above-the-fold content quickly, but too much increases HTML size and prevents style caching. The check passes up to 10 KB, or up to 50 KB for modern SSR frameworks (Next.js, Nuxt and similar) that inline critical CSS on purpose.

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

Every check ends as: Pass, Warning, Fail.

## Sources

- [Extract critical CSS](https://web.dev/articles/extract-critical-css) (web.dev)
- [Defer non-critical CSS](https://web.dev/articles/defer-non-critical-css) (web.dev)
- [CSS for Web Vitals](https://web.dev/articles/css-web-vitals) (web.dev)

## Related terms

- [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.
- [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.
- [Image optimization](https://be1st.ai/glossary/performance/image-optimization): Image optimization means serving images in the right size and format and loading the ones below the fold only when they are needed.
- [Total page weight](https://be1st.ai/glossary/performance/total-page-weight): Total page weight is the combined size of everything a page downloads: HTML, CSS, JavaScript, images and fonts.
- [Request count](https://be1st.ai/glossary/performance/request-count): Request count is the number of HTTP requests a browser makes to load a page. Every file, from a script to an icon, is one request.
- [CSS coverage](https://be1st.ai/glossary/performance/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.