Optymalizacja CDN menu QR: ładowanie 0,8 s na słabym 4G

Restauracja rybna na półwyspie Karaburun zgłosiła w szczycie sezonu: "menu się nie otwiera, klienci wychodzą". Vodafone 4G mierzył 1,4 Mb/s, Lighthouse pokazywał LCP 9,2 s. Cel: LCP poniżej 1 sekundy, przycisk wezwania kelnera dotykalny w 1,5 s.

Stack edge: Workers i HTTP/3

Pierwsza warstwa to serwowanie wyrenderowanego HTML z cache KV Cloudflare Workers zamiast trafiać do Next.js SSR. Uzyskaliśmy TTFB 38 ms. HTTP/3 (QUIC) przeżywa straty pakietów na 4G bez ponownego handshake — H/2 trwał 1,6 s, H/3 kończy w 240 ms.

Brotli poziom 11: HTML 22 KB → 6 KB, CSS 41 KB → 9 KB, 34% mniej bajtów niż gzip. Sprawdź, czy origin zwraca content-encoding: br.

Pipeline obrazów: AVIF + lazy

Zdjęcia stanowiły 72% wagi. Image Resizing generuje trzy rozmiary (96, 320, 640 px) i negocjuje AVIF, WebP lub JPEG. AVIF 320 px waży 14 KB, szósta część oryginalnego JPEG.

• Above-the-fold: eager z fetchpriority="high"
• Below-the-fold: IntersectionObserver, rootMargin 200 px
• LQIP: blurhash 8×8 poniżej 60 bajtów

Subsetting fontów i krytyczny CSS

Inter Variable ważył 312 KB. glyphhanger ograniczył zakres do U+0100-017F dając 28 KB WOFF2. font-display: optional zatrzymuje font systemowy, jeśli budżet 100 ms zostanie przekroczony.

4 KB krytycznego CSS jest inline w head, reszta ładuje się async przez media="print" onload. Liczba żądań blokujących spadła z siedmiu do jednego, finalny LCP 0,78 s.

FAQ

Jakie Cache-Control? HTML: s-maxage=300, stale-while-revalidate=86400. Zasoby z hashem: immutable, max-age=31536000.

Czy warto Service Worker? Tak — druga wizyta otwiera się w 180 ms. App Shell + Workbox SWR.

A na 2G? Respektuj Save-Data: tylko obrazy 96 px, emoji zamiast ikon, font systemowy. LCP zostaje poniżej 2,5 s.

Czy to było pomocne? Udostępnij.