يتم تحميل الصفحات بشكل أسرع باستخدام وقت التفكير الخاص بالخادم من خلال ميزة Early Hints

تعرَّف على الطريقة التي يمكن أن يرسل بها الخادم تلميحات إلى المتصفّح حول الموارد الفرعية المهمة.

Kenji Baheux

Barry Pollard

ما هي ميزة Early Hints؟

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

ميزة Early Hints هي رمز حالة HTTP (103 Early Hints) يُستخدَم لإرسال استجابة HTTP أولية قبل الاستجابة النهائية. ويتيح ذلك للخادم إرسال تلميحات إلى المتصفِّح حول الموارد الفرعية المهمة (على سبيل المثال، أوراق أنماط الصفحة أو محتوى JavaScript المهم) أو المصادر التي من المرجّح أن تستخدمها الصفحة، وذلك أثناء انشغال الخادم بإنشاء المورد الرئيسي. ويمكن للمتصفّح استخدام هذه النصائح لإعداد الاتصالات وطلب موارد فرعية أثناء انتظار المورد الرئيسي. بمعنى آخر، تساعد ميزة Early Hints المتصفّح في الاستفادة من "وقت تفكير الخادم" عن طريق القيام ببعض الإجراءات مسبقًا، ما يساعد على تسريع عمليات تحميل الصفحات.

في بعض الحالات، قد يتراوح تحسّن الأداء في سرعة عرض أكبر محتوى مرئي من عدة مئات من المللي ثانية، وفقًا لما رصدته Shopify وCloudflare، وتصل سرعة تحسين الأداء إلى ثانية واحدة، كما هو مبيّن في المقارنة قبل وبعد:

طريقة استخدام ميزة Early Hints

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

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

تجدر الإشارة أيضًا إلى أنّه إذا كانت مواردك الرئيسية تستخدم preconnect أو preload، يمكنك التفكير في هذه المصادر أو الموارد من بين المرشّحين للحصول على ميزة "التلميحات المبكرة". اطّلِع على كيفية تحسين سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) للحصول على مزيد من التفاصيل. مع ذلك، قد لا يكون الخيار الأمثل للأمر preconnect وpreload من HTML إلى ميزة "التلميحات المبكرة".

عند استخدام هذه الموارد في HTML، تحتاج عادةً إلى preconnect أو preload موارد لن يكتشفها Preload Scanner في HTML، مثل الخطوط أو صور الخلفية التي كان من الممكن اكتشافها في وقت متأخر لولا ذلك. بالنسبة إلى ميزة Early Hints، لن تتوفّر لغة HTML، لذا ننصحك بدلاً من ذلك preconnect بالانتقال إلى النطاقات المهمة أو preload الموارد المهمة التي قد يتم اكتشافها في وقت مبكر من HTML، على سبيل المثال، التحميل المُسبق main.css أو app.js. بالإضافة إلى ذلك، لا تتيح جميع المتصفّحات استخدام preload للتلميحات المبكرة. يُرجى الاطّلاع على دعم المتصفِّح.

تتمثل الخطوة الثانية في تقليل مخاطر استخدام ميزة "التلميحات المبكرة" على الموارد أو المصادر التي قد تكون قديمة أو لم يعُد يستخدمها المورد الرئيسي. على سبيل المثال، قد لا تكون الموارد التي يتم تعديلها وإصدار نُسخ منها بشكل متكرّر (مثل example.com/css/main.fa231e9c.css) هي الخيار الأفضل. يُرجى العِلم أنّ هذه المشكلة لا تقتصر على ميزة "التلميحات المبكرة"، بل تنطبق على أي preload أو preconnect أينما كانت. هذا هو نوع التفاصيل التي يجب التعامل معها على أفضل نحو مع الأساليب المبرمَجة أو إنشاء النماذج (على سبيل المثال، من المرجّح أن تؤدي العملية اليدوية إلى عناوين URL غير متطابقة للتجزئة أو الإصدارات بين preload وعلامة HTML الفعلية التي تستخدم المورد).

كمثال، ضع في اعتبارك التدفق التالي:

GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]

يتوقّع الخادم أن هناك حاجة إلى الإضافة main.abcd100.css، ويقترح تحميلها مُسبقًا باستخدام ميزة "التلميحات المبكرة":

103 Early Hints
Link: </main.abcd100.css>; rel=preload; as=style
[...]

بعد بضع لحظات، يتم عرض صفحة الويب، بما في ذلك خدمة مقارنة الأسعار (CSS) المرتبطة. يتم تعديل مورد CSS هذا بشكل متكرر، ويتوفّر المورد الرئيسي حاليًا بخمسة إصدارات (abcd105) من مورد CSS المتوقّع (abcd100).

200 OK
[...]
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.abcd105.css">

بشكل عام، ركِّز على الموارد والأصول التي تكون مستقرة إلى حدّ ما، ومستقلة إلى حدّ كبير عن نتائج المورد الرئيسي. وإذا لزم الأمر، يمكنك تقسيم الموارد الرئيسية إلى قسمَين: جزء ثابت مصمّم للاستخدام مع ميزة "التلميحات المبكرة"، وجزء أكثر ديناميكية ليتم جلبه بعد استلام المتصفّح الرئيسي:

<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">

وأخيرًا، من جانب الخادم، ابحث عن طلبات الموارد الرئيسية التي أرسلتها المتصفحات المعروفة بتوافقها مع Early Hints، وتجاوب مع طلبات 103 Early Hints على الفور. في استجابة 103، قم بتضمين تلميحات الاتصال المسبق والتحميل المسبق ذات الصلة. عندما يصبح المورد الرئيسي جاهزًا، يمكنك المتابعة بالردّ المعتاد (على سبيل المثال، 200 OK إذا كان ناجحًا). للتوافق مع الأنظمة القديمة، من الأفضل أيضًا تضمين عناوين HTTP التي تتضمّن Link في الاستجابة النهائية، وربما زيادة هذه العناوين باستخدام الموارد المهمّة التي أصبحت واضحة كجزء من إنشاء المورد الرئيسي (على سبيل المثال، الجزء الديناميكي من مورد رئيسي في حال اتّباع اقتراح "التقسيم إلى اثنين"). إليك ما سيبدو عليه هذا:

GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
103 Early Hints
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script

بعد بضع لحظات:

200 OK
Content-Length: 7531
Content-Type: text/html; charset=UTF-8
Content-encoding: br
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script
Link: </experimental.3eab3290.css>; rel=preload; as=style
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">
   <script src="/common.js"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">

دعم المتصفح

على الرغم من توفُّر 103 "التلميحات المبكرة" في جميع المتصفحات الرئيسية، تختلف التوجيهات التي يمكن إرسالها في "التلميح المبكر" حسب كل متصفح:

دعم الاتصال المسبق:

إتاحة التحميل المُسبق:

تتوفّر أيضًا 103 تلميحات في البداية في "أدوات مطوري البرامج في Chrome" ويمكن الاطّلاع على عناوين Link في موارد المستندات:

ملاحظة: لاستخدام موارد Early Hints، يجب عدم وضع علامة في المربّع Disable cache في "أدوات مطوري البرامج"، لأنّ ميزة Early Hints تستخدم ذاكرة التخزين المؤقت في المتصفّح. بالنسبة إلى الموارد التي تم تحميلها مسبقًا، سيظهر منشئ البدء على أنّه early-hints والحجم كـ (Disk cache):

ويتطلّب ذلك أيضًا شهادة موثوق بها لاختبار HTTPS.

لا يتضمّن متصفّح Firefox (اعتبارًا من الإصدار 126) ميزة "التلميحات المبكرة 103" بشكلٍ صريح في "أدوات مطوّري البرامج"، إلا أنّ الموارد التي تم تحميلها باستخدام ميزة "التلميحات المبكرة" لا تعرض معلومات رأس HTTP، وهو مؤشر واحد على أنّه تم تحميلها من خلال "التلميحات المبكرة".

دعم الخادم

