Оптимизация CDN QR-меню: загрузка 0,8 с на слабом 4G

Рыбный ресторан на полуострове Караборун в разгар сезона написал: "меню не открывается, гости уходят". Vodafone 4G показывал 1,4 Мбит/с, Lighthouse — LCP 9,2 секунды. Цель: LCP меньше 1 секунды, кнопка вызова официанта доступна за 1,5 с.

Edge-стек: Workers и HTTP/3

Первый слой — раздавать готовый HTML из KV-кеша Cloudflare Workers вместо обращения к Next.js SSR. Получили TTFB 38 мс. HTTP/3 (QUIC) переживает потери пакетов 4G без нового handshake: у H/2 1,6 с, у H/3 — 240 мс.

Brotli уровня 11: HTML 22 КБ → 6 КБ, CSS 41 КБ → 9 КБ. На 34 % меньше байт, чем gzip. Проверьте, что origin отдает content-encoding: br.

Картинки: AVIF + lazy

Фото блюд весили 72 % трафика. Image Resizing генерирует три размера (96, 320, 640 px) и согласует AVIF, WebP или JPEG. AVIF 320 px весит 14 КБ — одна шестая исходного JPEG.

• Above-the-fold: eager, fetchpriority="high"
• Below-the-fold: IntersectionObserver, rootMargin 200 px
• LQIP: blurhash 8×8 под 60 байт

Subsetting шрифта и critical CSS

Inter Variable весил 312 КБ. glyphhanger вырезает турецкий диапазон U+0100-017F, оставляя 28 КБ WOFF2. font-display: optional сохраняет системный шрифт, если бюджет 100 мс не уложился.

4 КБ critical CSS встроены в head, остальное грузится через media="print" onload. Блокирующих запросов стало один вместо семи, итоговый LCP — 0,78 с.

FAQ

Какие Cache-Control? HTML: s-maxage=300, stale-while-revalidate=86400. Хешированные ассеты: immutable, max-age=31536000.

Нужен ли Service Worker? Да, второе открытие — 180 мс. App Shell + Workbox SWR.

А на 2G? Уважайте Save-Data: только 96 px картинки, эмодзи вместо иконок, системные шрифты. LCP остаётся ниже 2,5 с.

Было полезно? Поделитесь.