QR-menun CDN-optimointi: 0,8 s latausaika heikolla 4G:llä

Karaburunin niemellä sijaitseva kalaravintola otti yhteyttä keskellä sesonkia: "menu ei aukea, asiakkaat lähtevät". Vodafone 4G mittasi 1,4 Mbps, Lighthouse näytti LCP 9,2 s. Tavoite: LCP alle 1 sekunti, tarjoilijakutsupainike kosketettavissa 1,5 s sisällä.

Edge-pino: Workers ja HTTP/3

Ensimmäinen taso: tarjoa esikäännetty HTML suoraan Cloudflare Workersin KV-välimuistista sen sijaan, että kävisi Next.js SSR:ssä. Saavutimme TTFB 38 ms. HTTP/3 (QUIC) kestää pakettihäviötä 4G:llä ilman uutta kättelyä — H/2 kesti 1,6 s, H/3 päättyy 240 ms:ssä.

Brotli taso 11: HTML 22 KB → 6 KB, CSS 41 KB → 9 KB, 34 % vähemmän tavuja kuin gzip. Tarkista, että origin-vastauksessa on content-encoding: br.

Kuvaputki: AVIF + lazy

Tuotekuvat olivat 72 % painosta. Image Resizing tuottaa kolme kokoa (96, 320, 640 px) ja neuvottelee AVIF, WebP tai JPEG. 320 px AVIF painaa 14 KB, kuudesosa alkuperäisestä JPEG:stä.

• Above-the-fold: eager, fetchpriority="high"
• Below-the-fold: IntersectionObserver, rootMargin 200 px
• LQIP: blurhash 8×8 alle 60 tavua

Fonttien subsetting ja kriittinen CSS

Inter Variable painoi 312 KB. glyphhangerillä rajattuna alueeseen U+0100-017F saimme 28 KB WOFF2. font-display: optional säilyttää järjestelmäfontin, jos 100 ms budjetti ylittyy.

4 KB kriittistä CSS:ää on inline headissa, loput latautuvat async media="print" onload -tempulla. Renderöintiä estävät pyynnöt putosivat seitsemästä yhteen, lopullinen LCP 0,78 s.

FAQ

Mitä Cache-Controlia käytän? HTML: s-maxage=300, stale-while-revalidate=86400. Hashatut resurssit: immutable, max-age=31536000.

Kannattaako Service Worker? Kyllä — toinen vierailu avautuu 180 ms:ssä. App Shell + Workbox SWR.

Entä 2G? Kunnioita Save-Data: vain 96 px kuvat, emoji ikonien tilalle, järjestelmäfontti. LCP pysyy alle 2,5 s.

Oliko tästä hyötyä? Jaa se.