في ما يلي ملخص سريع لمستوى دعم ميزة Early Hints ضمن برامج خادم HTTP الشائعة ذات المصدر المفتوح:

• Apache: متوافق باستخدام mod_http2.
• H2O: متوافق
• NGINX: وحدة تجريبية
• العقدة: متاحة منذ 18.11.0 لنظامَي التشغيل http وhttp2

تفعيل ميزة "التلميحات المبكرة" بطريقة أسهل

إذا كنت تستخدم إحدى شبكات توصيل المحتوى (CDN) أو المنصات التالية، قد لا تحتاج إلى تنفيذ ميزة "التلميحات المبكرة" يدويًا. يمكنك الرجوع إلى المستندات الخاصة بمقدّم الحلول على الإنترنت لمعرفة ما إذا كان متوافقًا مع ميزة "التلميحات المبكرة"، أو راجِع القائمة غير الشاملة هنا:

• نصائح مبكّرة في Cloudflare
• نصائح مبكّرة في Fastly
• Early Hints at Akamai.

كيفية تجنُّب مشاكل العملاء الذين لا يوفّرون ميزة Early Hints

تعد استجابات HTTP المعلوماتية في النطاق 100 جزءًا من معيار HTTP، ولكن بعض البرامج أو برامج التتبع القديمة قد تواجه صعوبة في التعامل معها، لأنه قبل إطلاق 103 تلميحات مبكّرة نادرًا ما كانت تُستخدم لتصفح الويب بشكل عام.

إن إصدار 103 تلميحات مبكّرة استجابةً للعملاء الذين يرسلون عنوان sec-fetch-mode: navigate طلب HTTP يجب أن يضمن إرسال مثل هذه التلميحات فقط للعملاء الجدد الذين يدركون ضرورة انتظار الاستجابة اللاحقة. بالإضافة إلى ذلك، بما أنّ ميزة "التلميحات المبكرة" متاحة فقط في طلبات التنقّل (اطّلِع على القيود الحالية)، فإنّ هذا الإجراء له فائدة إضافية تتمثل في تجنُّب إرسال هذه التلميحات في طلبات أخرى بدون داعٍ.

بالإضافة إلى ذلك، لا يُنصح بإرسال "التلميحات المبكرة" إلا عبر اتصالات HTTP/2 أو HTTP/3 ولن تقبلها معظم المتصفحات إلا عبر هذه البروتوكولات.

النمط المتقدم

إذا طبَّقت "التلميحات المبكرة" بالكامل على صفحاتك المقصودة الرئيسية، ووجدت أنّك تبحث عن المزيد من الفرص، قد يهمّك النمط المتقدّم التالي.

بالنسبة إلى الزوّار الذين وصلوا إلى طلب الصفحة nth كجزء من رحلة مستخدم عادية، قد يكون من المفيد تعديل استجابة "التلميحات المبكرة" لتناسب المحتوى الأقل والأعمق في الصفحة، أو بعبارةٍ أخرى استخدام "التلميحات المبكرة" في الموارد ذات الأولوية الأقل. وقد يبدو ذلك غير منطقي لأنّنا ننصح بالتركيز على المصادر أو الموارد الفرعية ذات الأولوية العالية والتي تمنع عرض المحتوى. ومع ذلك، وبحلول الوقت الذي انتقل فيه الزائر إلى الآن، من المحتمل جدًا أن يكون متصفحه يحتوي فعلاً على جميع الموارد المهمة. من الآن فصاعدًا، قد يكون من المنطقي تحويل انتباهك إلى الموارد ذات الأولوية الأقل. على سبيل المثال، قد يعني ذلك استخدام ميزة "التلميحات المبكرة" لتحميل صور المنتجات أو استخدام لغة JavaScript/CSS إضافية مطلوبة فقط للتفاعلات الأقل شيوعًا مع المستخدمين.

القيود الحالية

في ما يلي حدود ميزة "التلميحات المبكرة" ( Early Hints) كما هي مُطبَّقة في Chrome:

