# Veľkosť HTML (výkon)

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

- **Číslo kontroly:** P2
- **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/html-size

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

## V praxi

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.

[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

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

## Súvisiace pojmy

- [Veľkosť HTML (SEO)](https://be1st.ai/sk/glossary/seo/html-size): Veľkosť HTML je váha HTML dokumentu stránky v kilobajtoch bez obrázkov, štýlov a skriptov. Vyhľadávač aj prehliadač ho musia celý stiahnuť a spracovať.
- [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.
- [Externé zdroje](https://be1st.ai/sk/glossary/performance/external-resources): 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.
- [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.