# 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.

- **Číslo kontroly:** P4
- **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/inline-css

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

Inline CSS sa nedá cachovať: stiahne sa pri každom načítaní stránky. Veľké bloky inline CSS zväčšujú HTML dokument a spomaľujú parsing. Správny prístup je vložiť inline len kritické CSS pre obsah nad záhybom a zvyšok načítať asynchrónne z externého súboru.

## V praxi

Google vkladá kritické CSS pre above-the-fold obsah (cca 10 KB) a zvyšok načítava asynchrónne. Ak váš web má 200 KB inline CSS v každom HTML dokumente, používateľ stiahne zbytočné dáta pri každom requeste a prehliadač nemôže CSS cachovať medzi stránkami.

## Ako to be1st kontroluje

Meria veľkosť inline CSS štýlov priamo v HTML dokumente. Malé množstvo kritického inline CSS pomáha rýchlo vykresliť obsah nad záhybom, príliš veľa však zväčšuje HTML a znemožňuje cachovanie štýlov. Kontrola prejde do 10 KB, pri moderných SSR frameworkoch (Next.js, Nuxt a pod.), ktoré kritické CSS vkladajú zámerne, do 50 KB.

[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

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

## Súvisiace pojmy

- [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.
- [Optimalizácia obrázkov](https://be1st.ai/sk/glossary/performance/image-optimization): Optimalizácia obrázkov znamená posielať obrázky v správnej veľkosti a formáte a tie, ktoré sú pod okrajom obrazovky, načítať až vtedy, keď sú potrebné.
- [Celková váha stránky](https://be1st.ai/sk/glossary/performance/total-page-weight): Celková váha stránky je súčet veľkostí všetkého, čo stránka stiahne: HTML, CSS, JavaScript, obrázky a fonty.
- [Počet HTTP požiadaviek](https://be1st.ai/sk/glossary/performance/request-count): Počet požiadaviek je počet HTTP požiadaviek, ktoré prehliadač pošle pri načítaní stránky. Každý súbor, od skriptu po ikonu, je jedna požiadavka.
- [Nevyužité CSS (CSS coverage)](https://be1st.ai/sk/glossary/performance/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ť.
- [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.