# Externé zdroje

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

- **Číslo kontroly:** P3
- **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/external-resources

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

Každý externý zdroj pridáva sieťovú latenciu. CSS a JavaScript sú render-blocking: prehliadač nemôže zobraziť obsah, kým ich všetky nenačíta. Príliš veľa externých zdrojov dramaticky spomaľuje First Contentful Paint a zvyšuje dobu, kedy používateľ vidí prázdnu stránku.

## V praxi

Typický WordPress web načítava 15–30 externých zdrojov kvôli pluginom. Google homepage používa len 3–4 externé zdroje. Ak váš web načítava 25 externých skriptov z rôznych CDN, každý pridáva 50–200 ms latencie a celkové oneskorenie môže byť aj 2 sekundy.

## Ako to be1st kontroluje

Počíta počet externých skriptov a CSS súborov načítaných na stránke. Ideálny počet je menej ako 15 (15-30 je varovanie). Obrázky sa nepočítajú, majú vlastnú kontrolu P6. Každý externý zdroj vyžaduje DNS lookup, TCP spojenie a HTTP požiadavku, čo pridáva latenciu. Render-blocking skripty a štýly sú obzvlášť problematické.

[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

- [Keep request counts low and transfer sizes small](https://developer.chrome.com/docs/lighthouse/performance/resource-summary) (Chrome for Developers)
- [Optimize resource loading](https://web.dev/learn/performance/optimize-resource-loading) (web.dev)
- [Web Performance](https://developer.mozilla.org/en-US/docs/Web/Performance) (MDN Web Docs)

## Súvisiace pojmy

- [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.
- [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ť.