شرح HTTP 103 Early Hints: متى تفيد التلميحات المبكرة؟

ما الذي تعنيه الاستجابة ١٠٣؟

عندما يطلب المتصفح صفحة، قد يحتاج الخادم إلى وقت لإعداد الرد النهائي. تسمح الاستجابة المبكرة بإرسال بعض الترويسات المتوقعة خلال هذه الفترة، بحيث يستطيع المتصفح الاستعداد قبل وصول الصفحة. ولا يعني غياب مورد عن هذه التلميحات أنه لن يظهر في الصفحة النهائية. [١]

تظل الاستجابة النهائية صاحبة القرار في معالجة الصفحة. فالترويسات التي وصلت مبكرًا لا تستبدل ترويساتها، وقد يتبين للخادم أن بعض توقعاته يحتاج إلى تغيير. لذلك لا يصح تفسير ظهور الرمز ١٠٣ على أنه بديل للرمز الذي سينهي الطلب، ولا الاكتفاء به عند تشخيص خطأ في فتح الصفحة. اقرأ الرد الأخير وما يحمله من حالة ومحتوى، ثم افحص التلميحات بوصفها خطوة سابقة له. [١]

من المفيد فصل سؤالين في سجل الفحص الذي تعده لفريقك: هل وصلت الصفحة المطلوبة كما ينبغي؟ وهل سبقها إعداد نافع لمواردها؟ اكتب نتيجة كل سؤال في خانة مستقلة، وأرفق عنوان الصفحة ووقت الملاحظة. يمنع هذا التنظيم إغلاق بلاغ عن صفحة معطلة لمجرد العثور على ترويسة تبدو صحيحة. كما يجعل النقاش محددًا عند مقارنة ملاحظات مطور الواجهة مع ملاحظات مسؤول الخادم.

متى تستحق التلميحات المبكرة التجربة؟

ابدأ بصفحات الدخول التي يزورها الناس أولًا، وبموارد مهمة لعرضها. يوصي دليل Chrome بانتقاء موارد مستقرة نسبيًا، مع الانتباه إلى تطابق عنوان المورد في التلميح وعنوانه في الصفحة. فإذا تغير اسم الملف مع الإصدارات، فقد يقود تلميح قديم إلى ملف لم تعد الصفحة تحتاجه. كما قد تقل الفائدة في الزيارات التالية حين تكون الموارد اللازمة موجودة بالفعل لدى المتصفح. [٥]

لترتيب عملك، أنشئ قائمة قصيرة لصفحة واحدة: اسم المورد المقترح، وسبب أهميته، والموضع الذي يستخدمه، والشخص المسؤول عن تحديث رابطه. لا تبدأ بقائمة كل ملفات المشروع. ويمكنك إضافة خانة بعنوان «ما الدليل المطلوب؟» تكتب فيها ملاحظة قابلة للفحص، مثل ظهور طلب الملف في التسلسل الزمني واستخدامه في الصفحة نفسها. هذه ورقة عمل مقترحة، وليست ترتيبًا إلزاميًا لملفات كل موقع أو نتيجة اختبار منشورة.

افترض، مثلًا، أنك تراجع صفحة دليل دورات تعليمية. اختر بدايةً الملف الذي ينظم شكل العناوين والقائمة، وسجل سبب اختياره. وأجّل القرار بشأن صورة دورة لا تظهر إلا عند اختيار مرشح معين، إلى أن تعرف متى يحتاجها الزائر. يوضح هذا المثال طريقة بناء سؤال تجريبي محدود؛ ولا يقرر سلفًا أن ملف التنسيق هو عنق الزجاجة في موقعك. ضع أيضًا اسم من سيقبل التغيير أو يعيده إلى حالته السابقة.

الفرق بين تهيئة الاتصال وتنزيل المورد

يعني preconnect تنبيه المتصفح إلى مصدر يُتوقع طلب موارد منه، كي يبدأ تهيئة الاتصال مبكرًا. وقد يشمل ذلك البحث عن عنوان النطاق ومراحل إنشاء الاتصال الآمن بحسب البروتوكول. لا يحتوي هذا الاختيار بذاته على أمر بتنزيل ملف معين؛ فالمستهدف هو المصدر الذي ستأتي منه الموارد. ويشرح مرجع MDN أن فائدته تتعلق بالاتصالات إلى مصادر أخرى، أما المصدر نفسه فالارتباط به قائم أصلًا عند طلب الصفحة. [٣]

لا تجعل هذه التهيئة قائمة بجميع النطاقات التي تظهر في الموقع. فقد يصبح فتح اتصالات كثيرة غير مفيد، ولذلك تُعطى الأولوية للمصادر الأهم. ولا يثبت إدراج النطاق وحده أن المتصفح سيحقق تحسنًا يلاحظه الزائر. استخدم المصطلحين بوضوح في المراجعة: مصدر خارجي ترغب في تهيئة الاتصال به، وملف محدد ترغب في جلبه. الخلط بينهما قد يجعلك تبحث عن تنزيل لم تطلبه أصلًا. [٣]

