Resource Hints: 4 سطور HTML بتقطع 280ms من زمن تحميل صفحتك

القاعدة الذهبية: ضع كل Resource Hint قبل أي <link rel="stylesheet"> أو <script> ممكن يحتاج الدومين ده.

أرقام مقاسة على Lighthouse 11

على blog شخصي يستعمل Cairo من Google Fonts و analytics على دومين تالت، تمّ القياس على Pixel 7a متصل بـ 4G في الإسكندرية (RTT حوالي 120 مللي ثانية):

• قبل الإضافة: First Contentful Paint = 2,140 مللي ثانية
• بعد الإضافة: First Contentful Paint = 1,420 مللي ثانية
• التوفير الفعلي: 720 مللي ثانية (تحسّن بنسبة 33%)
• Largest Contentful Paint اتحسّن من 3,180ms لـ 2,240ms

الأرقام دي متوافقة مع تقارير Web.dev و Chrome User Experience Report لمواقع تستعمل Google Fonts بدون preconnect.

الفرق بين preconnect و dns-prefetch — متى تختار إيه

الناس بتلخبط بينهم. القاعدة البسيطة:

• preconnect: استخدمه لو متأكد 95% إن مورد من الدومين ده هيتطلب فعلًا (الخطوط، الـ CDN الرئيسي للصور). كلفته مش مجانية لأن الـ TCP+TLS connection بيفضل مفتوح حتى لو ما اتستخدمش.
• dns-prefetch: استخدمه لدومينات احتمالية (analytics ممكن المستخدم يقفل tab قبل ما يتحمّل، أو widget social ممكن ما يظهرش لكل المستخدمين).

الحد الآمن: من 4 لـ 6 preconnect في الصفحة الواحدة. أكتر من كده بيستهلك ذاكرة المتصفح وممكن يضر الأداء على الموبايلات الضعيفة، كما وثّق فريق Chrome في 2023.

4 Trade-offs لازم تعرفها قبل ما تنشر

1. preconnect بياخد bandwidth وذاكرة: كل connection مفتوح بياكل حوالي 5 كيلوبايت من ذاكرة المتصفح. على موبايل بـ 2 جيجا RAM، 10 preconnect ممكن يبدأوا يأذوا.
2. preload ممكن يأذي بدل ما يساعد: لو preload-ت مورد مش critical فعلًا (زي صورة في footer)، هتأخر الموارد المهمة لأن المتصفح هيدّيه أولوية.
3. crossorigin attribute مهم جدًا للخطوط: لو نسيت كلمة crossorigin مع preconnect لـ fonts.gstatic.com، المتصفح هيفتح connection بدون credentials، وبعدين يفتح connection تاني للخط الفعلي. كل التوفير يضيع.
4. prefetch مش مضمون: المتصفح حر يتجاهله لو الشبكة بطيئة، البطارية واطية، أو الـ Data Saver mode شغّال. متعتمدش عليه في موارد critical.

متى لا تستخدم Resource Hints

• لو كل مواردك على نفس الدومين الرئيسي، preconnect مش هيفيد لأن الـ connection مفتوح أصلًا من تحميل الـ HTML.
• لو موقعك صفحة واحدة بسيطة بحجم أقل من 100 كيلوبايت، التحسين هيبقى أقل من 50 مللي ثانية — مش يستاهل التعقيد.
• لو عندك Service Worker بيعمل cache offline، الزيارات الراجعة هتاخد مللي ثواني معدودة، فالـ hints ما هيظهرش فرقها.
• لو على HTTP/3 (QUIC) مع 0-RTT والـ session resumption شغّالة، المكسب من preconnect بيقل لـ 50ms أو أقل.

طريقة التحقق إن الـ Hints بتشتغل فعلًا

1. افتح Chrome DevTools واختار Network tab
2. اعمل Hard Refresh (Ctrl+Shift+R أو Cmd+Shift+R)
3. دوّر على أول طلب لدومين الخط (مثلًا cairo.woff2)
4. في تفاصيل الطلب، لازم تلاقي Initial Connection time = 0 مللي ثانية أو قريب جدًا منه

لو لسه شايف زمن DNS أو TCP أكتر من صفر مللي ثانية، يبقى الـ hint مش شغّال. الأسباب الأكثر شيوعًا: URL مكتوب غلط بـ www زيادة، أو نسيت crossorigin مع الخطوط، أو الـ hint اتحط بعد <link rel="stylesheet"> اللي محتاجه.

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

افتح صفحتك الرئيسية، شغّل Lighthouse في Chrome DevTools (Tab اسمه Lighthouse، اختار "Performance" و "Mobile"). شوف قسم "Opportunities". لو لقيت "Preconnect to required origins" أو "Preload key requests" يبقى عندك مكسب جاهز ينطّ. ضيف 2 أو 3 سطور preconnect للدومينات الخارجية اللي بتظهر هناك، وأعد القياس بعد كل تعديل علشان تتأكد إن المتصفح فعلًا بيستخدمها.

المصادر

• HTML Living Standard — Link types: preconnect, preload, prefetch, dns-prefetch (whatwg.org)
• W3C Resource Hints Working Draft (w3.org/TR/resource-hints)
• Web.dev — "Establish network connections early to improve perceived page speed" (2023)
• MDN Web Docs — <link> reference, rel attribute values
• Chrome Developers Blog — "Speed up your site with preconnect" (developer.chrome.com)
• Lighthouse 11.0 audit documentation — "uses-rel-preconnect" و "uses-rel-preload"
• HTTP Archive Web Almanac 2024 — Performance chapter
• RFC 7540 (HTTP/2) و RFC 9114 (HTTP/3) — connection establishment overhead