Výkon

Čo to je

Time to First Byte (TTFB) meria čas od odoslania HTTP požiadavky po prijatie prvého bajtu odpovede zo servera. Ideálna hodnota je pod 800 ms. 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 pred tým, než sa začne čokoľvek vykresľovať.

Prečo je to dôležité

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

Overené zdroje

• Time to First Byte (TTFB)— web.dev
• Optimize Time to First Byte— web.dev
• Web Performance— MDN Web Docs

Čo to je

Kontroluje veľkosť HTML dokumentu stránky. Ideálna veľkosť je pod 100 KB. Veľké HTML dokumenty spomaľujú parsing a zvyšujú čas do prvého vykreslenia. Nadmerne veľké HTML často vznikajú kvôli inline štýlom, inline skriptom alebo duplikovanému obsahu.

Prečo je to dôležité

Veľké HTML spomaľuje načítanie, pretože prehliadač musí celý dokument stiahnuť a sparsovať pred tým, než 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.

Overené zdroje

• Minify and compress network payloads— web.dev
• Avoid enormous network payloads— web.dev
• Web Performance— MDN Web Docs

Čo to je

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

Prečo je to dôležité

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.

Overené zdroje

• Keep request counts low and transfer sizes small— web.dev
• Optimize resource loading— web.dev
• Web Performance— MDN Web Docs

Čo to je

Meria veľkosť inline CSS štýlov priamo v HTML dokumente oproti externým štýlom. Malé množstvo kritického inline CSS (do 15 KB) je prospešné pre rýchle vykreslenie above-the-fold obsahu. Príliš veľa inline CSS však zvyšuje veľkosť HTML a znemožňuje cachovanie štýlov.

Prečo je to dôležité

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.

Overené zdroje

• Extract critical CSS— web.dev
• Defer non-critical CSS— web.dev
• CSS for Web Vitals— web.dev

Čo to je

Meria veľkosť inline JavaScript kódu priamo v HTML dokumente oproti externým skriptom. Malé inline skripty (do 5 KB) sú akceptovateľné pre kritickú funkcionalitu. Veľké bloky inline JS zväčšujú HTML, spomaľujú parsing a znemožňujú cachovanie a optimalizáciu skriptov.

Prečo je to dôležité

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.

Overené zdroje

• Remove unused JavaScript— web.dev
• General HTML performance considerations— web.dev
• Web Performance— MDN Web Docs

Čo to je

Kontroluje, či obrázky používajú moderné formáty (WebP, AVIF), lazy loading (loading='lazy') a responzívne veľkosti cez srcset atribút. Lazy loading odkladá načítanie obrázkov mimo viewport, srcset umožňuje prehliadaču vybrať správnu veľkosť obrázka pre dané zariadenie.

Prečo je to dôležité

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.

Overené zdroje

• Browser-level image lazy loading for the web— web.dev
• Serve responsive images— web.dev
• The Image Embed element - img— MDN Web Docs

Čo to je

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.

Prečo je to dôležité

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. Google odporúča držať kritický obsah pod 170 KB komprimovaných dát pre dosiahnutie TTI pod 10 sekúnd na mobilných zariadeniach.

Overené zdroje

• Avoid enormous network payloads— web.dev
• Your first performance budget— web.dev
• Performance budgets 101— web.dev

Čo to je

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.

Prečo je to dôležité

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.

Overené zdroje

• Keep request counts low and transfer sizes small— web.dev
• Prevent unnecessary network requests with the HTTP Cache— web.dev
• Web Performance— MDN Web Docs

Čo to je

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

Prečo je to dôležité

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ácal čas ich parsovaním. Odstránenie nepoužitého CSS zlepší FCP a LCP a zmenší veľkosť stránky.

Overené zdroje

• Remove unused CSS— web.dev
• Defer non-critical CSS— web.dev
• Coverage: Find unused JavaScript and CSS— Chrome DevTools

Čo to je

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.

Prečo je to dôležité

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.

Overené zdroje

• Remove unused JavaScript— web.dev
• Remove unused code— web.dev
• Coverage: Find unused JavaScript and CSS— Chrome DevTools