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

- **Číslo kontroly:** P5
- **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-js

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

Inline JavaScript blokuje HTML parser a nemôže byť cachovaný prehliadačom. Veľké inline skripty spomaľujú Time to Interactive a zvyšujú veľkosť každého HTML dokumentu. Externé skripty sa dajú cachovať, minifikovať a načítavať asynchrónne pomocou atribútov async alebo defer.

## V praxi

Trackery a analytické skripty vložené priamo do HTML často zaberajú desiatky KB. Ak má váš e-shop 150 KB inline JavaScriptu, každá stránka bude o 150 KB väčšia a prehliadač tento kód nemôže uložiť do cache. Presun do externých súborov s atribútmi async alebo defer to vyrieši.

## Ako to be1st kontroluje

Meria veľkosť inline JavaScript kódu priamo v HTML dokumente. Malé inline skripty sú v poriadku pre kritickú funkcionalitu, veľké bloky však zväčšujú HTML, spomaľujú parsing a znemožňujú cachovanie a optimalizáciu skriptov. Kontrola prejde do 10 KB, pri moderných SSR frameworkoch do 30 KB; hydratačné dáta a štruktúrované dáta (JSON-LD) sa nezapočítavajú.

[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 JavaScript](https://developer.chrome.com/docs/lighthouse/performance/unused-javascript) (Chrome for Developers)
- [General HTML performance considerations](https://web.dev/learn/performance/general-html-performance) (web.dev)
- [Web Performance](https://developer.mozilla.org/en-US/docs/Web/Performance) (MDN Web Docs)

## Súvisiace pojmy

- [Štruktúrované dáta](https://be1st.ai/sk/glossary/seo/structured-data): Štruktúrované dáta sú strojovo čitateľný popis obsahu stránky, väčšinou JSON-LD so slovníkom Schema.org: produkt, článok, firma alebo udalosť.
- [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.