# Výkon, 10 pojmov a čo znamenajú.

> Ako rýchlo sa stránka načíta a koľko dát pri tom stiahne. Každý pojem má vlastnú stránku s definíciou, dôvodom, prečo na ňom záleží, príkladom z praxe a zdrojmi.

Meria ich SEO + Bezpečnosť + Výkon: https://be1st.ai/sk/tools/ssp-audit

Všetky pojmy: https://be1st.ai/sk/glossary

---

## Čas odozvy servera (TTFB)

Číslo kontroly: P1
Stránka: https://be1st.ai/sk/glossary/performance/response-time-ttfb

**Čo to je:** Time to First Byte (TTFB) je čas od odoslania požiadavky po prijatie prvého bajtu odpovede servera. Ukazuje, ako rýchlo odpovedá server a sieť.

**Prečo na tom záleží:** Pomalý TTFB spomaľuje celú stránku. Ak server odpovedá pomaly, používateľ vidí bielu obrazovku. Google používa rýchlosť načítania ako ranking faktor. Podľa web.dev by mal byť TTFB pod 800 ms pre dobré hodnotenie. Každých 100 ms oneskorenia znižuje konverzie o približne 1 %.

**Príklad z praxe:** Amazon zistil, že každých 100 ms oneskorenia ich stojí 1 % tržieb. Google má TTFB typicky pod 200 ms vďaka distribuovaným serverom a edge cachingu. Ak váš e-shop odpovedá za 2500 ms, zákazníkom sa stránka načíta až po 4–5 sekundách a väčšina odíde.

**Ako to be1st kontroluje:** Time to First Byte (TTFB) meria čas od odoslania HTTP požiadavky po prijatie prvého bajtu odpovede zo servera. web.dev odporúča hodnotu pod 800 ms, kontrola prejde pod 1 000 ms (1 000-3 000 ms je varovanie). Ak TTFB nie je k dispozícii, meria sa celkový čas stiahnutia stránky. TTFB je základná metrika, ktorá ovplyvňuje všetky nasledujúce metriky ako FCP a LCP. Pomalý server znamená, že používateľ čaká ešte predtým, ako sa začne čokoľvek vykresľovať.

