Optimalizace CDN QR menu: načítání 0,8 s na slabém 4G

Rybí restaurace na poloostrově Karaburun se ozvala uprostřed sezóny: "menu se neotvírá, hosté odcházejí". Vodafone 4G měřil 1,4 Mb/s, Lighthouse hlásil LCP 9,2 s. Cíl: LCP pod 1 sekundu, tlačítko zavolání číšníka v 1,5 s.

Edge stack: Workers a HTTP/3

První vrstva: doručovat hotové HTML z KV cache Cloudflare Workers místo chození k Next.js SSR. Dosáhli jsme TTFB 38 ms. HTTP/3 (QUIC) přežívá ztrátu paketů na 4G bez nového handshaku, H/2 potřebovalo 1,6 s, H/3 ukončí v 240 ms.

Brotli úroveň 11: HTML 22 KB → 6 KB, CSS 41 KB → 9 KB, o 34 % méně bajtů než gzip. Ověřte, že origin posílá content-encoding: br.

Obrazový pipeline: AVIF + lazy

Fotky tvořily 72 % váhy. Image Resizing tvoří tři velikosti (96, 320, 640 px) a vyjednává AVIF, WebP nebo JPEG. AVIF 320 px váží 14 KB, šestina původního JPEG.

• Above-the-fold: eager s fetchpriority="high"
• Below-the-fold: IntersectionObserver, rootMargin 200 px
• LQIP: blurhash 8×8 do 60 bajtů

Subsetting fontů a critical CSS

Inter Variable vážil 312 KB. S glyphhanger jsme zúžili na U+0100-017F a získali 28 KB WOFF2. font-display: optional ponechá systémový font, pokud se nevejde do 100 ms.

4 KB kritického CSS je v head inline, zbytek se načítá async přes media="print" onload. Blokující požadavky klesly ze sedmi na jeden, finální LCP 0,78 s.

FAQ

Jaké Cache-Control? HTML: s-maxage=300, stale-while-revalidate=86400. Hashované assety: immutable, max-age=31536000.

Stojí Service Worker za to? Ano — druhá návštěva v 180 ms. App Shell + Workbox SWR.

A v 2G? Respektovat Save-Data: jen obrázky 96 px, emoji místo ikon, systémový font. LCP zůstane pod 2,5 s.

Bylo to užitečné? Sdílejte to.