Oťukávačka

1. Víš co jsou Core Web Vitals?
2. Víš co je hydratace (v kontextu webových frameworků)?

Výkonnost webu

Moderní meta-frameworky

Měření výkonnosti

• Lighthouse – Synthetic monitoring (v prohlížeči, CI nebo cli)
• WebPageTest – reálná zařízení po světě
• Page Speed Insights – Google data z Chromu
• Vlastní měření (např. Newrelic, Sentry, …) – Real User Monitoring

Lighthouse

Core Web Vitals

Core Web Vitals (12. 3. 2024 !)

Largest Contentful Paint (LCP)

Zdroj: web.dev/lcp

Cumulative Layout Shift (CLS)

Zdroj: web.dev/cls

Interaction to Next Paint (INP)

& First Input Delay (FID)

Příklad: V baru – čekání na objednaný drink

• FID: čas do začátku přípravy prvního drinku
  • ale limonáda se připravuje rychleji než koktejl
• INP: čas na přípravu samotnou všech drinků po dobu návštěvy baru

Zdroj: Harry Roberts

Demo Lighthouse

Zběžná analýza dvou e-shopů

• czc.cz (LCP s Cookie modálem a bez něj)
• rohlik.cz (Nevyužitý JavaScript)

Postup

1. Google Chrome
2. Incognito mode (bez doplňků)
3. DevTools, záložka Lighthouse
4. Mode: Navigation, Device: Mobile, click Analyze

Page Speed Insights (RUM data, 75. percentil)

Newrelic - příklad 1

Newrelic - příklad 2

Měření výkonnosti – shrnutí

• Syntetické měření během vývoje, kontrola chyb (podobně jako linting)
• RUM během provozu
• Vybrat jen některé metriky (Google udělal za nás: Core Web Vitals)

Demo CrUX data

• Chrome User Experience Report
• Core web vitals report

Zdroj: cwvtech.report

Specifika JavaScriptových frameworků

• velká míra kontroly nad chováním v prohlížeči = příliš mnoho možností
• každých pár měsíců nebo let změna
• příliš snadné přidat mnoho nepotřebných závislostí

Kontrola nad způsobem renderování HTML

Zdroj: Nuxt documentation

Zrychlujeme (nezpomalujeme)

Takový metaframework už za nás dělá řadu věcí…

• Route/component based code splitting
• Code minification
• File name hashing for long-term caching
• CSS inlining
• Less transpilation for modern browsers
• Tree shaking
• Prefetching
• Image/Picture component

Zrychlujeme - redukce množství JavaScriptu 1

• využít code splitting a lazy loading (Nuxt docs)

<LazyReviewsComponent />

const lazyDependency = await import("./lazy-loaded-code.js")

• lazy hydration (nuxt-lazy-hydrate module)

<LazyHydrationWrapper :when-visible="{ rootMargin: '50px' }">
  <!-- content -->
</LazyHydrationWrapper>

Zrychlujeme - redukce množství JavaScriptu 2

• Islands of (non)interactivity (Nuxt docs)

- ReviewsComponent.vue
- NonInterativeComponent.server.vue
- BrowserOnlyComponent.client.vue

• omezit použití externích knihoven
• izolovat skripty třetích stran
• omezit množství globálních skriptů (např. Nuxt plugins)

Zrychlujeme - redukce množství JavaScriptu 3

• přesun kódu na server (Nuxt server API routes, middlewares)
• redukce množství dat (overfetching)

export default defineCachedEventHandler(
  async (event) => {
    const urls = [
      /* some urls */
    ]
    return Promise.all(
      urls.map(
        /* several expensive requests */
        (url) => fetch(url).then((r) => r.json()),
        /* error handling etc. */
      ),
    )
  },
  { maxAge: 300 },
)

Zrychlujeme - typ renderování

• CSR, SSR, SSG, ISR, SWR, PPR

Zdroj: Vercel engineering blog

Zrychlujeme - obrázky a fonty

• optimalizace obrázků (nuxt/image) a fontů (nuxt/fonts)

Příklad NuxtImg s CMS Storyblok

<NuxtImg
  width="200"
  format="webp"
  provider="storyblok"
  src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
/>

Shrnutí

• trpělivost, je to spousta malých kroků, ne jedna výhra
• řeš hned od začátku
• měř
• omez JavaScript v prohlížeči
• zvol framework uvážlivě
• drž složitost na uzdě