Optimalizace Vue.js a Nuxt.js: tipy a triky

Vue.js je rychlé. Ale jen pokud ho používáte správně.

Návštěvník čeká na načtení vašeho webu, ale během tří vteřin odchází jinam. Bohužel, to není science fiction – je to realita mnoha moderních webů postavených i na frameworcích Vue.js nebo Nuxt.js.

Na začátku si ujasněme, o čem zde bude řeč:

• Vue.js patří mezi nejoblíbenější JavaScriptové frameworky pro tvorbu webových aplikací
• Nuxt.js je meta framework, který Vue.js běžící v prohlížeči umožní provozovat i na serveru a mimo jiné tak zvýšit výkon.

Správná optimalizace není jen technická finesa pro programátory. Je to investice, která se projeví ve vyšších konverzích, lepších pozicích ve vyhledávačích a spokojenějších uživatelích.

Klienti PageSpeed.cz jako Dr. Max či Airstop, kteří využívají Vue.js, díky správné optimalizaci dosahují lepších výsledků.

Proč je rychlost pro weby životně důležitá

Možná si říkáte: „Tak co, když se web načte o sekundu déle?" Realita je ale nemilosrdná a čísla nelžou. Rychlost webu má přímý a měřitelný dopad na váš byznys. Vezměme několik příkladů:

• Google změřil, že pokud stránka splňuje Web Vitals, je o 24 % méně pravděpodobné, že uživatelé odejdou před načtením.

• Konverzní poměr e-shopu klesá v průměru o 0,3 % s každou další sekundou pomalejšího načtení.

• Rychlost je přímý ranking faktor pro SEO v Google algoritmu.

Rychlost není luxus, je to nutnost. A každá milisekunda se počítá. Tyto čísla platí dvojnásob pro weby postavené na moderních JS frameworcích jako je React nebo právě Vue.js.

Proč? Protože skoro vždy načítají a hlavně spouštějí více JavaScriptu než tradiční weby a musí projít složitějším procesem inicializace.

Ale nebojte se. Se správným přístupem můžete mít Vue.js web rychlejší než mnoho statických stránek.

Je Vue.js „od základu“ pomalé? Rozlišujme mýty od reality

Objevuje se častý názor, že Vue.js a podobné moderní frameworky jsou ze své podstaty pomalé. Ano, více JavaScriptu znamená více práce během procesu optimalizace rychlosti. Vue.js je ale navrženo pro výkonnost a weby na něm postavené mohou být velmi rychlé.

Problémy s výkonem obvykle pramení z lidských chyb, ne z frameworku samotného:

• Nesprávná architektura
  Používání Single Page Application (SPA) tam, kde by lepší bylo server-side rendering.

• Nedostatečná optimalizace
  Ignorování osvědčených postupů. Některé z nich naznačujeme v tomto textu.

• Testování pouze na rychlých zařízeních
  Vývojáři často nevidí skutečné problémy běžných uživatelů a ignorují takzvaný Performance Inequality Gap.

Vue.js může být samo o sobě je rychlé. Klíčem je použít ho správně a vědět, kdy použít kterou techniku.

Jak poznat, že váš Vue.js web kulhá

Možná si myslíte, že váš web je v pořádku, protože vám funguje rychle. Ale testujete ho správně?

Změřte si rychlost vašeho webu na PageSpeed.cz.

Core Web Vitals: Tři pilíře rychlosti

Core Web Vitals jsou tři klíčové metriky, které určují, zda je váš web rychlý z pohledu uživatelů:

Metrika	Význam	Doporučená hodnota
Largest Contentful Paint (LCP)	Rychlost načtení. Čas načtení největšího viditelného prvku na stránce.	≤ 2,5 sekundy
Interaction to Next Paint (INP)	Interakční rychlost. Rychlost odezvy na uživatelské akce (kliknutí, tapnutí).	≤ 200 milisekund
Cumulative Layout Shift (CLS)	Stabilita layoutu. Stabilita vizuálního rozvržení stránky.	≤ 0,1

Sedm kroků k rychlejšímu webu na Vue.js

Teď přichází ta nejdůležitější část. Poďme se podívat na základní tipy, jak váš Vue.js web zrychlit.

1. Správná architektura: SSR a SSG místo čistého SPA

Zkratky zní složitě, ale podstata je jednoduchá. Místo toho, aby váš web čekal na stažení a spuštění JavaScriptu, pošlete uživateli rovnou hotový HTML kód.

Když to trošku přeženeme, je to jako rozdíl mezi tím, že dostanete hotový oběd, nebo musíte čekat, až vám na stole před vámi někdo uvaří.

Pojďme na ty zkratky:

• SPA (Single Page Application) je web, který si načte většinu věcí hned na začátku a pak se tváří, že všechno zvládá na klientském zařízení bez reloadu, ale za cenu velmi pomalého startu a dalších nevýhod. Vaří vám oběd na stole. Dnes už je to zastaralý přístup.

• Server Side Rendering (SSR) znamená, že server vygeneruje hotový HTML kód pro každou stránku. Uživatel tak vidí obsah okamžitě, zatímco se v pozadí načítá interaktivní JavaScript. To chceme.

• Static Site Generation (SSG) jde ještě dál. HTML soubory se vygenerují předem (při interním vývojářském procesu zvaném build) a servírují se jako statické soubory. To je nejrychlejší možná varianta. Není ale vhodná pro e-shopy a jiné dynamičtější weby.

• Hybridní přístup kombinuje oba způsoby podle typu stránky – statické stránky typu blogposty jako SSG, dynamické jako SSR. Zvažte, zda tohle nemůžete použít pro váš web.

Ukažme si schématickou konfiguraci SSR pro serverovou část Vue.js, který se jmenuje Nuxt.js:

// nuxt.config.ts nebo nuxt.config.js pro SSR

export default defineNuxtConfig({
  // Zapnutí server-side renderingu
  ssr: true,

  nitro: {
    prerender: {
      // Předgenerování statických stránek
      routes: ['/o-nas', '/kontakt', '/blog']
    }
  }
})

Pokud je váš web citlivý na rychlost načítání, vyhněte se čistě klientskému SPA. Zvažte kombinace SSR a SSG.

2. Postupné renderování: Lazy loading jako záchrana

Představte si, že stavíte dům. Nenosíte přitom všechny cihly najednou, ale postupně podle potřeby. Stejně tak by se měl chovat i váš Vue.js web.

Jak to zařídit?

• Lazy loading komponent znamená, že se komponenty načtou až když jsou skutečně potřeba. Typicky to jsou komponenty, které uživatel nevidí na první obrazovce nebo které používá jen někdy.

• Progressive hydration je proces, kdy se JavaScript postupně „připojuje" k HTML vygenerovanému serverem. Uživatel tak vidí obsah okamžitě, ale interaktivita se přidává postupně tam, kde je potřeba.

• Code splitting automaticky rozdělí váš kód do menších částí podle stránek nebo funkcí. Místo stažení jednoho velkého souboru se postupně stahují jen potřebné části.

Příklad líného načtení komponent:

// Používejte lazy loading
const HeavyChart = defineAsyncComponent(() =>
  import('./HeavyChart.vue')
)

// S načítacím stavem (např. spinner)
const HeavyTable = defineAsyncComponent({
  loader: () => import('./HeavyTable.vue'),
  loadingComponent: LoadingSpinner,
  delay: 200
})

Načítejte jen to, co je vidět. Zbytek počká.

O lazy loadingu v obecné rovině máme celý samostatný článek.

3. Bundle size: Méně JavaScriptu, více rychlosti

Každý kilobajt JavaScriptu musí být stažen, parsován a spuštěn. Na pomalých zařízeních nebo slabších připojeních to může trvat věčnost. Proto je důležité udržovat velikost vašeho JavaScript balíčku (bundle) co nejmenší. Jak na to?

• Tree shaking je proces, který automaticky odstraní nepoužívaný kód z vašeho bundlu. Moderní bundlery jako Webpack nebo Vite to dělají automaticky, ale musíte jim pomoct správným způsobem importování.

• Audit závislostí znamená pravidelnou kontrolu, které knihovny skutečně potřebujete. Často se stane, že v projektu zůstávají knihovny, které už nepoužíváte, ale stále zvětšují bundle.

• Komprese souborů může zmenšit velikost bundlu až o 70%. Moderní komprese Brotli je ještě efektivnější než tradiční Gzip.

// Špatně – importuje celou knihovnu (několik MB)
import _ from 'lodash'

// Dobře – importuje jen potřebnou funkci (několik kB)
import { debounce } from 'lodash-es'

// 💡 Ještě lépe – vlastní jednoduchá implementace
const debounce = (fn, delay) => {
  let timeoutId
  return (...args) => {
    clearTimeout(timeoutId)
    timeoutId = setTimeout(() => fn.apply(this, args), delay)
  }
}

Jednoduchý tip: nástroj bundlephobia.com vám ukáže velikost každé závislosti a doporučí alternativy.

Každý kilobajt se počítá. Držte bundle na dietě.

4. Optimalizace pro lepší INP: Rychlé reakce na klikání

