Preskočiť na obsah
← Blog

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álaMetrikaZmena pri zrýchlení o 0,1 s
Cestovný ruchKonverzie+10,1 %
RetailPriemerná hodnota objednávky+9,2 %
Luxusné značkyZobrazenia stránok na session+8,6 %
RetailKonverzie+8,4 %
Lead generationBounce rate informačných stránokzlepšenie o 8,3 %
Cestovný ruchPriemerná 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šiliBiznis výsledokMetóda
Rakuten 24CLS −92,72 %, TTFB −18 %, načítanie o 0,4 s rýchlejšieTržby na návštevníka +53,37 %, konverzie +33,13 %, AOV +15,2 %, exit rate −35,12 %A/B test, 1 mesiac
VodafoneLCP o 31 % lepšie (8,3 s → 5,7 s)Predaje +8 %, lead/visit +15 %, cart/visit +11 %A/B test, 50/50
ZalandoNačítanie o 100 ms rýchlejšieTržby na session +0,7 %Experiment s umelým spomalením katalógu
SwappieLCP −55 %, CLS −91 %, FID −90 %Mobilné tržby +42 %, Rel mCvR z 24 % na 34 %Pred/po, 3 mesiace
The Economic TimesLCP 4,5 s → 2,5 s, CLS 0,25 → 0,09Bounce rate −43 %Pred/po, CrUX
Yahoo! JAPAN NewsCLS o 0,2 (≈ 0,2 → 0)Stránky na session +15,1 %, dĺžka session +13,3 %Pred/po
redBusINP 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.

  1. Zbierajte field dáta (RUM). Lighthouse je laboratórium; peniaze sa rozhodujú na reálnych zariadeniach na 75. percentile.
  2. Spojte výkon s biznis udalosťou. Ku každej session uložte LCP, INP a CLS spolu s tým, či konvertovala.
  3. 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.
  4. 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í milisekundyAko ich získať späť
JavaScript a hydratáciaVeľké bundly, hydratácia celej stránky, zbytočné re-renderyCode-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ánAnalytika, pixely a chat blokujú main threadasync/defer, načítanie až po interakcii alebo v idle čase, Partytown (web worker) alebo server-side tracking
LCP obrázokLazy-loading hero obrázka, ťažké JPG/PNGNikdy loading="lazy" nad zlomom, fetchpriority="high", AVIF/WebP, správne veľkosti cez srcset
Obrázky pod zlomomSťahovanie obrázkov, ktoré nikto nevidí; chýbajúce rozmery spôsobujú CLSloading="lazy", width/height alebo aspect-ratio na každom obrázku
Webové fontyBlokované vykreslenie textu, celé rodiny rezov, posun layoutu pri výmene fontuSelf-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 debounceRozdeliť prácu (scheduler.yield(), setTimeout), debounce ako redBus, aktualizovať len tú časť DOM, ktorá sa zmenila
RegresieNový modul, skript či obrázok nepozorovane spomalí webPerformance 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

Prípadové štúdie (web.dev)

Nástroje

  • web-vitals.js - knižnica na meranie Core Web Vitals u reálnych používateľov