Porovnanie výkonnosti webových frameworkov z pohľadu Google Web Vitals 2025
Úvod
Google Web Vitals je súbor kľúčových metrik hodnotiacich rýchlosť načítania, interaktivitu a vizuálnu stabilitu webstránok (NitroPack Ranked First in Global Core Web Vitals Technology Report (CrUX) for Speed Optimization) (NitroPack Ranked First in Global Core Web Vitals Technology Report (CrUX) for Speed Optimization). Medzi hlavné Web Vitals patrí Largest Contentful Paint (LCP) – čas zobrazenia najväčšieho obsahu, First Input Delay (FID)(nahradzovaný metrikou Interaction to Next Paint (INP)) – odozva na prvú interakciu a celková responsívnosť, Cumulative Layout Shift (CLS) – vizuálna stabilita stránky, a podporné metriky ako Time to First Byte (TTFB) – čas do prijatia prvého bajtu odpovede servera, či First Contentful Paint (FCP) – čas zobrazenia prvého obsahu (CMS | 2024 | The Web Almanac by HTTP Archive) (Performance | 2024 | The Web Almanac by HTTP Archive). Tieto metriky ovplyvňujú používateľský dojem aj SEO, pretože rýchle a plynulé weby sú zvýhodnené vo vyhľadávaní (NitroPack Ranked First in Global Core Web Vitals Technology Report (CrUX) for Speed Optimization) (NitroPack Ranked First in Global Core Web Vitals Technology Report (CrUX) for Speed Optimization). V nasledujúcom texte podrobne porovnávame najpoužívanejšie frontendové frameworky (React, Vue, Angular, Svelte, a tzv. meta-frameworky ako Next.js, Nuxt.js, SvelteKit) aj backendové technológie (Laravel, Django, Spring Boot, ASP.NET, Node.js/Express/NestJS, Ruby on Rails a ďalšie) z hľadiska ich reálnej výkonnosti podľa Google Web Vitals. Výsledky vychádzajú z reálnych dát (field RUM – Real User Measurements) – napr. štúdií z Chrome UX Report (CrUX), HTTP Archive a Core Web Vitals Technology Report (2023 Web Framework Performance Report | Astro) (Analyzing the Impact of Framework Choice on Web Performance and User Experience). Uvádzame, ako jednotlivé technológie vplývajú na konkrétne metriky (LCP, FID/INP, CLS, TTFB, atď.) a pridávame odporúčania pre vývojárov pri výbere technológie s dôrazom na výkon a optimalizáciu podľa Web Vitals.
(Pozn.: Percentuálne údaje o “prejdení” Core Web Vitals znamenajú podiel stránok, ktoré dosiahli dobré výsledky vo všetkých troch hlavných metrikách podľa hraníc stanovených Googlom – typicky LCP ≤2,5 s, FID ≤100 ms (resp. INP ≤200 ms) a CLS ≤0,1 (2023 Web Framework Performance Report | Astro) (CMS | 2024 | The Web Almanac by HTTP Archive). Údaje sú primárne za mobilné zariadenia, kde sú nároky na optimalizáciu najvyššie.)
Frontendové frameworky a Web Vitals
Moderné frontendové frameworky sa líšia architektúrou, ktorá zásadne ovplyvňuje Web Vitals. Single-Page Application (SPA) frameworky (React, Angular, Vue, Svelte) vykresľujú obsah primárne na strane klienta JavaScriptom, kým Meta-frameworky ako Next.js, Nuxt.js či SvelteKit umožňujú server-side rendering (SSR) alebo static site generation (SSG), čo presúva časť práce na server alebo build-time. Tieto rozdiely vplývajú na rýchlosť načítania obsahu (LCP), čas prvej odozvy (FID/INP) aj stabilitu rozloženia (CLS). Nižšie porovnávame jednotlivé frameworky:
Výkonnosť SPA frameworkov (React, Angular, Vue, Svelte)
- React: Najpopulárnejšia knižnica/framework pre SPA. Široko využívaný React sám osebe nezaručuje špičkový výkon – renderuje sa na klientovi, čo môže predĺžiť LCP (čaká sa na načítanie a vykonanie balíka JS) a mierne zhoršiť interaktivitu pri zaťažení hlavného vlákna. V reálnych dátach však React vychádza relatívne priaznivo v porovnaní s inými SPA – v roku 2022 dosahovali weby postavené na Reacte približne rovnakú mieru “dobrých” Core Web Vitals ako celosvetový priemer (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine) (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine). Podľa analýzy CrUX v USA (~1 mil. webov) malo cca 34% React webov všetky Web Vitals v norme (mobilné dáta) (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine). To bolo o niečo lepšie než Angular a Vue, hoci mierne zaostávalo za Svelte. React teda patrí k lepšiemu priemeru – sám o sebe nie je výrazne horší ani lepšínež iné moderné SPA (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine) (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine). Výhodou je bohatý ekosystém nástrojov na optimalizáciu (napr. code-splitting, lazy loading). Mnohé React projekty dnes využívajú SSR cez Next.js pre lepší LCP, čomu sa venujeme nižšie.
- Vue.js: Ľahší framework, ktorý v baseline (bez SSR) tiež vykresľuje obsah na klientovi podobne ako React. Reálne dáta ho radili k druhej výkonnostnej úrovni – staršie štatistiky ukázali, že stránky postavené na Vue mali asi o 20–25% nižšiu pravdepodobnosť dobrých Web Vitals na mobile oproti Reactu (a ~15–20% horšiu na desktopoch) (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine). Inými slovami, v roku 2022 malo plne dobré Web Vitals okolo 33–36% Vue webov, čiže o čosi menej než React (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine). Pri najnavštevovanejších (top 1 mil.) stránkach sa ale výkonnosť Vue zlepšovala – Vue takmer dobehlo React a v top 100k dokonca React mierne prekonalo (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine) (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine). To naznačuje, že s dostatočnými optimalizačnými skúsenosťami dokáže Vue dosiahnuť porovnateľný výkon. V praxi Vue projekty často využívajú SSR cez Nuxt.js, čo rieši slabiny SPA (zlepšuje LCP a indexovateľnosť). Celkovo však bez SSR Vue podobne ako iné SPA trpí pomalším prvým načítaním – iba ~1/3 Vue stránok má LCP pod 2,5 s a ďalšie metriky v norme bez dodatočných úprav (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine).
- Angular: Kompletný framework (na rozdiel od knižnice React) s množstvom funkcií, no za cenu väčšej záťaže. Bundle Angularu býva najväčší, čo môže zhoršiť LCP aj FID. Štatistiky ukazujú, že Angular patria k najslabším z hľadiska Web Vitals – staršie AngularJS stránky aj moderné Angular (2+) aplikácie dosahovali nižší podiel dobrých výsledkov. V dátach CrUX 2022 mali napr. AngularJS weby ~30% a moderné Angular weby len okolo 11% mieru dobrých CWV na mobile (pravdepodobne podhodnotené vplyvom detekcie) (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine). Angular často poháňa zložité podnikové SPA, ktoré kladú dôraz na funkcionalitu skôr než na načítanie prvej stránky, čo môže vysvetľovať slabé LCP/INP. Pozitívne je, že Angular má oficiálne riešenie Angular Universal pre SSR, čo v prípade nasadenia výrazne zlepší LCP (obsah sa vygeneruje na serveri) a často aj SEO. Bez SSR ale platí, že Angular aplikácie zvyčajne potrebujú viac optimalizácií, aby dosiahli dobré Web Vitals (napr. oneskorené načítanie nepotrebných modulov, používanie Ahead-Of-Time kompilácie, optimalizácia zmeny detekcie s OnPush, atď.). V porovnaní s React/Vue vykazujú Angular stránky v priemere pomalšie interakcie a načítanie, ak sa neurobia špecifické opatrenia.
- Svelte: Moderný framework/kompilátor, ktorý sa líši tým, že výsledný kód nevyužíva virtuálny DOM ako React/Vue, ale kompiluje komponenty priamo do efektívneho JavaScriptu. Vďaka tomu Svelte aplikácie často obsahujú menej JS kódu a v reálnych podmienkach dosahujú lepšie Web Vitals. Podľa dát patrí Svelte k špičke – v roku 2022 v top 1M weboch malo až okolo 40–42% Svelte webov všetky metriky v zelených hodnotách, čím Svelte predstihlo React/Vue a takmer dorovnalo globálny priemer (45%) (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine) (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine). Svelte tak preukázateľne pomáha znižovať LCP a zlepšovať interaktivitu, pretože odľahčuje klientsku záťaž. Napríklad stránky so Svelte typicky načítavajú menej dát (najmä menej obrázkov) než priemer webu, vďaka moderným technikám ako lazy-loading, čo prispieva k rýchlejšiemu LCP (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine). SvelteKit, čo je fullstack framework postavený na Svelte, navyše podporuje SSR/SSG, takže vie dodať HTML okamžite. Dáta ukazujú, že SvelteKit patrí spolu s Astrom k absolútnej špičke v podiele stránok spĺňajúcich Web Vitals (Analyzing the Impact of Framework Choice on Web Performance and User Experience). Svelte je teda vynikajúca voľba, ak je prioritou výkon – už “out of the box” má menší výkonový overhead než React/Vue.
Zhrnutie SPA: Klasické SPA frameworky bez SSR majú najväčšiu výzvu s LCP – kým nezačne fungovať JS, hlavný obsah sa často nezobrazí. V priemere len okolo 30–40% stránok postavených čisto ako SPA prejde všetky Web Vitals (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine), pričom LCP býva úzke hrdlo (globálne len ~52% stránok spĺňa LCP požiadavku (2023 Web Framework Performance Report | Astro)). FID (prvá odozva) naproti tomu býva u SPA relatívne dobrý, pokiaľ stránka nespúšťa extrémne dlhé skripty – štúdia ukázala, že žiadny z moderných frameworkov neklesol pod 80% úspešnosť v FID (väčšina mala 80–90% stránok s FID < 100 ms) (Analyzing the Impact of Framework Choice on Web Performance and User Experience). To znamená, že prvú interakciu stíhajú spracovať takmer všetky (typicky preto, že k prvej interakcii dôjde až po načítaní). Avšak nová metrika INP (hodnotí všetky interakcie, nielen prvú) odhaľuje slabiny SPÁčok – žiadny SPA framework nedosiahol 80%+ dobrý INP, väčšina sa pohybovala okolo Fifty-60% (2023 Web Framework Performance Report | Astro). To súvisí s tým, že počas celej životnosti stránky na SPA môže dochádzať k drobným oneskoreniam (napr. pri navigácii či interakciách riadených JS). CLS (layout shift) nezávisí priamo od frameworku, ale od implementácie (napr. rezervovanie rozmerov pre obrázky, reklamy atď.). V priemere však aspoň polovica stránok naprieč všetkými frameworkami dosahuje dobrý CLS (Analyzing the Impact of Framework Choice on Web Performance and User Experience), a najlepšie výsledky mali nové frameworky – Astro, SvelteKit, Remix (75%+ stránok s CLS v norme) (Analyzing the Impact of Framework Choice on Web Performance and User Experience), zrejme vďaka dôrazu na best practices (napr. defaultné nastavenia image komponentov, atď.). Staršie platformy (či neoptimalizované stránky) môžu mať problém s CLS kvôli neošetrenému načítaniu obsahu.
SSR a meta-frameworky (Next.js, Nuxt.js, SvelteKit, Astro a i.)
Frameworky ako Next.js (React) či Nuxt.js (Vue) pridávajú serverové renderovanie a generovanie statických stránok ako reakciu na výkonové problémy SPA. SSR/SSG výrazne zlepšuje LCP – stránka po načítaní zobrazí hotové HTML (prípadne z cache), namiesto čakania na vykreslenie cez JS. Taktiež to zlepšuje Time to First Byte (TTFB) z pohľadu prehliadača, lebo prvý obsah príde skôr, hoci reálny TTFB závisí hlavne od backendu (rozoberáme nižšie). Tieto meta-frameworky často obsahujú aj ďalšie optimalizácie pre Web Vitals:
- Next.js (React SSR/SSG): Ponúka hybridné renderovanie – vývojár si môže zvoliť pre každú stránku SSR (načítava sa pri každom requeste aktuálne, vhodné pre často meniace sa alebo personalizované stránky) alebo SSG (vygeneruje sa staticky počas buildu a môže sa distribuovať cez CDN) (Next.js vs Vite vs Angular:Which Framework Should You Choose 2024) (Next.js vs Vite vs Angular:Which Framework Should You Choose 2024). V praxi Next umožňuje stavať veľmi rýchle weby, no výsledná výkonnosť závisí od správneho využitia jeho možností. Dáta totiž naznačujú, že mnoho Next.js stránok stále trpí slabším výkonom, pravdepodobne preto, že nevyužívajú SSG/SSR naplno alebo majú veľa klientského JS. Podľa analýzy HTTP Archive v 2023 prešlo všetky Web Vitals len cca 25% webov na Next.js (Analyzing the Impact of Framework Choice on Web Performance and User Experience), čo bolo pod priemerom webu. Výskumníci upozorňujú, že Next síce má SSR/SSG, ale keďže je postavený na Reacte, niektoré stránky používajú Next.js defacto ako SPA – t.j. renderujú väčšinu obsahu až na klientovi, čo negatívne ovplyvňuje napr. INP (Performance | 2024 | The Web Almanac by HTTP Archive). Google preto vývojárom pripomína, aby využívali SSR/SSG možnosti frameworkov ako Next.js, inak prichádzajú o ich výhody (Performance | 2024 | The Web Almanac by HTTP Archive). Samotný Next.js ale neustále pridáva ďalšie optimalizačné prvky zamerané na Web Vitals. Napríklad obsahuje vstavaný Image komponent, ktorý automaticky vykonáva lazy-loading obrázkov a generuje vhodné veľkosti (čím zlepšuje LCP aj CLS) (Next.js vs Vite vs Angular:Which Framework Should You Choose 2024). Ďalej má Font optimization, ktorá preberie fonty z Google Fonts a servíruje ich inline, čím eliminuje dodatočné requesty a predíde layout shiftom z dodatočného načítania fontov (Next.js vs Vite vs Angular:Which Framework Should You Choose 2024). Next.js tiež ponúka Script komponent na riadené načítanie tretích strán (napr. analytika) mimo kritickej cesty a dynamické importy modulov pre lazy-loading častí aplikácie (Next.js vs Vite vs Angular:Which Framework Should You Choose 2024) (Next.js vs Vite vs Angular:Which Framework Should You Choose 2024). Tieto funkcie pomáhajú zlepšiť Core Web Vitalsv aplikáciách – napr. lazy-loading a code-splitting znižuje čas do interaktivity a LCP, kontrolované načítanie skriptov zlepšuje INP minimalizáciou blokovania hlavného vlákna. V ideálnom prípade dobre nastavený Next.js web s využitím uvedených optimalizácií môže dosiahnuť výborné výsledky (Google uvádza prípady, kde nasadenie Next.js + optimizations viedlo k dramatickému zlepšeniu metrik) – problémom zostáva, že nie všetky projekty tieto možnosti využijú. Zhrnutie: Next.js má potenciál na vysoký výkon (LCP, CLS, INP) vďaka SSR a vstavaným optimalizáciám (Next.js vs Vite vs Angular:Which Framework Should You Choose 2024), no vyžaduje si disciplinované použitie; ak sa používa ako „len ďalší SPA“, výkonnostný zisk sa stráca a výsledky môžu byť podpriemerné (Performance | 2024 | The Web Almanac by HTTP Archive).
- Nuxt.js (Vue SSR/SSG): Podobne ako Next pre React, Nuxt pridáva SSR a SSG pre Vue. Tým zmierňuje problém pomalého prvého načítania známy z Vue SPA. Štatistiky však naznačujú, že v praxi zatiaľ mnoho Nuxt webov plne neexceluje – podľa spomínanej štúdie malo len ~20% Nuxt stránok dobré všetky Web Vitals(Analyzing the Impact of Framework Choice on Web Performance and User Experience), čo bol najslabší výsledok spomedzi sledovaných frameworkov. Je možné, že ide aj o vplyv menšej vzorky (Nuxt má menšie rozšírenie než Next) a tiež faktu, že mnohé Nuxt projekty sú obsahovo náročné stránky (napr. komplexné weby s množstvom prvkov), kde aj s SSR ostáva LCP vyššie. Každopádne platia podobné odporúčania: využívať statické generovanie všade, kde obsah nie je dynamický, aplikovať lazy-loading obrázkov a komponentov a pozorne sledovať výkon. Vue komunita takisto vyvíja vlastné nástroje (napr. modul Nuxt Image na optimalizáciu obrázkov, podobný Next Image). Správne nakonfigurovaný Nuxt dokáže doručiť veľmi rýchle stránky, no nesmie sa spoliehať len na default – treba napr. vypnúť nepotrebné moduly, dbať na cache API odpovedí pri SSR a pod.
- SvelteKit: Fullstack framework nad Svelte, ktorý kombinuje výhody malého bundle Svelte s SSR. Výsledky zo začiatku 2023 ho radia k absolútnej špičke – SvelteKit spolu s Astrom (viď nižšie) boli jediné frameworky, ktorých stránky v priemere prekonali globálny priemer v LCP a dosiahli nadpriemerný podiel úspešných CWV (2023 Web Framework Performance Report | Astro) (Analyzing the Impact of Framework Choice on Web Performance and User Experience). Konkrétne, SvelteKit aj Astro ako jediné prekonali ~52% hranicu pre LCP (52% stránok celkovo malo LCP v poriadku) (2023 Web Framework Performance Report | Astro). Celkovo Astro dokonca presiahol 50% úspešnosť v rámci všetkých troch Web Vitals, SvelteKit bol tesne za ním (odhady ~45–50%) (Analyzing the Impact of Framework Choice on Web Performance and User Experience). To je výrazne lepšie než Next (25%) či Nuxt (20%). Dôvodom je filozofia „menšieho JS“ – SvelteKit posiela na klienta minimum skriptov a podporuje tzv. partial hydration (len niektoré časti stránky sú interaktívne ostrovy). Tým minimalizuje čas strávený vykresľovaním na klientovi a zlepšuje LCP aj INP. Navyše získava výhodu MPA prístupu pre navigáciu (SvelteKit umožňuje tzv. server-side routing, hoci podporuje aj client-side navigáciu podľa potreby). Vývojári uvádzajú, že výkon Astro a SvelteKit je dnes veľmi podobný – Astro je optimalizovaný na obsahové weby, SvelteKit na aplikácie, no oba dosahujú vynikajúce Web Vitals v teréne (Analyzing the Impact of Framework Choice on Web Performance and User Experience). SvelteKit je teda vhodná voľba, ak chcete out-of-the-box vysoký výkon: využíva SSR, predgenerovanie a minimalizuje JS, čo sa priamo premieta do kratšieho LCP a lepšieho INP.
- Astro: Aj keď nebol explicitne uvedený v zadaní, Astro je príklad technológie orientovanej na Web Vitals. Ide o moderný webový framework, ktorý rendruje HTML na serveri alebo počas build procesu (SSG) a na klienta posiela takmer žiadny alebo len nevyhnutný JS. V Astro každá komponenta defaultne renderuje ako statický obsah, pokiaľ ju neoznačíte ako interaktívnu ostrovčekovú. Vďaka tomuto prístupu Astro v dátach úplne dominoval: ako jediný framework v štúdii Astro tímu mal nad 50% webov s dobrými CWV (Analyzing the Impact of Framework Choice on Web Performance and User Experience). V INP bol Astro taktiež najlepší (takmer 69% webov splnilo odporúčaný INP) a výrazne predstihol čisto SPA frameworky (2023 Web Framework Performance Report | Astro). Táto výhoda pramení z toho, že Astro stránky fungujú ako klasické MPA – každé zobrazenie je nový HTML dokument, takže medzijazdcové interakcie sa nepočítajú ako oneskorené vstupy (2023 Web Framework Performance Report | Astro). Astro spolu s WordPressom (tiež MPA) tak v INP prekonali ostatných (2023 Web Framework Performance Report | Astro) (2023 Web Framework Performance Report | Astro). Poučenie pre iné technológie: Aj bez použitia Astra možno dosiahnuť podobný efekt – napríklad ak v Next.js aplikácii použijete viac statických strán a menej klientských navigácií, INP sa zlepší. Astro však tieto praktiky presadzuje automaticky architektúrou. (Astro je vhodný najmä na obsahové weby, blogy, dokumentácie – tam, kde veľkú časť stránky tvorí statický obsah. Pre vysoko dynamické aplikácie ho vývojári často kombinujú – napr. interaktívne prvky rieši cez React/Vue komponenty ako ostrovy.)
Zhrnutie frontend: Čisto klientské SPA (React, Angular, Vue bez SSR) majú často problém s LCP (neskoro sa zobrazí hlavný obsah) a pri dlhších operáciách môžu trpieť aj interaktivitou (INP). SSR/SSG frameworky ako Next či Nuxt dokážu LCP výrazne zlepšiť, no treba ich správne nastaviť – mnohé reálne nasadenia zatiaľ nedosahujú svoj potenciál (iba 20–30% stránok na Next/Nuxt spĺňa všetky CWV, kvôli zanedbaniu optimalizácie) (Analyzing the Impact of Framework Choice on Web Performance and User Experience). Nové prístupy reprezentované SvelteKit či Astro prinášajú výborné výsledky – nad 50% stránok spĺňajúcich Web Vitals (Analyzing the Impact of Framework Choice on Web Performance and User Experience) – vďaka kombinácii serverového renderovania a minimalizácie JS. Pre vývojára to znamená, že ak je výkon top prioritou, mal by zvoliť buď ľahký framework (Svelte) alebo meta-framework s defaultným SSR/SSG (napr. SvelteKit, Astro, prípadne Next/Nuxt s dôslednou konfiguráciou). React a Vue sú univerzálne a môžu byť výkonné, no vyžadujú viac úsilia na doladenie. Angular poskytuje množstvo funkcií, ale za cenu väčších nárokov – aby Angular aplikácia prešla Web Vitals, takmer isto potrebuje SSR (Angular Universal) a precízne optimalizácie (trebárs prednačítanie dát, cache, odľahčenie bundle pomocou lazy modulov atď.). Všetky frameworky bez výnimky ťažia z best practices: optimalizácia obrázkov (moderné formáty, responzívne veľkosti, lazy-loading), využívanie CDN, minifikácia a kompresia zdrojov, odklad načítania nepotrebných skriptov, definovanie rozmerov médií (pre dobré CLS) atď. Technologický výber môže určiť strop výkonu, ale skutočný výsledok závisí aj od implementácie – napr. React stránka s rozumne malým bundle a správne použitou knihovňou pre obrázky môže predbehnúť zle navrhnutú stránku na „rýchlejšom“ frameworku.
Backendové technológie a Web Vitals
Výber backendového riešenia (webového frameworku na strane servera) ovplyvňuje najmä Time to First Byte (TTFB) a nepriamo aj LCP. Backend rozhoduje, ako rýchlo vie server vygenerovať a odoslať úvodný HTML dokument (a prípadne API dáta), čo tvorí základ času načítania stránky. Medzi bežné backendové platformy patria PHP frameworky (Laravel, Symfony, CMS ako WordPress), Python frameworky (Django, Flask), Java (Spring Boot), C#/.NET (ASP.NET Core), JavaScript na serveri (Node.js – Express, NestJS) či Ruby (Rails). Ich výkon v zmysle priepustnosti a latencie sa líši podľa použitého jazyka a architektúry, no dôležité je aj to, ako veľmi dokážu výslednú stránku “predpripraviť” pre klienta.
Rýchlosť spracovania požiadavky (TTFB) podľa backendu
TTFB je ovplyvnené výpočtovým výkonom servera a optimalizáciou kódu. Vo všeobecnosti platí, že kompilované jazyky (C#, Java) dosahujú vyššiu surovú rýchlosť než interpretované skriptovacie jazyky (PHP, Python, Ruby). Napríklad v jednoduchom benchmarku REST API (čítanie z DB a vrátenie JSON) ASP.NET Core (C#) zvládol ~855 požiadaviek/s s priemerným časom ~11,7 ms na request, kým Laravel (PHP) ~128 požiadaviek/s (≈78 ms/req) a Django (Python) ~269 požiadaviek/s (≈37 ms/req) (Benchmarking the request time of Laravel, ASP.NET Core and Django | by James Judd | Medium) (Benchmarking the request time of Laravel, ASP.NET Core and Django | by James Judd | Medium). .NET Core tu jasne viedol rýchlosťou, nasleduje Python (Django) a potom PHP (Laravel). Dôvodom je, že .NET a Java bežia ako nepretržite bežiace procesy s JIT kompiláciou, zatiaľ čo tradičné PHP spracúva každú požiadavku nanovo (aj keď opcache zmierňuje režijné náklady). Node.js (JavaScript na serveri) je tiež veľmi rýchly v I/O operáciách vďaka non-blocking architektúre – pri vysokom počte súbežných spojení často prekoná napr. PHP. Treba však dodať, že reálne weby používajú caching a ďalšie vrstvy, takže rozdiely sa môžu zmenšiť. Napríklad PHP aplikácie (WordPress, Laravel) bežia často za reverzným proxy (nginx) s kešovaním, takže väčšinu requestov obslúži cache do ~<100 ms, aj keď surový výkon PHP by bol slabší. Na druhej strane, Java a .NET servery vedia udržať nízke TTFB aj pri vysokej záťaži, kým skriptovacie jazyky môžu pri návale dotazov výrazne spomaliť (ak sa cache nevyužije).
Z pohľadu Google Web Vitals je TTFB “dobrý” ak je pod ~800 ms (Performance | 2024 | The Web Almanac by HTTP Archive) (Performance | 2024 | The Web Almanac by HTTP Archive). Globálne štatistiky ukazujú, že približne 42% mobilných webov má TTFB < 800 ms (dobrý), okolo 40% je v kategórii 800–1800 ms (potrebuje zlepšiť) a ~19% má > 1800 ms (zlý) (Performance | 2024 | The Web Almanac by HTTP Archive). Táto distribúcia sa za posledné roky veľmi nezlepšila (Performance | 2024 | The Web Almanac by HTTP Archive), čo naznačuje, že väčšina webov neurobila výrazný pokrok v rýchlosti backendu či sieti – rozdiely TTFB medzi rokmi 2020 a 2024 sú minimálne (Performance | 2024 | The Web Almanac by HTTP Archive) (Performance | 2024 | The Web Almanac by HTTP Archive). Z toho vyplýva, že hoci front-endové optimalizácie (FCP, klientské techniky) sa zlepšujú, úzky profil zostáva generovanie a doručenie samotnej stránky (Performance | 2024 | The Web Almanac by HTTP Archive).
Z hľadiska technológií možno uviesť pár príkladov:
- WordPress (PHP) – historicky mal povesť “pomalého” CMS, čo potvrdili aj dáta: v 2020 iba ~24% WP stránok prešlo Core Web Vitals (všetky tri) (New dashboard: the Core Web Vitals technology report – Analysis – HTTP Archive) (New dashboard: the Core Web Vitals technology report – Analysis – HTTP Archive). Dôvodom býval často vysoký TTFB kvôli dynamickému načítavaniu obsahu (WordPress pri každom requeste zostavuje stránku z databázy). V posledných rokoch však WordPress urobil pokrok (napr. projekt Gutenberg, výkonové zlepšenia v jadre) – medián LCP pre WP sa zlepšil z 28% na 40% (podiel stránok s LCP ≤2,5 s) medzi 2023 a 2024 (CMS | 2024 | The Web Almanac by HTTP Archive). To naznačuje, že TTFB a celkové načítanie sa zrýchlili – prispelo k tomu široké zavedenie kešovania stránok a napríklad aj hostingové optimalizácie (mnoho WP stránok beží na manageovaných hostingu s integrovaným cache). Napriek zlepšeniu však 40% je stále pod globálnym priemerom LCP (~63% v júni 2024) (CMS | 2024 | The Web Almanac by HTTP Archive), čiže WP stránky stále zaostávajú za niektorými inými platformami. Iné PHP riešenia (napr. Drupal, Joomla) vykazovali podobné hodnoty – Drupal ~56% stránok s dobrým LCP v 2024, Joomla ~45% (CMS | 2024 | The Web Almanac by HTTP Archive). Naopak platformy silne zamerané na výkon (Duda, Squarespace) dosiahli nadpriemerné čísla – napr. Duda až 73% a Squarespace ~60% stránok s LCP do 2,5 s (CMS | 2024 | The Web Almanac by HTTP Archive). Tieto platformy používajú agresívne CDN kešovanie a optimalizácie out-of-the-box, takže dokazujú, že aj na pomerne komplexných CMS možno dosiahnuť výborný TTFB/LCP. Laravel ako PHP framework sám osebe nemá jednotné štatistiky v HTTP Archive, ale výkonnostne bude podobný WordPressu (beží na PHP). Moderné verzie PHP (7.x a 8.x) výrazne zlepšili výkon a Laravel má mechanizmy ako route cache, kompilácia blade šablón, ktoré znižujú TTFB pri opakovaných requestoch. Správne nasadená Laravel aplikácia (s opcache, cache výsledkov dotazov a pod.) vie bez problémov dosiahnuť TTFB pod 200 ms na jednoduché stránky. Symfony (ďalší PHP framework) podobne – poskytuje nástroje na HTTP caching (HTTP cache, ESI) a s PHP 8 má slušný výkon. Vo všeobecnosti pre PHP platí: nasadenie silného caching layeru je kľúčové – buď full-page cache (ak obsah nie je pre každého iný), alebo aspoň cache častí stránky, výsledkov DB dotazov atď. Bez cache môže byť TTFB v stovkách milisekúnd až jednotkách sekúnd (pri zložitých dotazoch), čo by znamenalo neprejdenie Web Vitals.
- Node.js (Express, NestJS): Node je event-driven, zvláda veľa súbežných pripojení s nízkym overheadom, takže TTFB môže byť veľmi nízke najmä pri jednoduchých API. Vo Web Vitals kontexte Node často figuruje pri SSR pre front-end (napr. Next.js beží na Node, rovnako SvelteKit atď.). Tam TTFB zahŕňa čas serverového renderovania. Napríklad Next.js SSR môže pridať desiatky až stovky milisekúnd navyše (k TTFB) oproti statickému súboru, ak musí na serveri vykonať dátové dotazy a render React komponent. Preto Next.js ponúka možnosť SSG (aby TTFB bol podobný ako pri statických stránkach, typicky <100 ms z edge cache). NestJS, postavený nad Express, prináša modulárnu architektúru do Node sveta. Výkonnostne je podobný Expressu, TTFB závisí hlavne od vykonávaných operácií. Node v jednom vlákne môže mať problém, ak musí spracovať veľmi náročnú úlohu – vtedy ostatné požiadavky čakajú (to môže zhoršiť TTFB pod záťažou). Riešením je horizontálne škálovanie (viac Node procesov). Pri správnom návrhu (väčšinu práce delegovať do asynchrónnych operácií, nepoužívať blokujúci kód) Node backend vie obsluhovať požiadavky rýchlo. Z pohľadu Web Vitals je dôležité, že Node umožňuje rovnaký jazyk pre frontend aj backend, čo vedie k popularite SSR riešení (Next, Nuxt, Universal). Tie v podstate presúvajú časť front-end výkonu na server (zlepšia LCP, lebo klient dostane HTML, ale môžu zhoršiť TTFB, ak server generuje pomaly). Vývojár musí balansovať – napr. pri Next.js ak SSR stránka potrebuje volať viacero externých API pred renderom, TTFB môže ľahko prekročiť 800 ms, čo ohrozí Web Vitals. Tu pomôže kešovanie na úrovni Node servera (napr. Incremental Static Regeneration v Next.js – stránka sa vygeneruje raz za X minút a inak sa podáva z cache). V jednoduchších nasadeniach (API bez SSR) dosahujú Node servery TTFB bežne <100 ms pre jednoduché dotazy.
- Python (Django, Flask): Pythonové frameworky sú taktiež interpretované, ale často dobre optimalizované v C (napr. webserver Gunicorn alebo uvicorn). Django kladie dôraz na správnu konfiguráciu – s kešovaním šablón, dotazov a využitím transakčnej pamäte vie obsluhovať requesty pomerne rýchlo. V spomenutom teste vyššie Django prekonalo Laravel (37 ms vs 78 ms na request) (Benchmarking the request time of Laravel, ASP.NET Core and Django | by James Judd | Medium), hoci to môže závisieť od konkrétnej úlohy. Pre reálne weby s Djangom platí: treba využiť vstavanú cache framework (Django má podporu pre Memcached/Redis cache výsledkov), ťažké výpočty robiť asynchrónne (Django REST môže fungovať s async views), a používať vhodný application server (Gunicorn s viacerými workers). Flask je jednoduchší, beží často na Werkzeug a umožňuje nižšiu réžiu, ale väčšie projekty s Flaskom si musia sami poriešiť cache a optimalizácie. Celkovo Python nie je taký rýchly ako C# alebo Java, ale na bežné webové loady do niekoľkých stoviek rps stačí s rezervou. TTFB u Python backendov sa dá udržať v stovkách ms alebo lepšie, ak sa stránky kešujú a nepoužívajú sa zložité synchronné operácie pri každom requeste.
- Java (Spring Boot, Jakarta EE): Java webové frameworky (Spring, Vert.x, Quarkus atď.) bežia skompilované na JVM, často s JIT optimalizáciami počas behu. To im dáva potenciál veľmi nízkej latencie po zahriatí. Napríklad e-commerce gigant LinkedIn prešiel z Ruby on Rails na vlastné riešenie na JVM práve kvôli výkonu a latencii – Ruby mal problém s TTFB pod záťažou. Spring Boot ako populárny enterprise framework vie obsluhovať stovky requestov za sekundu s nízkou latenciou, no sám osebe (ak generuje dynamický obsah) môže pridať desiatky ms. Dôležité je, že v prostredí Javy sa takmer vždy nasádza aj HTTP cache (resp. integrácia s CDN) pre statický obsah a často aj pre HTML (napr. ak obsah nie je per-user). Web Vitals a Java: ak je stránka generovaná Javou a nie je kešovaná, TTFB môže byť okolo 100–300 ms (čo je ešte dobré). Java server ale umožňuje napr. paralelne spracúvať časti požiadavky (napr. asynchrónne volania mikroservis pri skladaní stránky), čím vie skrátiť celkový čas generovania. Metriky LCP môžu profitovať aj z tzv. Edge Side Includes – niektoré Java frameworky vedia generovať HTML po častiach a posielať postupne, čo môže mierne zlepšiť vnímaný čas načítania (hoci LCP sa meria až po načítaní najväčšieho prvku, čiže ak ten príde s oneskorením, LCP to aj tak ovplyvní).
- ASP.NET Core (C#): Riešenie od Microsoftu, ktoré v novej cross-platformovej verzii .NET Core patrí k najvýkonnejším webovým serverom. Ako ukázal test, .NET dosahuje extrémne nízke latencie – ~12 ms na request v jednoduchom scenári (Benchmarking the request time of Laravel, ASP.NET Core and Django | by James Judd | Medium). V reálnej webovej aplikácii bude latencia vyššia (podľa DB operácií atď.), ale .NET zvládne veľkú záťaž s menej hardvéru. Z pohľadu Web Vitals to znamená, že TTFB môže byť excelentný. Veľa .NET webov beží na IIS/Azure infraštruktúre, kde sa využíva aj HTTP/2 push, caching proxy a pod. Pre koncového používateľa nie je zásadný rozdiel, či stránku vygeneroval PHP alebo .NET, ak obe prídu do 500 ms. Ale pri veľmi náročných stránkach (napr. zložité agregácie dát) môže výkon backendu rozhodnúť, či LCP bude 2,4 s alebo 3,0 s. Odporúčanie: Pre extrémne výkonové kritické aplikácie (napr. finančné platformy) môže mať zmysel zvoliť .NET alebo Java kvôli ich rýchlosti a možnostiam optimalizácie na nízkej úrovni. Pre bežné weby je však často efektívnejšie použiť akýkoľvek známy framework a radšej pridať vrstvu cache/CDN.
Vplyv backendu na LCP, FID/INP a CLS
Backend nepriamo ovplyvňuje aj ostatné Web Vitals:
- LCP: Ako zdôrazňuje Google, LCP veľmi závisí na rýchlosti doručenia prvého bajtu HTML a následne na rýchlosti načítania zdrojov (CMS | 2024 | The Web Almanac by HTTP Archive) (CMS | 2024 | The Web Almanac by HTTP Archive). Pomalejší backend = vyšší TTFB = neskorší štart načítania zdrojov = horší LCP. Dáta ukazujú, že pri 75. percentile LCP (hraničná hodnota medzi “dobrým” a “needs improvement”) tvorí TTFB až 600 ms z času LCP (Performance | 2024 | The Web Almanac by HTTP Archive). Pri pomalších stránkach je TTFB ešte väčší (p75 “needs improvement” LCP má TTFB ~1360 ms) (Performance | 2024 | The Web Almanac by HTTP Archive). Najhoršie stránky (p75 “poor” LCP) strávia v priemere 2,27 s len čakaním na prvý bajt (Performance | 2024 | The Web Almanac by HTTP Archive) – to je takmer celý limit 2,5 s! Z toho vidno, že ak je backend pomalý, front-end optimalizácie LCP nepomôžu. Preto napr. veľké CMS platformy investovali do zrýchlenia serverov: napr. spomínané zlepšenie WordPressu (z 28% na 40% dobrých LCP) súvisí s redukciou TTFB a optimalizáciou načítania obrázkov (CMS | 2024 | The Web Almanac by HTTP Archive). Frameworky ako Next.js či Nuxt z pohľadu LCP pomáhajú, lebo pred-generujú HTML, čím skracujú čas do zobrazenia prvej (a často aj najväčšej) časti obsahu. MPA vs SPA: Tradičné serverové frameworky (Laravel, Django, Rails) generujú celú stránku HTML na serveri, takže prvé vykreslenie hlavného obsahu býva rýchle (ak je server rýchly). Môžu však trpieť tým, že pri každej navigácii sa znova čaká na TTFB. Naproti tomu SPA po prvej záťaži načítava podstránky cez XHR/API, kde TTFB môže byť menšie (prenos menšieho JSON oproti celému HTML). Avšak v metrike LCP sa hodnotí každé zobrazenie stránky zvlášť – takže ak užívateľ klikne v SPA na link, ktorý načíta novú sekciu a zobrazí ju, to môže vyvolať nový LCP meraný pre ten prechod (pokial ide o „navigáciu soft page“ – tu je definícia zložitejšia). V praxi však Core Web Vitals monitorujú LCP hlavne pre page loady. Takže pre prvú page load MPA môže mať navrch.
- FID/INP: Backend tu hrá úlohu v tom, koľko práce nechá na klientovi. Pri plne serverových stránkach (napr. čisté Laravel/Django bez heavy JS) je interakcia často realizovaná jednoduchými formulármi či linkami – čiže FID býva vynikajúci, lebo stránka nemá takmer žiadny JS, ktorý by blokoval odpoveď na vstup. V teréne sa FID > 100 ms prakticky nevyskytuje na weboch, ktoré nepoužívajú veľa JS. Naopak, ak backend pošle klientovi veľa skriptov (typicky keď renderuje React aplikáciu tzv. hydration proces – server pošle HTML + veľký JS bundle), prvé interakcie môžu byť oneskorené kým sa JS načíta a inicializuje. INP (ako nástupca FID) sleduje všetky interakcie – tu majú multi-page tradičné stránky výhodu, lebo každá väčšia akcia užívateľa spustí novú page load (nie je počítaná ako “oneskorenie”, aj keď celkovo môže trvať dlhšie) (2023 Web Framework Performance Report | Astro). Preto Astro a WordPress (MPA) mali výrazne lepší INP než SPA frameworky (2023 Web Framework Performance Report | Astro). Záver: Pokiaľ aplikácia nepotrebuje ultra-rich interaktivitu, jednoduchší backend-renderovaný prístup môže zabezpečiť skvelú responsívnosť (INP). Napríklad administratívne rozhranie postavené v Django s minimom JS bude reagovať na kliky okamžite (lebo všetko spracuje server po odoslaní formulára – to síce nie je merané ako FID/INP delay, keďže interakcia vedie k navigácii). Naopak, stránka kde backend pošle kopec JS (napr. e-shopový frontend v Reacte) môže mať drobné zaváhania pri interakciách, ak hlavné vlákno práve rieši inú úlohu (napr. vykresľovanie). Preto pre dobrý INP je často kľúčové rozložiť prácu medzi backend a frontend vhodne – nie všetko nechávať na klienta.
- CLS: Vizuálna stabilita je takmer nezávislá od backend tech – súvisí s HTML/CSS výstupom. Backend ale môže pomôcť generovať stránky tak, aby sa vyhli CLS (napr. vložiť width/height atribúty do
<img>
tagov na strane servera, čo mnohé moderné frameworky robia). Alebo renderovať rezervné miesto pre reklamné bannery ak vie, že tam budú vsunuté neskôr. Tu majú výhodu platformy, ktoré to riešia out-of-the-box: napr. Next.js automaticky pridáva štýly pre s rezervou miesta (Next.js vs Vite vs Angular:Which Framework Should You Choose 2024), takže stránky majú menší CLS. Vo výsledkoch bolo vidieť, že mladšie frameworky vykazovali lepší CLS– zrejme vďaka takýmto praktíkám (Analyzing the Impact of Framework Choice on Web Performance and User Experience). Napríklad Astro a SvelteKit mali vyše 75% stránok s dobrým CLS, zatiaľ čo napr. staršie CMS (WordPress) mali okolo 50% (Analyzing the Impact of Framework Choice on Web Performance and User Experience). Veľa WP tém totiž nemalo pevné rozlíšenia obrázkov, čo spôsobovalo posuny. Dnes však aj to sa zlepšuje (WordPress od verzie 5.5 zaviedolloading="lazy"
a podporu prewidth/height
pri vkladaní obrázkov). Pre back-end vývojára teda platí: vygenerovať HTML tak, aby sa minimalizovali dodatočné posuny – či už pomocou rezervných kontajnerov, inline štýlov s rozmermi, alebo použitia stabilných komponent (napr. tabuľky s fixnou veľkosťou).
Odporúčania pri výbere technológie (s dôrazom na výkon)
Na základe uvedených poznatkov možno zhrnúť niekoľko odporúčaní pre vývojárov a architektov:
- Zvážte charakter projektu: Ak ide o obsahový web (napr. blog, marketingový web) alebo jednoduchšiu stránku, výborné výsledky dosiahnete so statickým generovaním alebo MPA prístupom. Frameworky ako Astro, 11ty, Hugoči SvelteKit/Next v SSG móde umožnia takmer okamžitý LCP a minimálne CLS. Naopak, pre veľmi interaktívnu aplikáciu (napr. komplexný dashboard) je realistické, že použijete SPA (React/Vue/Angular) – tam potom dbajte na optimalizáciu bundlu a rozdelenie kódu, aby prvá obrazovka bola rýchlo použiteľná. Tiež zvážte či naozaj potrebujete SPA; mnohé aplikácie sa dajú spraviť aj progresívne (MPA + postupne dopĺňaná interaktivita). Napríklad GitHub postupne prechádzal z SPÁčok späť na server-renderované stránky s Turbo Drive (prenašajú HTML čiastkovo) kvôli výkonu.
- Minimalizujte JavaScript na strane klienta: Bez ohľadu na framework platí, že každý kilobajt JS môže zhoršiť LCP a INP. Preto sa vyhýbajte zbytočne veľkým knižniciam, nepoužívajte celý UI toolkit ak využijete 10% jeho komponent, radšej vyberte menšie alternatívy. Pri Reacte/Vue využite tree-shaking, pri Angulari nastavte optimization a budgets v konfigurácii. Svelte má výhodu, že kompiluje len použité veci. Next.js a spol. umožňujú dynamic import modulov – rozdeľte svoj kód tak, aby sa načítal len keď treba (Next to robí automaticky pre každú stránku). Pomalé interakcie (INP) často spôsobujú dlhé úlohy v JS – sledujte v DevTools Long Tasks, rozdeľte výpočet na menšie časti (napr. requestIdleCallback, web worker na veľmi náročné výpočty). Skrátka, nech váš front-end nikdy „nezamrzne“ na stovky milisekúnd.
- Využívajte SSR/SSG tam, kde je to možné: Serverové renderovanie typicky zlepší LCP (užívateľ vidí obsah skôr) a môže zlepšiť aj FID/INP, lebo po načítaní HTML už môže používateľ interagovať s odkazmi (ktoré vyvolajú navigáciu). Moderné frameworky to uľahčujú – Next.js, Nuxt, SvelteKit, Angular Universal – preto ich využitie dá stránke náskok. Pozor však na TTFB: SSR pridáva čas na strane servera, takže ak niečo generujete serverovo, robte to efektívne. Pomalý SSR môže paradoxne poškodiť LCP (ak HTML príde neskoro). Riešením je caching – napr. kešujte výsledky SSR pre obľúbené stránky. Next.js má ISR (Incremental Static Regeneration), v Angular Universal sa dá použiť prerender pri deployi a pod. Static generation je kráľ rýchlosti – ak obsah môžete generovať dopredu (napr. články, produkty), určite to spravte. CDN doručí HTML za <100 ms a máte prakticky vyhraté (často LCP < 1 s na rýchlych linkách).
- Zlepšujte TTFB backendu: Optimalizujte databázové dotazy (používajte indexy, vyhýbajte sa N+1 problémom), využite in-memory cache (Redis/Memcached) na často čítané údaje. Zvážte použitie Edge computingu – napr. Cloudflare Workers, Vercel Edge Functions – ktoré môžu predgenerovať alebo kešovať odpovede blízko používateľa, čím skráti sieťovú latenciu. Príklad: ak používate WordPress, nasadenie pluginu pre page cache + CDN môže znížiť TTFB z 1,5 s na 100 ms, čo dramaticky zlepší LCP (CMS | 2024 | The Web Almanac by HTTP Archive) (CMS | 2024 | The Web Almanac by HTTP Archive). Pri výbere backend platformy berte do úvahy aj výkonnostný strop – napr. ak očakávate veľmi vysokú záťaž, Node alebo PHP môžu vyžadovať škálovanie na viac inštancií skôr než .NET/Java. Ale ak pracujete v cloude, auto-scaling to vie pokryť, takže dôležitejšie je, v čom váš tím vie rýchlo a kvalitne vyvíjať (lebo rychlosť vývoja nesmie ísť na úkor rýchlosti webu – zle napísaný kód v rýchlom jazyku môže byť pomalší než dobrý kód v pomalšom jazyku).
- Monitorujte a testujte Web Vitals: Či už zvolíte akúkoľvek kombináciu technológií, nezaobídete sa bez priebežného merania. Využite Chrome User Experience Report (CrUX) a Google Analytics/Web Vitals extension na sledovanie reálnych používateľských metrík. Pri vývoji používajte Lighthouse a PageSpeed Insightsna simulované testy – tie odhalia najmä LCP problémové miesta a veľké posuny (CLS). Dôležité je testovať na mobilných zariadeniach a pomalšom pripojení, keďže tam sa rozdiely technológií prejavia najviac (napr. SPA s veľkým JS môže na mobile mať LCP 5 s, kým SSR stránka 2 s). Sledujte aj Longest Contentful Paint (nie je priamo metrika, ale v Lighthouse je to metrika zobrazujúca ak trvá vykreslenie dlhšie než LCP napr. kvôli scrollu). A samozrejme profilujte backend – logujte časy generovania stránok na serveri, aby ste videli, či TTFB nemáte vyššie než by mal byť.
Záver: Neexistuje jediná “najrýchlejšia” technológia pre všetky prípady, ale reálne dáta naznačujú určité trendy. Jednoduchšie, statickejšie a menej skriptové riešenia (Svelte/SvelteKit, Astro, statické generovanie) majú dnes najväčšiu šancu dosiahnuť vynikajúce hodnoty Google Web Vitals (Analyzing the Impact of Framework Choice on Web Performance and User Experience) (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine). Ťažké SPA frameworky môžu tiež uspieť, no vyžaduje to doplniť ich o SSR/SSG a starostlivo ladiť. Backend výber by mal korešpondovať s potrebami – na malý web kludne PHP/Python, na vysokozáťažové API zvážte Node/Go/.NET pre rezervu výkonu. Každá vrstva (front-end aj back-end) musí prispieť svojím dielom k rýchlosti: rýchly server dodá obsah bez meškania, optimalizovaný front-end zabezpečí, že sa obsah rýchlo vykreslí a stránka ostane plynulo interaktívna. Len synergiou oboch dosiahnete, že vaša stránka bude patriť k možno zatiaľ menšine (~50%) webov, ktoré úspešne prejdú všetkými kritériami Core Web Vitals (CMS | 2024 | The Web Almanac by HTTP Archive) (CMS | 2024 | The Web Almanac by HTTP Archive), a tým získa výhodu lepšieho SEO a spokojnejších používateľov.
Tabuľka: Porovnanie vybraných technológií a ich vplyv na Web Vitals
Technológia | Charakteristika | LCP (rýchlosť načítania obsahu) | INP/FID (odozva na vstup) | TTFB (výkon backendu) | Poznámky |
---|---|---|---|---|---|
React (SPA) | Klientske renderovanie (JSX v prehliadači). | 🟠 Priamy React bez SSR môže mať pomalší LCP (čaká na JS) (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine) (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine). SSR cez Next.js vie LCP zlepšiť. | 🟢 FID zvyčajne dobrý (80%+ ok) (Analyzing the Impact of Framework Choice on Web Performance and User Experience), INP stredný (môže trpieť dlhými taskami pri veľkých app) ([2023 Web Framework Performance Report | Astro](https://astro.build/blog/2023-web-framework-performance-report/#:~:text=Most%20noticeable%20in%20the%20chart,passing)). | 🟢 Záleží od servera (React sám je front-end). |
Angular (SPA) | Kompletný framework, klientská MVC arch. | 🔴 Bez SSR často najslabší LCP (veľký bundle) (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine). SSR (Angular Universal) je takmer nevyhnutnosť na verejné weby. | 🟢 FID obyčajne ok (framework bootstrap beží pred prvou interakciou). INP môže byť slabší pri komplexných stránkach (viac JS) ([2023 Web Framework Performance Report | Astro](https://astro.build/blog/2023-web-framework-performance-report/#:~:text=It%E2%80%99s%20worth%20noting%20that%20the,tested%20struggle%20with%20this%20metric)) ([2023 Web Framework Performance Report | Astro](https://astro.build/blog/2023-web-framework-performance-report/#:~:text=One%20reason%20could%20be%20that,all%20SPAs)). |
Vue (SPA) | Ľahší progresívny framework (VM + templating). | 🟠 LCP lepší než Angular, podobný React (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine). SSR cez Nuxt pomáha načítaniu. | 🟢 FID väčšinou v poriadku. INP – pri menších app výborný, pri väčších môže utrpieť (závisí od optimalizácie komponentov). | 🟢/🟠 Podobne ako React – závisí na hostingu (Vue beží na akomkoľvek serveri). | Jednoduchšie učenie než Angular. S Nuxt 3 dostal moderné SSR/SSG schopnosti. Dbať na optimalizáciu reaktívnych dát (zbytočné render cykly môžu blokovať main thread). |
Svelte (SPA) | Kompilovaný framework (žiadny virtuálny DOM). | 🟢 Veľmi rýchly LCP – malé množstvo JS, často blízko statickému webu (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine) (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine). | 🟢 Výborný FID (minimum init JS). INP taktiež veľmi dobrý – menej dlhých úloh vďaka efektívnemu kódu. | 🟢/🟠 Závisí od backendu (často nasadené so SvelteKit na Node). | Svelte dosahuje skvelé Web Vitals s menšou námahou. SvelteKit pridáva SSR – odporúčaný ak chcete Svelte na väčší web. |
Next.js (React SSR/SSG) | React framework s SSR/SSG, Image optimizáciou. | 🟢/🟠 Vie dosiahnuť nízky LCP vďaka SSR/SSG a optimalizáciám (image, font) (Next.js vs Vite vs Angular:Which Framework Should You Choose 2024). Slabý LCP ak sa používa nesprávne (napr. render až na klientovi) ([Performance | 2024 | The Web Almanac by HTTP Archive](https://almanac.httparchive.org/en/2024/performance#:~:text=match%20at%20L302%20significant%20decline,of%20the%20framework%20they%20use)). | 🟢 FID spravidla v pohode (hydratačný JS beží po vykreslení). 🟠 INP môže trpieť ak sa spolieha na client-side navigáciu (viac input delay) ([2023 Web Framework Performance Report |
Nuxt.js (Vue SSR/SSG) | SSR/SSG nad Vue, modulárny. | 🟢 Podobne ako Next – SSR/SSG zlepšuje LCP, no záleží na implementácii. Pri správnom použití veľmi dobrý LCP; pri zlom môže byť priemerný. | 🟢 FID bez problémov. 🟠 INP – lepší než čisto SPA, ale ak používa spa mód pre navigáciu, môžu nastať oneskorenia podobne ako pri Next/React. | 🟠 Beží na Node (vite/nuxt server). TTFB treba strážiť pri dynamických stránkach. | Nuxt 3 je postavený na vite, čím zrýchlil buildy aj runtime. Má funkciu Nuxt Image (podobne ako Next/image) – odporúča sa nasadiť kvôli LCP. |
SvelteKit (Svelte SSR) | Fullstack framework pre Svelte. | 🟢 Excelentný LCP – serverovo vyrenderovaný Svelte je veľmi rýchly, často prekonáva konkurenciu (Analyzing the Impact of Framework Choice on Web Performance and User Experience). | 🟢 FID výborný, minimum JS. 🟢 INP výborný – navigácie môžu byť serverové, minimalizuje input-lagy ([2023 Web Framework Performance Report | Astro](https://astro.build/blog/2023-web-framework-performance-report/#:~:text=One%20reason%20could%20be%20that,all%20SPAs)). | 🟠 Závisí na adaptéri (Node/Deno/Cloudflare Workers atď.). TTFB väčšinou nízke, pozor ak volá externé API pri SSR. |
Laravel (PHP) | Serverové MVC (Blade šablóny). | 🟠 LCP závisí na TTFB – s cache môže byť dobrý, bez cache často pomalší (PHP generuje stránku pomalšie než napr. .NET). | 🟢 FID/INP vynikajúci, ak sa nepoužíva veľa klientského JS (MPA model – formuláre odošlú na server). | 🟠 Nativne pomalší runtime, ale opcache pomáha. Dobrá konfigurácia (Redis cache) dá TTFB ~100 ms; bez toho môže byť >500 ms. | Laravel má bohatý ekosystém (Redis, Horizon pre queue). Pre výkon: používať Route cache, View cache, prípadne Predis pre session. Odporúča sa nasadiť pred web server s caching proxy (Varnish, nginx cache) na verejné stránky. |
Django (Python) | Serverové MTV (templating v Python). | 🟠 Podobné ako Laravel – LCP dobrý, ak server stíha do ~500 ms TTFB. Pri neoptimalizovanom DB prístupe môže LCP trpieť (sekundové TTFB). | 🟢 V defaulte vynikajúca interaktivita (málo JS). Pri použití moderného frontendu (React v šablónach) záleží na ňom. | 🟠 Python je pomalší; Gunicorn s viacerými workerami odporúčaný. TTFB ~100-300 ms s cache, inak vyššie. | Pre výkon: využiť Django cache framework(CACHE_MIDDLEWARE), databázové optimalizácie (select_related, prednačítanie). Možné doplniť o Celery pre pomalé úlohy mimo request. |
Spring Boot (Java) | Serverové Java (embedded Tomcat/Netty). | 🟢 Ak správne nasadené, LCP vie byť veľmi dobrý – Java servre vedia rýchlo dodať prvý obsah. Často sa kombinuje s server-side HTML šablónami (Thymeleaf) alebo s predgenerovaním. | 🟢 Interaktivita väčšinou výborná (formulárové weby). Pri použití ako API pre SPA záleží od frontendu. | 🟢 Vysoký výkon – nízky TTFB aj pri záťaži (desiatky ms). JVM warmup potreba – po zahriatí veľmi rýchly. | Enterprise riešenie – robustné, umožňuje horizontálne škálovať. Pre top výkon: tuning JVM, použitie nativných image (GraalVM) ak treba skrátiť studený štart. |
ASP.NET Core (C#) | Serverové .NET (Kestrel server). | 🟢 Výborný LCP vďaka rýchlemu servírovaniu obsahu. .NET aplikácie často dosahujú veľmi nízke latency, čo podporí skoré vykreslenie. | 🟢 Väčšinou MPA, takže interakcie sú spracované serverom (minimálne FID). Pri použití Blazor/WebAssembly závisí od klienta (ale to je iný scenár). | 🟢 Špičkový – .NET Core patrí k najrýchlejším (requesti v jednotkách ms na prázdno). Pod záťažou stabilný TTFB. ([Benchmarking the request time of Laravel, ASP.NET Core and Django | by James Judd |
Legenda: 🟢 – vo všeobecnosti veľmi dobré; 🟠 – priemerné alebo silne závislé na implementácii; 🔴 – potenciálne problémové (bez výraznej optimalizácie).
Pozn.: Vyššie uvedené hodnotenia sú zovšeobecnené. Každá technológia umožňuje vytvoriť rýchly aj pomalý web – rozdiel spočíva vo využití najlepších postupov. Napríklad Angular aplikácia s implementovaným Angular Universal, správnym cachovaním a lazy-loadingom môže dosiahnuť rovnako dobré metriky LCP ako SvelteKit, len s väčším úsilím. Cieľom tabuľky je zvýrazniť typické silné/slabé stránky jednotlivých stackov z pohľadu Web Vitals.
Záver
Optimalizácia výkonu naprieč frontendom aj backendom je nevyhnutná pre dosiahnutie dobrých výsledkov Core Web Vitals. Front-endové frameworky udávajú tón v tom, koľko práce musí vykonať prehliadač – ľahké a SSR orientované riešenia (SvelteKit, Astro) preukázateľne vedú k vyššiemu podielu rýchlych, plynulých stránok (Analyzing the Impact of Framework Choice on Web Performance and User Experience). Naopak, ťažké SPA bez optimalizácie často zlyhávajú v LCP či INP (ako ukázal príklad mnohých Next/Nuxt stránok) (Analyzing the Impact of Framework Choice on Web Performance and User Experience). Back-end technológie zasa ovplyvňujú, ako rýchlo sa obsah doručí – pomalý server môže úplne brzdiť inak dobrý front-end (TTFB môže “zabiť” LCP) (Performance | 2024 | The Web Almanac by HTTP Archive). Moderný vývoj našťastie smeruje k symbióze: vznikajú fullstack frameworky (Next, Nuxt, SvelteKit), ktoré prepájajú výhody rýchleho backendu a optimalizovaného frontendu. Naviac, platformy ako Cloudflare Workers, Vercel, Netlify umožňujú edge rendering a distribúciu, čo vie ďalej skrátiť TTFB geograficky.
Pri výbere tech stacku teda zvažujte kontext projektu a riaďte sa zásadou: výkon pre používateľa je prvoradý. Niekedy to môže znamenať zvoliť iný framework, než ktorý je “módny” – napr. pre obsahový web možno uprednostniť statický generátor (Eleventy) pred Reactom, ak tým ušetríte sekundu načítania. Inokedy stačí správne použiť existujúci nástroj – napr. zostať pri Reacte, ale nasadiť ho cez Next.js s potrebnými optimalizáciami (lazy loading, obrázkové komponenty atď.) (Next.js vs Vite vs Angular:Which Framework Should You Choose 2024) (Next.js vs Vite vs Angular:Which Framework Should You Choose 2024). Dôležité je taktiež profilovať a merať – konkrétne čísla z CrUX alebo aspoň Lighthouse by mali ovplyvňovať rozhodnutia. Ak zistíte, že vaša stránka na Django nestíha LCP, možno treba časť obsahu prednačítať alebo prejsť na inú stratégiu renderovania.
Web Vitals nie sú cieľom samy osebe, ale reprezentujú reálnu skúsenosť používateľa. Z obchodného hľadiska rýchlejšia stránka znamená lepšie konverzie a SEO (Google explicitne zohľadňuje CWV vo vyhľadávaní) (NitroPack Ranked First in Global Core Web Vitals Technology Report (CrUX) for Speed Optimization) (NitroPack Ranked First in Global Core Web Vitals Technology Report (CrUX) for Speed Optimization). Preto sa investícia do výkonu vyplatí. Kombináciou správnej technológie (frameworku) a správnej optimalizácie môžete dosiahnuť, že váš web sa zaradí medzi tie najrýchlejšie – „rýchlejšie než 90% webu”. Napokon, trendy ukazujú, že celý web sa postupne zrýchľuje – v septembri 2023 dosiahlo globálne 42,5% webov dobré CWV, čo bol historický rekord (A faster web in 2024 – rviscomi.dev) (A faster web in 2024 – rviscomi.dev) a do júna 2024 to stúplo na ~51% (CMS | 2024 | The Web Almanac by HTTP Archive). Stále je teda takmer polovica webov pomalá – a vy sa môžete odlíšiť tým, že zvolíte technológiu a architektúru, ktorá vám umožní patriť do tej výkonnej polovice. Výber frameworku je dôležitý základ, no rozhodujúce sú konkrétne rozhodnutia pri vývoji – preto vždy myslite na Web Vitals pri návrhu funkcií a nezabúdajte, že spokojný používateľ je rýchlo obslúžený používateľ.
Zdrojové referencie: Výkonnostné dáta a tvrdenia v texte boli čerpané z viacerých zdrojov: analýzy reálnych používateľských meraní (HTTP Archive, Chrome UX Report) publikované v článkoch ako “2023 Web Framework Performance Report” (Analyzing the Impact of Framework Choice on Web Performance and User Experience) (Analyzing the Impact of Framework Choice on Web Performance and User Experience), štúdie výkonnosti JS frameworkov Danom Shappirom na Smashing Magazine (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine) (How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks — Smashing Magazine), oficiálne Web Almanac reporty 2024 (CMS | 2024 | The Web Almanac by HTTP Archive) (CMS | 2024 | The Web Almanac by HTTP Archive), ako aj dokumentované benchmarky backend platforiem (Benchmarking the request time of Laravel, ASP.NET Core and Django | by James Judd | Medium) (Benchmarking the request time of Laravel, ASP.NET Core and Django | by James Judd | Medium). Každé tvrdenie je podložené konkrétnym zdrojom pre transparentnosť.