كيف تختار موردًا للتحميل المسبق؟

يشير preload إلى مورد محدد تريد بدء جلبه مبكرًا، ويحتاج إلى بيان نوعه بالخاصية as، مثل ملف تنسيق أو خط. التحميل المسبق للبرنامج لا يعني تشغيله بمجرد تنزيله؛ فالاستخدام الفعلي يأتي ضمن عمل الصفحة. وبالمثل، لا تستغنِ عن ربط ملف التنسيق الذي تريد تطبيقه. ميزة التلميح هي تقديم مرحلة الجلب، وليست إنشاء علاقة استخدام لم تكتبها الصفحة. [٤]

راجع طريقة الجلب كذلك، خاصة عند التعامل مع الخطوط والموارد التي تستخدم المشاركة بين المصادر، المعروفة باسم CORS. ينبغي أن تتوافق قيمة crossorigin مع طريقة طلب المورد لاحقًا، وقد تكون مطلوبة حتى عندما لا يأتي الخط من مصدر آخر. ومن الأخطاء تحميل نسختين مختلفتين من صورة على سبيل الاحتياط، رغم أن الصفحة ستستخدم واحدة فقط؛ فالتلميحات الزائدة ليست تحسينًا مجانيًا. [٤]

ولتحميل الموارد عبر التلميحات في Chrome قيد إضافي: ينبغي أن تكون قابلة للتخزين في ذاكرة HTTP المؤقتة، وإلا فقد تُطلب مرة مبكرًا ومرة أخرى عند استعمالها. لذلك افحص نتيجة الطلب الفعلية، ولا تعتبر تنزيل الملف مرتين تسريعًا ناجحًا لمجرد أن إحدى المرتين بدأت قبل وصول الصفحة. [٥]

مثال مبسط لقراءة ترويسة التلميح

تتيح ترويسة Link التعبير عن الروابط داخل ترويسات الاستجابة، قبل معالجة محتوى الصفحة. ومن العلاقات المناسبة لهذا الاستخدام تهيئة الاتصال والتحميل المسبق. أما وضع علاقة تنسيق في الترويسة فليس بديلًا موثوقًا عبر المتصفحات عن عنصر الربط داخل الصفحة. في المثال التوضيحي التالي نختار ملفًا افتراضيًا واحدًا لتنسيق دليل الدورات، ونحدد نوعه بوضوح بدل الاكتفاء بإرسال اسم الملف دون بيان المقصود منه. [٨]

103 Early Hints
Link: </assets/course-shell.css>; rel=preload; as=style

اقرأ السطر الثاني على أنه رابط إلى المورد بين القوسين، ثم علاقة التحميل المسبق، ثم نوع المورد وهو التنسيق. أما استخدامه داخل الصفحة فيوضحه عنصر الربط التالي. هذه كتابة مبسطة للتفسير، وليست تمثيلًا لإطارات بروتوكول الاتصال، ولا برنامج خادم جاهزًا للتشغيل. ولا ينبغي نسخها إلى جسم الصفحة وانتظار أن يصدر الخادم بسببها استجابة مبكرة؛ فموضع الترويسة وآلية إرسالها جزء من إعداد الخادم أو الخدمة المستخدمة. [٨]

<link rel="stylesheet" href="/assets/course-shell.css">

ما حدود دعم المتصفح والبروتوكول؟

وجود الميزة في الخادم لا يكفي لتوقع السلوك نفسه لدى كل زائر. يوصي مرجع MDN بإرسال التلميحات عبر الإصدار الثاني من بروتوكول HTTP أو ما يليه، إلا إذا كان معروفًا أن العميل يتعامل بصورة صحيحة مع الردود المعلوماتية. وتحد معظم المتصفحات دعمها لهذه البروتوكولات. لذلك دوّن البروتوكول والمتصفح في الاختبار، ولا تجعل مثالًا نصيًا يشبه الردود القديمة دليلًا على دعم كل بيئة. [٢]

تذكر أيضًا أن المتصفحات تعالج الاستجابة المبكرة الأولى، وتتخلى عنها إذا انتهى الطلب بإعادة توجيه إلى مصدر مختلف. ويمكن لسياسة أمن المحتوى أن تؤثر في المعالجة؛ فتنزيل مورد مبكرًا لا يضمن السماح باستخدامه في الصفحة النهائية. هذه الحدود مهمة عند تفسير نتيجة غير متوقعة: قد يصل التلميح، لكن مسار التنقل أو سياسة الصفحة يمنع الاستفادة التي كنت تتوقعها. [٢]

