QR menü CDN-optimalizálás: 0,8 mp betöltés gyenge 4G-n

A Karaburun-félszigeten lévő halétterem szezon közepén jelzett: "a menü nem nyílik meg, a vendégek felállnak". A Vodafone 4G 1,4 Mbps-t mért, a Lighthouse LCP 9,2 másodpercet mutatott. Cél: LCP 1 másodperc alatt, a pincérhívó gomb 1,5 mp-en belül érinthető.

Edge-stack: Workers és HTTP/3

Első réteg: az előre renderelt HTML-t a Cloudflare Workers KV-gyorsítótárából szolgáljuk ki, nem megyünk a Next.js SSR-hez. 38 ms TTFB-t kaptunk. A HTTP/3 (QUIC) átvészeli a 4G csomagvesztését új kézfogás nélkül — a H/2-nek 1,6 mp kellett, a H/3 240 ms alatt zár.

Brotli 11. szint: HTML 22 KB → 6 KB, CSS 41 KB → 9 KB, 34 %-kal kevesebb bájt, mint a gzip. Ellenőrizze, hogy az origin válasz tartalmazza a content-encoding: br fejlécet.

Képcsővezeték: AVIF + lazy

A termékfotók a teljes súly 72 %-át tették ki. Az Image Resizing három méretet készít (96, 320, 640 px) és AVIF, WebP vagy JPEG közül választ. A 320 px-es AVIF 14 KB, az eredeti JPEG hatoda.

• Above-the-fold: eager, fetchpriority="high"
• Below-the-fold: IntersectionObserver, rootMargin 200 px
• LQIP: 8×8 blurhash, 60 bájt alatt

Betűkészlet-subsetting és kritikus CSS

Az Inter Variable 312 KB volt. A glyphhanger a U+0100-017F török tartományra szűkítve 28 KB WOFF2-t eredményezett. A font-display: optional megtartja a rendszerbetűt, ha a 100 ms-os keret kifut.

A 4 KB kritikus CSS inline a headben, a többi async tölt a media="print" onload trükkel. A renderelést blokkoló kérések száma hétről egyre csökkent, a végső LCP 0,78 mp.

GYIK

Milyen Cache-Control? HTML: s-maxage=300, stale-while-revalidate=86400. Hash-elt eszközök: immutable, max-age=31536000.

Megéri a Service Worker? Igen — a második látogatás 180 ms-en nyílik. App Shell + Workbox SWR.

És 2G-n? Tartsa be a Save-Data-t: csak 96 px képek, emojik az ikonok helyett, rendszerbetű. Az LCP így is 2,5 mp alatt marad.

Hasznosnak találtad? Oszd meg.