QR-Menü CDN-Optimierung: 0,8 s Ladezeit bei schwachem 4G

Ein Fischrestaurant auf der Halbinsel Karaburun meldete Hochsaison-Probleme: "Das Menü öffnet nicht, Gäste verlassen den Tisch." Vodafone 4G lieferte 1,4 Mbps, Lighthouse zeigte einen LCP von 9,2 Sekunden. Ziel: LCP unter 1 Sekunde.

Edge-Stack mit Workers und HTTP/3

Statt zu Next.js SSR zu greifen, liefern Cloudflare Workers fertiges HTML aus dem KV-Cache: 38 ms TTFB. HTTP/3 übersteht 4G-Paketverluste ohne neuen Handshake; H/2 benötigte 1,6 s, H/3 nur 240 ms.

Brotli Level 11 reduziert HTML von 22 KB auf 6 KB, CSS von 41 KB auf 9 KB — 34 % weniger Bytes als gzip. Cloudflare Pages aktiviert Brotli automatisch; Origin-Antworten müssen content-encoding: br tragen.

Bilder-Pipeline mit AVIF

72 % des Gewichts entfielen auf Produktfotos. Cloudflare Image Resizing erstellt drei Größen (96, 320, 640 px) und liefert AVIF, WebP oder JPEG. Eine 320-px-AVIF wiegt 14 KB — ein Sechstel des Original-JPEGs.

• Above-the-fold: eager mit fetchpriority="high"
• Below-the-fold: IntersectionObserver, 200 px rootMargin
• LQIP: 8×8 Blurhash unter 60 Byte

Font-Subsetting und kritisches CSS

Die Inter-Variable-Font wog 312 KB. Mit glyphhanger auf den türkischen Bereich U+0100-017F begrenzt, ergaben sich 28 KB. font-display: optional erlaubt System-Fallback, falls die Font das 100-ms-Budget verfehlt.

Die rund 4 KB above-the-fold CSS liegen inline im Head, der Rest lädt async über den media="print"-Trick. Render-blockierende Requests fielen von sieben auf eins, finaler LCP: 0,78 s.

FAQ

Welche Cache-Control-Header? HTML: s-maxage=300, stale-while-revalidate=86400. Gehashte Assets: public, max-age=31536000, immutable.

Lohnt sich ein Service Worker? Ja — zweiter Besuch öffnet in 180 ms. App-Shell-Pattern mit Workbox SWR.

Was tun bei 2G? Save-Data respektieren: nur 96-px-Bilder, Emoji-Fallback, System-Schriften. LCP bleibt unter 2,5 s.

Hilfreich? Teilen Sie es.