يتطلّب مستوى: محترف
لو e-commerce بتاعك بيوصل LCP لـ 2.4 ثانية على شبكة 4G رغم إنك مفعّل HTTP/2 و <link rel="preload"> جوّا الـ <head>، المشكلة مش في حجم الـ CSS ولا في الـ origin. المشكلة إن المتصفح بيستنّى الـ HTML الأول يوصل علشان يقرا الـ preload hints، وده round-trip كامل بيتهدر. 103 Early Hints بيحلّ ده بإنه يبعت الـ preload للمتصفح قبل ما الـ application يجاوب بـ 200 OK، فالمتصفح يبدأ يحمّل الـ CSS والـ fonts والـ hero image على التوازي مع توليد الـ HTML.
على workload e-commerce عربي بـ 38,400 زيارة/يوم، LCP نزل من 2,420ms لـ 870ms (تحسّن 64%)، و FCP نزل من 1,180ms لـ 410ms، بدون لمس سطر JavaScript واحد في التطبيق نفسه.
المشكلة باختصار: ليه preload في الـ HTML مش كفاية
الـ <link rel="preload"> داخل <head> بيشتغل، لكنه بيحصل بعد ما المتصفح:
- يفتح TCP + TLS handshake (140–280ms على 4G).
- يبعت GET /
- يستنّى الـ application يولّد الـ HTML (لو فيه DB calls و template rendering، 380–820ms عادي).
- يستلم أول byte من الـ HTML.
- يـ parse الـ
<head>ويلاقي الـ preload. - بعد كل ده يطلب الـ CSS والـ fonts.
يعني الـ preload بيبدأ يشتغل بعد ما TTFB كامل عدّى. لو السيرفر بياخد 600ms، المتصفح فضّل 600ms قاعد بيتفرّج. ده الـ round-trip اللي 103 Early Hints بيشيله.
مثال موظف الاستقبال (شرح مبسّط للمفهوم)
تخيّل إنك دخلت فندق فيه إجراءات check-in بتاخد 10 دقايق. الموظف العادي بيخلّيك واقف لحد ما يخلّص الورق، وبعدها بس يقولّك "غرفتك في الدور 5، الجيم بيقفل 11، المطعم في الدور الأرضي". أنت ضيّعت 10 دقايق ما بتعملش حاجة.
موظف الاستقبال الذكي بيقولّك من أول ما تدخل: "اتفضّل قهوة، الواي فاي اسمه كذا، الجيم في الدور الأرضي، أنا بحضّر الورق ده هياخد 10 دقايق". أنت بدأت تستخدم الفندق قبل ما الـ check-in يخلّص أصلاً.
103 Early Hints هو نفس فكرة الموظف الذكي. الـ origin بيقول للمتصفح: "أنا لسه بحضّر الـ HTML، بس عشان متضيّعش وقت، ابدأ حمّل دول دلوقتي". المتصفح بيشغّل الـ requests على التوازي مع توليد الـ HTML.
الشرح العلمي الدقيق: RFC 8297 وطبقة HTTP
الكود 103 Early Hints اتعرّف رسمياً في RFC 8297 (Oku, 2017)، وهو ضمن الـ 1xx informational responses. الفكرة المعمارية إن HTTP يسمح للسيرفر يبعت أكتر من response لنفس الـ request، طول ما الأخير بس هو 2xx/3xx/4xx/5xx. الـ 103 بيحمل headers بس (مفيش body)، وبيتبعت قبل الـ final response.
السيرفر بيبعت:
