53% používateľov opustí stránku, ktorá sa načítava dlhšie ako 3 sekundy. Rýchlosť priamo ovplyvňuje konverzie a SEO.

Meranie výkonu

Nástroje

  • Lighthouse - vstavaný v Chrome DevTools
  • WebPageTest - detailná analýza
  • Core Web Vitals - Google metriky

Kľúčové metriky

  • LCP (Largest Contentful Paint) < 2.5s
  • FID (First Input Delay) < 100ms
  • CLS (Cumulative Layout Shift) < 0.1

Optimalizácia obrázkov

Obrázky tvoria 50%+ veľkosti stránky.

Moderné formáty

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="popis" loading="lazy">
</picture>

Responzívne obrázky

<img
  srcset="image-400.jpg 400w,
          image-800.jpg 800w,
          image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1200px) 800px,
         1200px"
  src="image-800.jpg"
  alt="popis"
/>

Lazy loading

<img src="image.jpg" loading="lazy" alt="popis">

JavaScript optimalizácia

Code splitting

// Dynamický import
const module = await import('./heavy-module.js')

// Route-based splitting (Nuxt/Next)
// Automatické pre pages/

Tree shaking

Importujte len čo potrebujete:

// Zlé - importuje celú knižnicu
import _ from 'lodash'

// Dobré - importuje len jednu funkciu
import debounce from 'lodash/debounce'

Defer a async

<!-- Blokuje parsing -->
<script src="app.js"></script>

<!-- Načíta paralelne, spustí po stiahunutí -->
<script async src="analytics.js"></script>

<!-- Načíta paralelne, spustí po parsingu -->
<script defer src="app.js"></script>

CSS optimalizácia

Critical CSS

Inline kritické CSS pre above-the-fold obsah:

<style>
  /* Critical CSS tu */
</style>
<link rel="preload" href="full.css" as="style" onload="this.rel='stylesheet'">

Purge nepoužité CSS

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,vue}'],
  // Automaticky odstráni nepoužité triedy
}

Caching

HTTP hlavičky

Cache-Control: public, max-age=31536000, immutable

Service Worker

Pre offline-first a rýchle opakované návštevy.

CDN

Content Delivery Network - servery blízko používateľov.

  • Cloudflare - free tier
  • Vercel Edge - pre Next/Nuxt
  • AWS CloudFront

Preloading

<!-- Kritické fonty -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- LCP obrázok -->
<link rel="preload" href="hero.jpg" as="image">

<!-- Nasledujúca stránka -->
<link rel="prefetch" href="/about">

Checklist

  1. Obrázky v moderných formátoch (WebP/AVIF)
  2. Lazy loading pre obrázky pod foldom
  3. Code splitting pre veľké JS bundles
  4. Minifikácia a kompresia (gzip/brotli)
  5. CDN pre statické assety
  6. Caching headers nastavené
  7. Fonty preloadované

Záver

Optimalizácia je iteratívny proces. Merajte pred a po každej zmene. Sústreďte sa na najväčšie problémy prvé.