• لا يتوفر هذا الخيار إلا لطلبات التنقّل (أي المورد الرئيسي لمستند المستوى الأعلى).
• يتوافق مع preconnect وpreload فقط (أي أنّ السمة prefetch غير متوافقة).
• إنّ ميزة "التلميحات المبكرة" متبوعة بعملية إعادة توجيه من مصادر متعددة ضمن الاستجابة النهائية ستؤدي إلى إيقاف Chrome للموارد والاتصالات التي حصل عليها باستخدام ميزة "التلميحات المبكرة".
• إنّ الموارد التي يتم تحميلها مُسبقًا باستخدام ميزة "التلميحات المبكرة" تُخزَّن في ذاكرة التخزين المؤقت HTTP ويتم استردادها من هناك لاحقًا بواسطة الصفحة. لذلك، يمكن فقط التحميل المُسبق للموارد القابلة للتخزين المؤقت باستخدام ميزة "التلميحات المبكرة" أو سيتم استرجاع المورد مرّتين (مرة من خلال ميزة "التلميحات المبكرة" ومرة أخرى في المستند). في Chrome، يتم إيقاف ذاكرة التخزين المؤقت لبروتوكول HTTP لشهادات HTTPS غير الموثوق بها (حتى إذا تابعت تحميل الصفحة).
• إنّ التحميل المُسبق للصور المتجاوبة (باستخدام imagesrcset أو imagesizes أو media) لا يمكن استخدامه من خلال عناوين <link> HTTP لأنّه لم يتم تحديد إطار العرض إلى أن يتم إنشاء المستند. يعني ذلك أنّه لا يمكن استخدام ميزة "التلميحات المبكرة" لتحميل الصور المتجاوبة مسبقًا، وقد يتم تحميل الصورة غير الصحيحة عند استخدامها لإجراء ذلك. تابع هذه المناقشة حول الاقتراحات حول كيفية التعامل مع هذا بشكل أفضل.

هناك قيود مشابهة في المتصفّحات الأخرى، وكما أشرنا سابقًا، تحظر بعض المتصفّحات الأخرى استخدام 103 تلميحات مبكرة فقط على preconnect.

ما هي الخطوات التالية؟

واستنادًا إلى اهتمام المنتدى، قد نعمل على تعزيز عملية استخدام ميزة "التلميحات المبكرة" من خلال الإمكانيات التالية:

• "التلميحات المبكرة" للموارد غير القابلة للتخزين المؤقت باستخدام ذاكرة التخزين المؤقت بدلاً من ذاكرة التخزين المؤقت HTTP
• "التلميحات المبكرة" التي يتم إرسالها بشأن طلبات الموارد الفرعية
• تم إرسال "التلميحات المبكرة" في طلبات الموارد الرئيسية لإطار iframe.
• إتاحة الجلب المُسبَق في ميزة Early Hints

نرحّب بملاحظاتك بشأن الجوانب التي يجب منحها الأولوية، وكيفية تحسين ميزة "التلميحات المبكرة".

العلاقة بـ H2/Push

إذا كنت على دراية بميزة HTTP2/Push المتوقّفة نهائيًا، قد تتساءل عن أوجه الاختلاف بين "التلميحات المبكرة". على الرغم من أنّ ميزة Early Hints تتطلب جولة ذهاب وعودة للمتصفّح لبدء جلب الموارد الفرعية المهمة، يمكن أن يبدأ الخادم في إرسال الموارد الفرعية إلى جانب الاستجابة عند استخدام HTTP2/Push. وعلى الرغم من أنّ ذلك قد يبدو رائعًا، إلا أنّ ذلك نتج عنه جانب هيكلي أساسي: في حال استخدام HTTP2/Push، كان من الصعب جدًا تجنُّب دفع الموارد الفرعية المتوفّرة في المتصفِّح. يعد هذا "التجاوز المفرط" إلى انخفاض كفاءة استخدام معدل نقل البيانات للشبكة، مما أعاق مزايا الأداء بشكل كبير. بوجه عام، أظهرت بيانات Chrome أن HTTP2/Push كان في الواقع سلبيًا تمامًا بالنسبة للأداء عبر الويب.

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

صورة مصغّرة من إعداد بيير بامين.