**Nástroj:** [SEO + Bezpečnosť + Výkon](https://be1st.ai/sk/tools/ssp-audit) (záložka Výkon)

### Zdroje

- [Time to First Byte (TTFB)](https://web.dev/articles/ttfb) (web.dev)
- [Optimize Time to First Byte](https://web.dev/articles/optimize-ttfb) (web.dev)
- [Web Performance](https://developer.mozilla.org/en-US/docs/Web/Performance) (MDN Web Docs)

---

## Veľkosť HTML (výkon)

Číslo kontroly: P2
Stránka: https://be1st.ai/sk/glossary/performance/html-size

**Čo to je:** Veľkosť HTML je váha HTML dokumentu stránky v kilobajtoch. Prehliadač ho musí celý stiahnuť a spracovať, kým stránku ukáže.

**Prečo na tom záleží:** Veľké HTML spomaľuje načítanie, pretože prehliadač musí celý dokument stiahnuť a sparsovať predtým, ako začne renderovať. Na mobilných sieťach je to ešte výraznejšie. Menší HTML tiež zníži spotrebu dát používateľov a zrýchli DOM parsing.

**Príklad z praxe:** Google homepage má HTML pod 50 KB, čo umožňuje bleskurýchle načítanie. Shopify optimalizuje HTML svojich šablón na minimum. Ak váš blog generuje 500 KB HTML kvôli inline CSS a zbytočným atribútom, načítanie na 3G sieti trvá aj 5 sekúnd.

**Ako to be1st kontroluje:** Kontroluje veľkosť HTML dokumentu stránky. Ideálna veľkosť je pod 100 KB (100-500 KB je varovanie). Veľké HTML dokumenty spomaľujú parsing a zvyšujú čas do prvého vykreslenia. Nadmerne veľké HTML často vzniká kvôli inline štýlom, inline skriptom alebo duplikovanému obsahu.

**Nástroj:** [SEO + Bezpečnosť + Výkon](https://be1st.ai/sk/tools/ssp-audit) (záložka Výkon)

### Zdroje

- [Optimize the encoding and transfer size of text-based assets](https://web.dev/articles/optimizing-content-efficiency-optimize-encoding-and-transfer) (web.dev)
- [Avoid enormous network payloads](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight) (Chrome for Developers)
- [Web Performance](https://developer.mozilla.org/en-US/docs/Web/Performance) (MDN Web Docs)

---

## Externé zdroje

Číslo kontroly: P3
Stránka: https://be1st.ai/sk/glossary/performance/external-resources

**Čo to je:** 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.

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

**Príklad z praxe:** 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é.

**Nástroj:** [SEO + Bezpečnosť + Výkon](https://be1st.ai/sk/tools/ssp-audit) (záložka Výkon)

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

---

## Inline CSS

Číslo kontroly: P4
Stránka: https://be1st.ai/sk/glossary/performance/inline-css

**Čo to je:** 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.

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

**Príklad z praxe:** 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.

**Nástroj:** [SEO + Bezpečnosť + Výkon](https://be1st.ai/sk/tools/ssp-audit) (záložka Výkon)

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

---

## Inline JS

Číslo kontroly: P5
Stránka: https://be1st.ai/sk/glossary/performance/inline-js

**Čo to je:** 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.

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

**Príklad z praxe:** 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ú.

**Nástroj:** [SEO + Bezpečnosť + Výkon](https://be1st.ai/sk/tools/ssp-audit) (záložka Výkon)

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

---

## Optimalizácia obrázkov

Číslo kontroly: P6
Stránka: https://be1st.ai/sk/glossary/performance/image-optimization

**Čo to je:** 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é.

**Prečo na tom záleží:** Obrázky sú typicky najväčšia časť stránky (50–70 % dát). Bez lazy loadingu sa načítavajú všetky obrázky naraz, aj tie, ktoré používateľ nikdy neuvidí. Bez srcset mobilné zariadenia stiahnu desktopové obrázky zbytočne veľké. Moderné formáty ako WebP sú o 25–35 % menšie ako JPEG.

**Príklad z praxe:** Medium používa lazy loading a srcset pre všetky obrázky v článkoch: načítava len obrázky viditeľné vo viewport a pre mobil posiela menšie verzie. Ak váš blog má 20 obrázkov po 500 KB bez lazy loadingu, používateľ stiahne 10 MB dát hneď pri načítaní stránky.

**Ako to be1st kontroluje:** Kontroluje, či obrázky používajú lazy loading (loading='lazy') a responzívne veľkosti cez atribút srcset. Obrázky nad zlomom (prvé dva, fetchpriority='high', logo v hlavičke) lazy loading mať nemajú, preto sa im to nezapočíta. Moderné formáty (WebP, AVIF) sú odporúčanie, kontrola ich nehodnotí. Lazy loading odkladá načítanie obrázkov mimo viewportu, srcset umožňuje prehliadaču vybrať správnu veľkosť obrázka pre dané zariadenie.

**Nástroj:** [SEO + Bezpečnosť + Výkon](https://be1st.ai/sk/tools/ssp-audit) (záložka Výkon)

### Zdroje

- [Browser-level image lazy loading for the web](https://web.dev/articles/browser-level-image-lazy-loading) (web.dev)
- [Serve responsive images](https://web.dev/articles/serve-responsive-images) (web.dev)
- [The Image Embed element - img](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) (MDN Web Docs)

---

## Celková váha stránky

Číslo kontroly: P7
Stránka: https://be1st.ai/sk/glossary/performance/total-page-weight

**Čo to je:** Celková váha stránky je súčet veľkostí všetkého, čo stránka stiahne: HTML, CSS, JavaScript, obrázky a fonty.

**Prečo na tom záleží:** Celková veľkosť stránky priamo ovplyvňuje čas načítania. Na 3G sieti trvá stiahnutie 5 MB stránky viac ako 15 sekúnd. web.dev odporúča doručiť menej ako 170 KB kritických zdrojov (komprimovaných), aby sa stránka na pomalej 3G sieti stala interaktívnou do 5 sekúnd.

**Príklad z praxe:** Google.com má celkovú veľkosť pod 500 KB. Priemerný e-commerce web má 3–5 MB kvôli veľkým obrázkom produktov. Amazon optimalizuje obrázky a používa lazy loading, aby celková veľkosť neprekročila 2 MB pri prvom načítaní.

**Ako to be1st kontroluje:** Meria celkovú veľkosť všetkých zdrojov stránky v KB (HTML, CSS, JS, obrázky, fonty). Ideálna hodnota je pod 2 000 KB. Podľa HTTP Archive je medián okolo 1 700–1 900 KB. Veľká stránka spomaľuje načítanie, zvlášť na mobilných sieťach a slabších zariadeniach.

**Nástroj:** [SEO + Bezpečnosť + Výkon](https://be1st.ai/sk/tools/ssp-audit) (záložka Výkon)

### Zdroje

- [Avoid enormous network payloads](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight) (Chrome for Developers)
- [Your first performance budget](https://web.dev/articles/your-first-performance-budget) (web.dev)
- [Performance budgets 101](https://web.dev/articles/performance-budgets-101) (web.dev)

---

## Počet HTTP požiadaviek

Číslo kontroly: P8
Stránka: https://be1st.ai/sk/glossary/performance/request-count

**Čo to je:** 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.

**Prečo na tom záleží:** Vysoký počet requestov spomaľuje načítanie stránky, zvlášť na vysokolatentných mobilných sieťach. Render-blocking požiadavky (CSS, synchronný JS) musia byť dokončené pred zobrazením obsahu. Cachovanie, bundlovanie a sprite techniky znižujú počet requestov.

**Príklad z praxe:** Typický WordPress web s 15 pluginmi generuje 80–120 HTTP requestov. Google.com potrebuje menej ako 20 requestov. Ak váš web vyžaduje 95 requestov (30 skriptov, 25 obrázkov, 15 CSS, 25 ďalších), na mobilnej sieti to môže trvať aj 8 sekúnd.

**Ako to be1st kontroluje:** Počíta celkový počet HTTP požiadaviek potrebných na načítanie stránky. Ideálny počet je menej ako 50. Každý request pridáva latenciu kvôli DNS, TCP a TLS handshake. Aj s HTTP/2 multiplexingom má vysoký počet requestov negatívny dopad na výkon.

**Nástroj:** [SEO + Bezpečnosť + Výkon](https://be1st.ai/sk/tools/ssp-audit) (záložka Výkon)

### Zdroje

- [Keep request counts low and transfer sizes small](https://developer.chrome.com/docs/lighthouse/performance/resource-summary) (Chrome for Developers)
- [Prevent unnecessary network requests with the HTTP Cache](https://web.dev/articles/http-cache) (web.dev)
- [Web Performance](https://developer.mozilla.org/en-US/docs/Web/Performance) (MDN Web Docs)

---

## Nevyužité CSS (CSS coverage)

Číslo kontroly: P9
Stránka: https://be1st.ai/sk/glossary/performance/css-coverage

**Čo to je:** 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ť.

**Prečo na tom záleží:** CSS je render-blocking zdroj: prehliadač musí spracovať všetky CSS pravidlá pred vykreslením stránky. Ak 70 % CSS nie je použitých, prehliadač zbytočne stráca čas ich spracovaním. Odstránenie nepoužitého CSS zlepší FCP a LCP a zmenší veľkosť stránky.

**Príklad z praxe:** Bootstrap framework načítava často 90 % nepoužitého CSS ak sa použije len pár komponentov. Tailwind CSS s purge funkciou odstráni nepoužité triedy a zmenší CSS z 3 MB na 10 KB. Ak váš web používa 500 KB CSS, ale reálne potrebuje len 50 KB, spomaľujete renderovanie zbytočne.

**Ako to be1st kontroluje:** Meria percento nepoužitého CSS kódu na stránke. Ideálna hodnota je menej ako 50 % nepoužitého CSS. Nepoužité CSS štýly zbytočne zväčšujú súbory, spomaľujú stiahnutie a blokujú renderovanie stránky, pretože prehliadač musí spracovať všetky CSS pravidlá.

**Nástroj:** [SEO + Bezpečnosť + Výkon](https://be1st.ai/sk/tools/ssp-audit) (záložka Výkon)

### Zdroje

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

---

## Nevyužitý JavaScript (JS coverage)

Číslo kontroly: P10
Stránka: https://be1st.ai/sk/glossary/performance/js-coverage

**Čo to je:** 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.

**Prečo na tom záleží:** JavaScript je najdrahší zdroj na spracovanie: musí sa stiahnuť, sparsovať, skompilovať a vykonať. Nepoužitý JS plytvá všetkými týmito zdrojmi. Lighthouse označí každý JS súbor s viac ako 20 KiB nepoužitého kódu. Tree shaking a code splitting sú kľúčové optimalizácie.

**Príklad z praxe:** Webpack bundle analyzer často odhalí, že 60 % JavaScript kódu nie je použitých. Next.js používa automatický code splitting: každá stránka načíta len JS, ktorý potrebuje. Ak váš web načítava 2 MB JavaScriptu, ale používa len 400 KB, mobilné zariadenia strávia sekundy parsovaním zbytočného kódu.

**Ako to be1st kontroluje:** Meria percento nepoužitého JavaScript kódu na stránke. Ideálna hodnota je menej ako 50 % nepoužitého JS. Nepoužitý JavaScript zbytočne zväčšuje súbory, spomaľuje stiahnutie, parsovanie a kompiláciu, čo priamo ovplyvňuje Time to Interactive.

**Nástroj:** [SEO + Bezpečnosť + Výkon](https://be1st.ai/sk/tools/ssp-audit) (záložka Výkon)

### Zdroje

- [Remove unused JavaScript](https://developer.chrome.com/docs/lighthouse/performance/unused-javascript) (Chrome for Developers)
- [Remove unused code](https://web.dev/articles/remove-unused-code) (web.dev)
- [Coverage: Find unused JavaScript and CSS](https://developer.chrome.com/docs/devtools/coverage) (Chrome DevTools)

---