103 Early Hints: حمّل CSS قبل ما HTML يجهز

app.get('/products/:id', async (req, res) => {
  res.setHeader('Link', [
    '; rel=preload; as=style',
    '; rel=preload; as=font; type=font/woff2; crossorigin'
  ].join(', '));

  const product = await loadProduct(req.params.id);
  res.render('product', { product });
});

بعدها فعّل Early Hints من Cloudflare Cache settings إن كانت متاحة لحسابك. لو مش بتستخدم Cloudflare، هتحتاج دعم من السيرفر أو الـ CDN لإرسال 103 فعليًا. وجود Link وحده مفيد كـ preload في الرد النهائي، لكنه مش نفس مكسب 103 المبكر.

إزاي تقيس قبل وبعد

متقيسش بالانطباع. افتح Chrome DevTools، Network، ثم سجل waterfall للصفحة. قبل التغيير، دور على وقت بداية تحميل CSS والخط. بعد التغيير، المفروض تشوف التحميل بدأ قبل وصول HTML النهائي أو قريب جدًا منه.

قياس تقديري من السيناريو السابق: اكتشاف CSS نزل من حوالي 900ms إلى 120ms. لو LCP كان 2.9s بسبب CSS متأخر وخط متأخر، ممكن ينزل إلى 2.1s أو 2.3s حسب الشبكة وحجم المورد. الرقم مش وعدًا عامًا، لكنه اتجاه منطقي لما المورد الحرج كان متأخر الاكتشاف.

ركز على 3 أرقام: بداية تحميل المورد الحرج، وقت انتهاء تحميله، وLCP. لو المورد بدأ بدري لكن LCP لم يتحسن، غالبًا المشكلة في JavaScript execution أو server TTFB نفسه، مش في اكتشاف CSS.

الـ trade-off هنا

المكسب: المتصفح يستغل server think time بدل ما ينتظر HTML كامل. ده مفيد جدًا للصفحات الديناميكية البطيئة نسبيًا.

التكلفة: لو بالغت في preload، هتزاحم موارد أهم وتزود ضغط الشبكة. web.dev ينبه إن preload إلزامي أكثر من hints أخرى، لذلك استخدمه بحذر. اختار 1 إلى 3 موارد فقط: CSS حرج، خط حرج، أو origin خارجي مهم.

فيه تكلفة تشغيلية كمان: لازم تحدّث روابط assets لما يتغير build hash. لو فريقك ما عندوش asset manifest واضح، الإعداد هيكسر بسهولة.

متى لا تستخدم هذه الطريقة

لا تستخدم 103 Early Hints لو HTML بيرجع في أقل من 150ms. المكسب غالبًا صغير. لا تستخدمه لو المشكلة الأساسية JavaScript bundle كبير، لأنك تحتاج split أو defer قبل hints. ولا تستخدمه لصور كثيرة تحت fold؛ كده أنت بتسرق bandwidth من الصورة أو الـ CSS الأهم.

كمان لا تستخدمه مع ملفات بدون fingerprinting واضح. لو /assets/app.css يتغير كل deploy بدون cache control مضبوط، هتزود احتمالية تحميل نسخة غير مناسبة.

المصادر

• MDN: 103 Early Hints
• Cloudflare Docs: Early Hints
• web.dev: Preload critical assets

الخطوة التالية

افتح صفحة ديناميكية عندك TTFB بتاعها فوق 500ms، وحدد موردًا واحدًا حرجًا يظهر متأخرًا في waterfall. ضيف له Link rel=preload، فعل Early Hints من الـ CDN لو متاح، وقارن LCP قبل وبعد في نفس الشبكة.