رتب نتائج الاختبار في صفوف مستقلة لكل بيئة اخترتها، مع رقم إصدار المتصفح ونوع الجهاز وطريقة الوصول إلى الصفحة. اترك خانة «غير مختبر» للبيئات التي لم تفحصها؛ فهي أدق من وضع علامة نجاح عامة. وإن كانت هناك إعادة توجيه معتادة في رحلة الزائر، فاكتب بدايتها ونهايتها ضمن وصف الحالة. يساعد هذا التوثيق زميلك على إعادة الفحص نفسه، بدل إجراء اختبار مختلف ثم اعتبار اختلاف النتيجة تناقضًا.

راجع التخزين والخصوصية لدى مزود الخدمة

قد تشارك شبكة توزيع المحتوى في إرسال التلميحات، ولهذا يلزم فهم قواعد المزود المحدد. في توثيق Cloudflare الخاص بذاكرة التلميحات، تُخزن المعلومات وتُرسل مبكرًا، وتستند مفاتيحها إلى مسار الطلب مع تجاهل سلسلة الاستعلام. وقد تصل ترويسات الروابط المحفوظة إلى زائر غير مسجل قبل أن ترفضه الاستجابة النهائية. لذلك لا تضع بيانات حساسة في روابط التلميحات، ولا تفترض أن حماية الصفحة تعني تأخير كل ترويسة حتى اكتمال التحقق. [٦]

وتوضح الوثيقة أن الاستجابة المبكرة قد لا تُرسل إذا كانت ترويسات الرد الرئيسي متاحة بالفعل؛ لذا فغيابها عن طلب منفرد لا يكفي لتحديد العطل. هذه أمثلة لسلوك خدمة بعينها، ولا يجوز تعميم تفاصيلها على جميع المزودين أو منتجات الشركة نفسها. ارجع إلى توثيق الخدمة المستخدمة فعليًا عند تحديد كيفية إنشاء التلميحات وتخزينها، وما الذي يحدث إذا اختلف المحتوى تبعًا للزائر أو معلمات الطلب. [٦]

عمليًا، اقترح مراجعة قائمة الروابط مع المسؤول عن الخصوصية أو الوصول داخل الفريق قبل التجربة. اكتب لكل رابط هل هو ملف عام أم مسار مرتبط بحساب، ومن أجاز استخدامه، وأين يمكن تعديل القرار. وعند وجود شك في مورد خاص، أبقه خارج التجربة الأولى حتى يتضح سلوكه. هذه الخطوة التنظيمية لا تغير إعدادات الموقع تلقائيًا، ولا تعد دليلًا على خلو روابطه الحالية من المعلومات الخاصة.

كيف تتحقق من الفائدة قبل التوسع؟

في أدوات مطوري Chrome افحص ترويسات طلب المستند، ثم مصدر بدء طلب المورد. يوضح الدليل ضرورة ترك خيار تعطيل الذاكرة المؤقتة غير محدد للاستفادة من الموارد المبكرة، واستخدام شهادة موثوقة عند الاختبار عبر الاتصال الآمن. راقب أيضًا اختلاف دعم توجيهات التلميح بين المتصفحات؛ فدعم الاستجابة لا يعني تنفيذ جميع أنواعها بالطريقة نفسها. [٥]

لا تكتفِ بظهور الترويسة؛ راقب ما يراه الزائر. من المقاييس المفيدة زمن ظهور أكبر محتوى مرئي، المعروف اختصارًا باسم LCP، وهو يتعلق بأكبر صورة أو كتلة نص أو محتوى مرئي مؤهل داخل مساحة العرض. ويمكن قياسه بأدوات المختبر أو ببيانات الزيارات الفعلية. وقد تختلف نتائج البيئتين، كما أن أكبر عنصر ليس بالضرورة العنصر الأهم للمهمة التي جاء الزائر لإنجازها؛ لذلك احتفظ بملاحظة بصرية إلى جانب القياس. [٧]

قارن حالات متشابهة قبل التغيير وبعده، وسجل إعدادات الاختبار مع النتائج بدل الاحتفاظ بأفضل لقطة فقط. افحص إن ظهرت طلبات إضافية غير مستخدمة، وأخطاء جديدة، أو نتيجة لا تتكرر عند الإعادة. ثم اكتب قرارًا صغيرًا: الاستمرار بالمورد نفسه، أو تجربة مورد آخر، أو الرجوع عن التعديل. احتفظ بالتغيير المحدود وطريقة التراجع عنه إلى أن تتضح فائدته. فنجاح التجربة هو تحسن مدعوم بالملاحظة، وليس مجرد إضافة رقم جديد إلى سجل الشبكة.