Interaction to Next Paint (INP) měří, jak rychle web reaguje na uživatelské akce. Pokud uživatel klikne na tlačítko a nic se nestane, nebo se to děje pomalu, je náš milý uživatel frustrovaný.

Nejčastějším problémem jsou náročné operace prováděné v hlavním vlákně prohlížeče, kterým říkáme dlouhé úlohy (a měříme metrikou TBT). Když toho váš JavaScript zpracovává hodně, prohlížeč mezitím nemůže reagovat na klikání.

Hydratace, tedy oživení aplikace, může dát prohlížeči zabrat a uživatelům znemožnit interakce. Tento problém jsme řešili například u projektu Airstop.cz.

Co s tím dělat?

• Využijte lazy hydrataci. Hlavně u komponent, kde je jasné, že je uživatel neaktivuje hned. To typicky mohou být menu, modaly, filtrace, patička apod.

• Debouncing a throttling jsou techniky, které omezí počet volaných funkcí při rychlém opakování akce. Typicky při psaní do vyhledávacího pole nebo při scrollování.

• Zmenšete DOM. Dynamická struktura HTML (DOM) je základ. Držte ji co nejmenší, ideálně do 3 000 DOM uzlů.

Debouncing pro vyhledávání:

// Debouncing pro vyhledávání – reaguje až po 300 ms od posledního úhozu
import { debounce } from 'lodash-es'

const searchProducts = debounce((query) => {
  // Vyhledávání se spustí až po pauze
}, 300)


// 🖱️ Throttling pro scroll – spouští se maximálně jednou za 100 ms
import { throttle } from 'lodash-es'

const handleScroll = throttle(() => {
  // Optimalizace scroll listeneru
}, 100)

Těžké operace jako filtrování velkých dat nebo složité výpočty by se měly přesunout na server prostřednictvím API volání.

Udržujte hlavní vlákno prohlížeče volné. Uživatel musí cítit okamžitou odezvu.

5. Virtualizace seznamů: Tisíce položek bez zpomalení

Pokud máte seznam s tisíci produktů, článků nebo komentářů, nemůžete je všechny renderovat najednou. To by zpomalilo web na neúnosnou míru.

Virtualizace znamená, že renderujete pouze viditelné prvky plus malý buffer okolo. Při scrollování se prvky dynamicky vyměňují. Je to jako čtení knihy – nečtete všechny stránky najednou, jen tu aktuální.

Existují hotové knihovny pro Vue.js, které virtualizaci implementují za vás. Nejpopulárnější jsou vue-virtual-scroller nebo vue-virtual-scroll-grid.

Virtualizace může zlepšit výkon seznamu o stovky procent, zejména na mobilních zařízeních s omezeným výkonem.

Renderujte jen to, co uživatel vidí. Tisíce položek počkají.

6. Správná práce s obrázky: Moderní formáty a lazy loading

Obrázky u některých webů tvoří většinu objemu dat, které se musí načíst. Správná optimalizace obrázků může být nejefektivnější způsob, jak web zrychlit.

• Moderní formáty jako WebP a AVIF nabízejí o 25-50% lepší kompresi než tradiční JPEG při zachování kvality. Moderní prohlížeče už WebP podporuje.

• Responsive images znamená dodávání správných rozměrů pro různá zařízení. Proč načítat 2000px široký obrázek na mobilní telefon se 400px širokým displejem?

• Lazy loading obrázků znamená, že se obrázky načtou až když se dostanou do zorného pole uživatele. To výrazně zrychlí počáteční načtení stránky.

• Placeholder obrázky zabraňují layout shiftům (poskakování obsahu) během načítání. Můžete použít rozmazané miniaturky, barevné pozadí nebo skeleton loadery. Buďte s nimi však opatrní, protože v případě špatného použití mohou rychlost naopak zhoršit.

Příklad v kódu – responzivní obrázky s lazy loadingem:

<!-- AVIF obrázek s fallbackem do WebP + lazy loading -->
<picture>
  <source
    src="product-image.avif"
    type="image/avif"
  />
  <img
    src="product-image.webp"
    loading="lazy"
    alt="Popis produktu"
    width="800"
    height="600"
  />
</picture>

Obrázky optimalizujte pečlivě, obzvlášť pokud jsou vaším LCP elementem.

7. Profilování: Měření je základ zlepšení

Bez měření optimalizujete naslepo. Možná optimalizujete něco, co problém vůbec není, zatímco skutečné úzké hrdlo přehlížíte.

Jaké nástroje využívat kromě naprostého základu, kterým je syntetický a CrUX monitoring?

• Chrome DevTools Performance panel vám ukáže, kde váš kód tráví nejvíc času. Můžete vidět, které komponenty se renderují nejpomaleji nebo které funkce zatěžují CPU. Více o měření Core Web Vitals v prohlížeči.

• Vue DevTools poskytují specifické Vue.js metriky – které komponenty se re-renderují, jak dlouho trvá jejich mount nebo update.

• Real User Monitoring (RUM) sleduje skutečné uživatele na skutečných zařízeních s reálným internetem. Laboratorní testy jsou důležité, ale RUM ukáže skutečnost. Je to nejpřesnější ze všech tří typů měření rychlosti.

Co neměříte, to nemůžete zlepšit.

Další triky pro pokročilé: CDN, prefetching a moderní technologie

Pokud jste zvládli základy, můžete jít dál. Dejme si zde pár tipů na optimalizace nad rámec výše uvedeného:

• Volte dobrou infrastrukturu a Content Delivery Network (CDN). CDN znamená, že vaše soubory se načítají z serveru nejblíže uživateli. Je to jako mít pobočky obchodu ve všech městech místo jedné centrály. Využijte Cloudflare nebo AWS CloudFront.

• Optimalizace BFCache, tedy rychlých návratů na předchozí stránku, vám může přinést s málem práce slušné ovoce.

• Speculation Rules API vám přinesou Inteligentní předpověď navigace, ale implementace je vyšší dívčí, na to pozor.

Úspěchy PageSpeed.cz: reálné výsledky optimalizace

Teorie je hezká, ale co praxe? Pracovali jsme s několika Vue.js projekty, kde se optimalizace výkonnosti výrazně projevila.

Jedním z nich je web prodejce dovolených Airstop.cz, kde jsme týmu vývojářů z DesignDev pomáhali zlepšit uživatelský prožitek při probíhajícím redesignu.

Projekt je stále v procesu, ale už nyní vidíme zlepšení metrik Core Web Vitals o desítky procent:

Na Airstop.cz je vidět, že projekty na Vue.js mohou dělat velké pokroky v rychlosti. A to ještě nejsme u konce práce.

U dalšího našeho klienta, lékáren Dr. Max právě již máme metriky LCP a CLS zelené a právě probíhá aktivita na zlepšení interaktivity (INP). Příkladem jsou tyto optimalizace:

1. Optimalizace uživatelských interakcí s loadery za použití metody s nextTick napříč celým webem.
2. Zrychlení interakcí uživatele v komplexním vyhledávání napříč produkty.
3. Optimalizace událostí spouštěných z GTM (Google Tag Manager).

Každý projekt je specifický, ale principy zůstávají stejné – bez optimalizace následující po vývoji nelze rychlost udržet na dobré úrovni. Nejdůležitější je začít s měřením a postupně implementovat změny.

Jak vám pomůže monitoring od PageSpeed.cz

V našem monitoringu rychlosti PageSpeed.cz můžete sledovat metriky Core Web Vitals v reálném čase a identifikovat konkrétní problémy. Často vidíme u Vue.js webů problémy s velkými JavaScript bundly nebo pomalou hydratací (procesem, kdy se k HTML připojí interaktivní JavaScript).

Sledujeme vývoj metrik Core Web Vitals dlouhodobě u našeho klienta Dr. Max a jeho konkurentů.

Měření je základ. Bez dat optimalizujete naslepo.

Náš PageSpeed.cz monitoring PLUS poskytuje tyto výhody:

• Kontinuální sledování Core Web Vitals z CrUX dat i synteticky.
• Porovnání s konkurencí ve vašem oboru a další doménová data.
• Detailní analýzy z každého testu.
• Hlídač a alerting při zhoršení výkonnosti s možností rychlé reakce.

Velmi doporučujeme automatizovat monitoring, abyste se mohli soustředit na optimalizace.

Závěr: Rychlost jako konkurenční výhod

Optimalizace Vue.js aplikací by neměla být jednorázová akce, ale kontinuální proces. Vue.js samo o sobě není pomalé, problémy vznikají nesprávným použitím nebo nedostatečnou optimalizací.

Začněte měřením pomocí Core Web Vitals, zvažte implementaci SSR a postupně optimalizujte podle našeho seznamu. Pamatujte, že každá milisekunda se počítá a rychlost může být vaší konkurenční výhodou.

Nevíte, co dál? Klidně se nám ozvěte.

Výsledkem optimalizace Vue.js bude rychlejší web, spokojenější uživatelé, lepší pozice ve vyhledávačích a v neposlední řadě vyšší tržby.