1

Výkonnost webu
s moderními frameworky


Lukáš Trumm

Frontend architekt v Quanti

sdf

2

No notes for this slide

3

Consent

We use third party cookies to personalize content, ads and analyze site traffic.


Okey!

No notes for this slide

4

Subscribe!

Subscribe right now! Next episode will be released soon!


No thanksSure

No notes for this slide

5

An unexpected error occured, sorry.

No notes for this slide

6

Proč?

No notes for this slide

7

Proč?

  • Je to složitý!
  • Proč je web pomalý?
    • hodně JavaScriptu
    • komplexita vývoje
  • Proč to řešit?
    • abychom nemuseli čekat
    • aby se lidi vůbec dostali k tomu,
      co potřebují
  • Proč stále vznikají nové frameworky?
    • vývojáři to chtějí mít dokonalé a nikdo
      to nechce staré
    • jeden jazyk pro vývoj na serveru i v prohlížečích

https://medium.com

roadmap.sh/frontend

10
0
1
2
3
4
5
6
7
8
9
10

No notes for this slide

8

Výkonnost webu

  • Čas do prvního načtení stránky
  • Svižnost přechodu mezi stránkami
  • Rychlost reakce na kliknutí
  • Plynulost skrolování
  • Poskakování stránky během načítání


  • Konverze
  • Umístění ve vyhledávačích
  • Nároky na hardware
  • …
1
0
1

No notes for this slide

9

Moderní meta-frameworky

React→   Next
Vue→   Nuxt
Angular→   Analog
Svelte→   SvelteKit
Solid→   SolidStart
Qwik→   QwikCity
  Laravel   Phoenix   Blazor …
2
0
1
2

No notes for this slide

10

Měření výkonnosti



Lighthouse

Lighthouse

No notes for this slide

11

Page Speed Insights (RUM data, 75. percentil)

Page Speed Insights

No notes for this slide

12

Core Web Vitals

Zdroj: web.dev/articles/vitals

No notes for this slide

13

Core Web Vitals (12. 3. 2024 !)

Zdroj: web.dev/articles/vitals

No notes for this slide

14

Largest Contentful Paint (LCP)


Zdroj: web.dev/lcp

No notes for this slide

15

Cumulative Layout Shift (CLS)

Zdroj: web.dev/cls

No notes for this slide

16

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

No notes for this slide

17

Demo Lighthouse

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



Postup

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

No notes for this slide

18

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í
3
0
1
2
3

No notes for this slide

19

Kontrola nad způsobem renderování HTML

Zdroj: Nuxt documentation

1
0
1

No notes for this slide

20

Zrychlení načítání JS aplikací a webů

  • redukce množství JavaScriptu
    • využít code splitting a lazy loading
    • omezit použití externích knihoven
    • izolovat skripty třetích stran
    • zkoumat Islands of (non)interactivity a další techniky
  • redukce množství dat
  • typ renderování HTML
  • použití CDNky
  • optimalizace obrázků a fontů
  • vhodný efekt při načítání dat
  • …
<LazyReviewsComponent />
- ReviewsComponent.vue
- NonInterativeComponent.server.vue
- BrowserOnlyComponent.client.vue
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 },
)

CSR, SSR, SSG, ISR, SWR, PPR



Zdroj: Vercel engineering blog

<NuxtImg src="/photo.jpg" />

11
0
1
2
3
4
5
6
7
8
9
10
11
  • redukce použití JavaScriptu - lze použít BE framework, nebo zkusit nový Qwik
  • noviny: above the fold, code splitting
21

Demo on CrUX data

Zdroj: cwvtech.report

No notes for this slide

22

Shrnutí

  • měř
  • omez JavaScript v prohlížeči
  • zvol framework uvážlivě
  • drž složitost na uzdě

No notes for this slide

23

Otázky?

→ https://lukastrumm.com/talks/

No notes for this slide

24

No notes for this slide

24 slides · 51 clicks · 0 words