Prečo milisekundy stoja peniaze
Ako sa milisekundy menia na eurá - štúdie, A/B testy, stav webu a postup, ako vyčísliť hodnotu rýchlosti vo vlastnom projekte.
· 12 min čítania
Zrýchlenie mobilného webu o 0,1 sekundy zvýšilo konverzie v retaile o 8,4 % a v cestovnom ruchu o 10,1 %. To je výsledok štúdie Deloitte pre Google, založenej na dátach európskych a amerických značiek.
Ako frontend developeri často hovoríme o technických aspektoch webu. Biznis však hovorí o konverziách, priemernej objednávke a cene za akvizíciu. V tomto článku sa posnažím prepojiť tieto dva svety: ukazuje, ako sa milisekundy prekladajú na eurá, a kde treba byť pri číslach opatrný. Ak potrebujete osviežiť pojmy LCP, INP či CLS, pozrite si slovník Core Web Vitals.
Základný princíp je jendnoduchý. Každý používateľ, ktorý odíde skôr, než sa stránka načíta alebo zareaguje, je v podstate návšteva bez výnosu. Rýchlosť preto nie je „nice to have“ technický detail, ale dôležitá páka na tržby.
Čo hovoria veľké štúdie
Toto sú tri najcitovanejšie štúdie, ktoré sa zhodujú v smere: pomalší web znamená menej konverzií. Líšia sa však metodikou, a preto aj spoľahlivosťou.
Deloitte × Google: „Milliseconds Make Millions“ (2020)
Deloitte Ireland na objednávku Googlu 4 týždne analyzovali mobilné dáta značiek z retailu, cestovného ruchu, luxusného tovaru a lead generation v Európe a USA. Ich cieľom bolo izolovať rýchlosť a pozrieť sa na jej vzťah k funnelu, útrate a odchodom (Deloitte).
| Vertikála | Metrika | Zmena pri zrýchlení o 0,1 s |
|---|---|---|
| Cestovný ruch | Konverzie | +10,1 % |
| Retail | Priemerná hodnota objednávky | +9,2 % |
| Luxusné značky | Zobrazenia stránok na session | +8,6 % |
| Retail | Konverzie | +8,4 % |
| Lead generation | Bounce rate informačných stránok | zlepšenie o 8,3 % |
| Cestovný ruch | Priemerná hodnota objednávky | +1,9 % |
Táto štúdia zároveň cituje dáta Googlu o mobilných stránkach: pravdepodobnosť odchodu rastie o 32 %, pokiaľ sa načítanie predĺži z 1 na 3 sekundy, o 90 % pri 5 sekundách a o 123 % pri 10 sekundách (PDF správy).
Akamai/SOASTA: State of Online Retail Performance (2017)
Akamai analyzoval približne 10 miliárd návštev popredných e-shopov v priebehu mesiaca. Podľa tlačovej správy môže oneskorenie o 100 ms znížiť konverzný pomer o 7 % a dvojsekundové oneskorenie zvýšiť bounce rate o 103 % (Akamai).
Detail z plnej správy je pre developerov ešte dôležitejší než samotný titulok. Na desktope mala najvyššiu konverziu stránka s načítaním 1,8 s; o 100 ms pomalšia stránka mala konverziu nižšiu o 2,4 %. Na smartfónoch bol pokles 7,1 % a na tabletoch 3,8 %. Z toho vyplýva, že mobile je na latenciu ešte citlivejší.
Prípadové štúdie
Najpresvedčivejšie sú A/B testy, kde sa dve verzie stránky líšili iba výkonom. Vodafone aj Rakuten 24 urobili presne takéto testy a v oboch prípadoch bol zaznamenaný dvojciferný alebo vysoký jednociferný rast tržieb.
| Firma | Čo zlepšili | Biznis výsledok | Metóda |
|---|---|---|---|
| Rakuten 24 | CLS −92,72 %, TTFB −18 %, načítanie o 0,4 s rýchlejšie | Tržby na návštevníka +53,37 %, konverzie +33,13 %, AOV +15,2 %, exit rate −35,12 % | A/B test, 1 mesiac |
| Vodafone | LCP o 31 % lepšie (8,3 s → 5,7 s) | Predaje +8 %, lead/visit +15 %, cart/visit +11 % | A/B test, 50/50 |
| Zalando | Načítanie o 100 ms rýchlejšie | Tržby na session +0,7 % | Experiment s umelým spomalením katalógu |
| Swappie | LCP −55 %, CLS −91 %, FID −90 % | Mobilné tržby +42 %, Rel mCvR z 24 % na 34 % | Pred/po, 3 mesiace |
| The Economic Times | LCP 4,5 s → 2,5 s, CLS 0,25 → 0,09 | Bounce rate −43 % | Pred/po, CrUX |
| Yahoo! JAPAN News | CLS o 0,2 (≈ 0,2 → 0) | Stránky na session +15,1 %, dĺžka session +13,3 % | Pred/po |
| redBus | INP vyhľadávania −72 % | Predaje +7 % | Pred/po, RUM |
Rakuten 24 navyše z vlastných RUM dát zistil, že používatelia s dobrým LCP konvertujú až o 61,13 % lepšie ako priemer. Swappie zase ukazuje, že pri nízkom východiskovom bode je potenciál najväčší: ich mobilná konverzia bola len 24 % desktopovej.
redBus dokazuje, že nejde len o načítanie. V situácií, že znížili počet výsledkov na jeden lazy-load request z 30 na 10, INP kleslo z približne 870–900 ms na 350–370 ms. Interaktivita po načítaní je rovnako predajná ako prvé vykreslenie.
Zalando na to šiel pri testovaní opačnou stratégiou: na katalógových stránkach umelo spomaľoval načítanie a meral dopad. Rozdiel 100 ms zodpovedal tržbám na session o 0,7 %. Pri obrate veľkého e-shopu je to desatina sekundy v hodnote miliónov eur.
Poučnejšie je pokračovanie. Hoci Zalando tieto čísla poznalo, redizajn z roku 2020 mal u prvých používateľov FCP až o 53 % a Time to Interactive až o 59 % horší. Problém vyriešil až Lighthouse CI v pull requestoch, ktorý skrátil spätnú väzbu o výkone z približne jedného dňa na 15 minút (web.dev). To poukazuje na to, že samotná znalosť čísel a metrík nestačí, výkon musí byť aj kritériom pre release.
Prečo to funguje
Rýchlosť zarába dvoma spôsobmi: priamo cez správanie používateľa a nepriamo cez vyhľadávače. Prvá je silnejšia a stabilnejšia.
Hranice vnímania sa nemenia od 60. rokov
Jakob Nielsen zhrnul tri limity odozvy, ktoré platia už od výskumu Millera z roku 1968 (NN/g):
- 0,1 s - používateľ má pocit, že systém reaguje okamžite a on priamo manipuluje s obsahom.
- 1 s - myšlienkový tok ostáva neprerušený, hoci oneskorenie už eviduje.
- 10 s - hranica, kedy udrží pozornosť; potom začne robiť niečo iné.
Toto je dôvod, prečo má INP prah 200 ms. Každý klik, ktorý trvá pol sekundy, posúva používateľa z pocitu „ja ovládam stránku“ do pocitu „čakám na stránku“. A čakanie je moment, keď sa zatvára tab. Typický príklad: používateľ klikne na „Pridať do košíka“, sekundu sa nič nedeje, klikne znova alebo stránku zavrie.
SEO: signál, nie zázrak
Google odporúča dosiahnuť dobré Core Web Vitals pre úspech vo vyhľadávaní a uvádza, že sú v súlade s tým, čo jeho hlavné ranking systémy odmeňujú (Google Search Central). Neznamená to však, že je to jediné čo stačí k úspechu projektu. Relevancia obsahu váži viac. CWV rozhodujú skôr medzi porovnateľne dobrými stránkami. Biznisový argument pre rýchlosť by preto nikdy nemal stáť iba na SEO, ale aj na konverziách.
Stav webu v číslach
Podľa Web Almanac 2025 splnilo všetky tri Core Web Vitals len 48 % mobilných a 56 % desktopových webov (CrUX, júl 2025, obr. 7.1). Trend je pozitívny, no mobil stále zaostáva o 8 percentuálnych bodov. Viac ako polovica mobilných webov tak necháva peniaze na stole.
Najťažšie je LCP: dobré ho má 62 % mobilných webov oproti 74 % na desktope. Pri INP je rozdiel ešte väčší, 77 % na mobile oproti 97 % na desktope.
Almanac ukazuje aj ľahko opraviteľné chyby. Približne 16–17 % stránok lazy-loaduje svoj LCP obrázok a 62 % mobilných stránok nemá rozmery aspoň pri jednom obrázku. To sú presne tie milisekundy, ktoré sa dajú získať za jedno popoludnie.
Ako vyčísliť hodnotu milisekúnd
Cudzie case studies otvoria dvere, ale rozpočet vám schváli až vlastné číslo. Postup, ktorý použili spoločnosti v štúdiách, má štyri základné kroky.
- Zbierajte field dáta (RUM). Lighthouse je laboratórium; peniaze sa rozhodujú na reálnych zariadeniach na 75. percentile.
- Spojte výkon s biznis udalosťou. Ku každej session uložte LCP, INP a CLS spolu s tým, či konvertovala.
- Rozdeľte používateľov do pásiem (napr. LCP < 1 s, 1–2,5 s, 2,5–4 s, > 4 s) a porovnajte konverzný pomer.
- Overte kauzalitu A/B testom. Ako Vodafone: dve vizuálne identické verzie, jediný rozdiel je výkon.
Meranie u reálnych používateľov
Knižnica web-vitals, ktorú použili Rakuten 24 aj redBus, funguje na akomkoľvek webe bez ohľadu na framework. Stačí niekoľko riadkov:
import { onLCP, onINP, onCLS } from 'web-vitals/attribution'
function send(metric) {
const body = JSON.stringify({
name: metric.name,
value: metric.value,
rating: metric.rating, // good | needs-improvement | poor
id: metric.id,
page: location.pathname,
navigationType: metric.navigationType,
})
// sendBeacon prežije aj zatvorenie tabu
navigator.sendBeacon('/api/vitals', body)
}
onLCP(send)
onINP(send)
onCLS(send)
Hrubý odhad pre manažment
Kým nemáte vlastné dáta, stačí jednoduchý model:
ΔR = N × CR × AOV × ΔCR_rel
Kde ΔR je prírastok tržieb, N počet návštev, CR konverzný pomer, AOV priemerná hodnota objednávky a ΔCR_rel relatívne zlepšenie konverzie.
Ilustračný príklad: e-shop má 200 000 mobilných návštev mesačne, konverziu 2 % a priemernú objednávku 60 €. To je 240 000 € mesačne. Konzervatívne zlepšenie konverzie o 2 % (štvrtina výsledku Vodafonu) prinesie 4 800 € mesačne, teda 57 600 € ročne. Toto číslo porovnajte s cenou sprintu venovaného výkonu.
Kde strácame milisekundy a ako ich získať späť
| Oblasť | Čo stojí milisekundy | Ako ich získať späť |
|---|---|---|
| JavaScript a hydratácia | Veľké bundly, hydratácia celej stránky, zbytočné re-rendery | Code-splitting cez dynamický import(), odložené načítanie nekritického JS, čiastočná alebo odložená hydratácia, statické časti renderovať na serveri bez JS |
| Skripty tretích strán | Analytika, pixely a chat blokujú main thread | async/defer, načítanie až po interakcii alebo v idle čase, Partytown (web worker) alebo server-side tracking |
| LCP obrázok | Lazy-loading hero obrázka, ťažké JPG/PNG | Nikdy loading="lazy" nad zlomom, fetchpriority="high", AVIF/WebP, správne veľkosti cez srcset |
| Obrázky pod zlomom | Sťahovanie obrázkov, ktoré nikto nevidí; chýbajúce rozmery spôsobujú CLS | loading="lazy", width/height alebo aspect-ratio na každom obrázku |
| Webové fonty | Blokované vykreslenie textu, celé rodiny rezov, posun layoutu pri výmene fontu | Self-hosting so subsettingom, preload kľúčového rezu, font-display: swap s metricky upraveným fallbackom (size-adjust) |
| Interakcie (INP) | Dlhé event handlery, scroll a input bez debounce | Rozdeliť prácu (scheduler.yield(), setTimeout), debounce ako redBus, aktualizovať len tú časť DOM, ktorá sa zmenila |
| Regresie | Nový modul, skript či obrázok nepozorovane spomalí web | Performance budget v CI (Lighthouse CI), ako Zalando |
Pozor na čísla, ktoré všetci citujú
Ak chcete presvedčiť skeptického CFO, nepoužívajte čísla, ktoré neobstoja pri prvej otázke „odkiaľ to je?“. Tri najčastejšie pasce:
„Amazon: 100 ms = 1 % tržieb.“ - Pôvodný zdroj je Greg Linden, bývalý inžinier Amazonu. V blogpost z roku 2006 píše, že A/B testy s oneskorením po 100 ms viedli k „podstatným a nákladným“ poklesom tržieb, no konkrétne percento ani dáta tam nie sú. Číslo 1 % pochádza z jeho prednášky a verejný dataset k nemu neexistuje. Je to anekdota spred 20 rokov, nie benchmark.
„Google: pol sekundy = −20 % návštevnosti.“ - V tom istom článku Linden opisuje experiment Marissy Mayer: 30 výsledkov namiesto 10 a stránka sa generovala 0,9 s namiesto 0,4 s. Zmenil sa však aj počet výsledkov a rozloženie stránky. Rýchlosť nebola jediná premenná.
Korelácia nie je kauzalita - RUM dáta Rakutenu síce ukazujú až +61 % konverzie pri dobrom LCP, ale v praxi ich A/B test ukázal +33 %. Rýchlejšie zážitky majú často ľudia s lepším telefónom a pripojením, ktorí aj viac nakupujú. Preto je rozdiel medzi korelačnou a experimentálnou hodnotou bežný.
Záver
Dáta hovoria jasnou rečou. A/B testy ukázali +8 % predajov pri Vodafone a +53 % tržieb na návštevníka pri Rakuten 24, pritom viac ako polovica mobilných webov stále neprechádza Core Web Vitals. To je príležitosť, nie technický dlh.
Rýchlosť nie je jednorazový projekt. Je to vlastnosť produktu, ktorá sa bez rozpočtu, monitoringu a vlastníka postupne zhorší, presne ako rastúci mobilný TBT v Almanacu.
Každý nový marketingový skript, knižnica či neoptimalizovaný obrázok je technický dlh, ktorý znižuje konverzný pomer. Úlohou developerov je vysvetliť manažmentu, že týždeň investovaný do výkonu nie je technický luxus, ale investícia do tržieb, a podložiť to vlastnými dátami.
Na záver tri otázky pre váš tím:
- Viete, aké je LCP a INP vašich najdôležitejších stránok na 75. percentile mobilných používateľov?
- Viete, o koľko lepšie konvertujú používatelia s dobrým LCP oproti tým so zlým?
- Kto vo vašom tíme zodpovedá za to, aby nasledujúci release web nespomalil?
Ak na niektorú odpoveď neviete, tam začína vaša prvá milisekunda, ktorá stojí peniaze.
Zdroje
Štúdie a reporty
- Milliseconds Make Millions a plná správa v PDF - Deloitte Ireland pre Google (2020)
- Tlačová správa k State of Online Retail Performance a plná správa v PDF - Akamai (apríl 2017)
- Web Almanac 2025: Performance - HTTP Archive, publikované 15. 1. 2026, CrUX júl 2025
- Response Times: The 3 Important Limits - Jakob Nielsen, NN/g
- Understanding Core Web Vitals and Google search results - Google Search Central
- Marissa Mayer at Web 2.0 - Greg Linden (2006)
Prípadové štúdie (web.dev)
- Vodafone: 31 % lepšie LCP, +8 % predajov (2021)
- Rakuten 24: +53,37 % tržieb na návštevníka (2022)
- Zalando: 100 ms = +0,7 % tržieb na session a Lighthouse CI (2021)
- Swappie: +42 % mobilných tržieb (2021)
- The Economic Times: −43 % bounce rate (2021)
- Yahoo! JAPAN News: +15 % stránok na session (2021)
- redBus: INP a +7 % predajov (2023)
Nástroje
- web-vitals.js - knižnica na meranie Core Web Vitals u reálnych používateľov
Súvisiace články
· 13 min čítania
Slovník Core Web Vitals: LCP, INP, CLS a ďalšie pojmy
Základný slovník - definície, čísla, typické pasce a kvalitné zdroje pre každú metriku.