تحسين CDN لقائمة QR: تحميل في 0.8 ثانية على 4G ضعيف

مطعم أسماك في شبه جزيرة كارابورون تواصل معنا في ذروة الموسم: "القائمة لا تفتح، الزبائن يغادرون". قاس Vodafone 4G سرعة 1.4 ميغابت، وأظهر Lighthouse LCP 9.2 ثانية. الهدف: LCP أقل من ثانية واحدة، وزر طلب النادل قابل للنقر خلال 1.5 ثانية.

طبقة الحافة: Workers و HTTP/3

الطبقة الأولى تقديم HTML مُسبق التصيير من ذاكرة KV لـ Cloudflare Workers بدلاً من Next.js SSR، فحصلنا على TTFB 38 ميلي ثانية. يتحمل HTTP/3 (QUIC) فقد الحزم على 4G دون إعادة المصافحة: H/2 يستغرق 1.6 ثانية، أما H/3 فيُنهي في 240 ميلي ثانية.

Brotli مستوى 11: HTML من 22 ك.ب إلى 6 ك.ب، وCSS من 41 ك.ب إلى 9 ك.ب — أقل بـ 34٪ من gzip. تأكد أن استجابة الأصل تحمل content-encoding: br.

خط الصور: AVIF + lazy

الصور شكلت 72٪ من الحجم. ينتج Image Resizing ثلاثة أحجام (96 و320 و640 بكسل) ويتفاوض على AVIF أو WebP أو JPEG. AVIF 320 بكسل يزن 14 ك.ب، أي سدس JPEG الأصلي.

• أعلى الطية: eager مع fetchpriority="high"
• أسفل الطية: IntersectionObserver مع rootMargin 200 بكسل
• LQIP: blurhash 8×8 أقل من 60 بايت

تقليم الخطوط وCSS الحرج

كان Inter Variable يزن 312 ك.ب. باستخدام glyphhanger قصرناه على نطاق U+0100-017F فأصبح 28 ك.ب. مع font-display: optional يبقى خط النظام إذا تجاوز الميزانية 100 ميلي ثانية.

4 ك.ب من CSS الحرج مضمَّنة في head، والباقي يُحمَّل async عبر media="print" onload. انخفضت الطلبات المُعطِّلة من سبعة إلى طلب واحد، وأصبح LCP النهائي 0.78 ثانية.

الأسئلة الشائعة

ما رؤوس 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 بكسل فقط، إيموجي بدل الأيقونات، خط النظام. يبقى LCP دون 2.5 ثانية.

هل وجدت هذا مفيداً؟ شاركه.