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

اكتشف كيف يمكن لخادمك إرسال تلميحات إلى المتصفح حول الموارد الفرعية المهمة.

كينجي باهيو
كنجي باهيو
باري بولارد

ما هي التلميحات المبكرة؟

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

صورة تعرض الخادم يفكر في فجوة زمنية تبلغ 200 ملي ثانية بين تحميل الصفحة وتحميل موارد أخرى.
بدون ملاحظات مبكرة: تم حظر جميع البيانات على الخادم لتحديد كيفية الاستجابة إلى المورد الرئيسي.

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

صورة توضّح كيف تسمح ميزة "التلميحات المبكرة" للصفحة بإرسال ردّ جزئي
باستخدام Early Hints (التلميحات المبكرة): يمكن للخادم عرض استجابة جزئية مع تعديلات على الموارد بينما يحدّد الاستجابة النهائية.

في بعض الحالات، يمكن أن يرتفع تحسُّن أداء سرعة عرض أكبر جزء من المحتوى على الصفحة من مئات المللي ثوانٍ، كما لاحظته من خلال Shopify وبواسطة Cloudflare، وإلى ثانية واحدة أسرع، كما هو موضّح في ما يلي قبل المقارنة:

مقارنة بين موقعين
قبل وبعد إجراء مقارنة بين Early Hints على موقع إلكتروني تجريبي تمّ إجراؤه باستخدام WebPageTest (Moto G4 - DSL)

تنفيذ النصائح المبكرة

قبل التعمّق في الموضوع، يُرجى ملاحظة أنّ ميزة "التلميحات المبكرة" ليست مفيدة إذا كان بإمكان الخادم إرسال 200 (أو ردود نهائية أخرى) على الفور. يمكنك بدلاً من ذلك استخدام link rel=preload أو link rel=preconnect العادية في الاستجابة الرئيسية (عنوان HTTP لرابط rel)، أو في الاستجابة الرئيسية (عناصر <link>)، في مثل هذه الحالات. بالنسبة إلى الحالات التي يحتاج فيها الخادم إلى بعض الوقت لإنشاء الاستجابة الرئيسية، يُرجى مواصلة القراءة.

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

الآن بعد أن أصبحت لديك قائمة الصفحات المقصودة ذات الأولوية هذه، تتكوّن الخطوة التالية من تحديد المصادر أو الموارد الفرعية الأكثر ملاءمةً لتلميحات الاتصال المسبق أو التحميل المُسبق، كقيمة تقريبية أولى. وتكون هذه البيانات عادةً مصادر وموارد فرعية تساهم بشكل أكبر في مقاييس المستخدمين الرئيسية، مثل سرعة عرض أكبر جزء من المحتوى على الصفحة أو سرعة عرض أكبر جزء من المحتوى على الصفحة. بعبارة أخرى، ابحث عن الموارد الفرعية لحظر العرض، مثل JavaScript المتزامن أو أوراق الأنماط أو حتى خطوط الويب. وبالمثل، ابحث عن المصادر التي تستضيف موارد فرعية تساهم كثيرًا في مقاييس سلوك المستخدِمين الرئيسية. ملاحظة: إذا كانت مواردك الرئيسية تستخدم <link rel=preconnect> أو <link rel=preload>، يمكنك مراعاة هذه المصادر أو المصادر بين المرشحين لاستخدام "النصائح المبكرة". راجع هذه المقالة للاطّلاع على مزيد من التفاصيل.

تشمل الخطوة الثانية تقليل مخاطر استخدام Early Hints (التلميحات المبكرة) في الموارد أو الأصول التي قد تكون قديمة أو لم تعد مستخدَمة من قِبل المورد الرئيسي. على سبيل المثال، قد لا تكون الموارد التي يتم تحديثها بشكل متكرر وإصدار نُسخ مختلفة (مثل example.com/css/main.fa231e9c.css) هي الخيار الأفضل. يُرجى العلم أنّ هذه المشكلة لا تقتصر على ميزة "التلميحات المبكرة"، بل تنطبق على أي رابط rel=preload أو rel=preconnect أينما كانا متوفّرَين. هذا هو أفضل نوع من التفاصيل التي يجب التعامل معها باستخدام الأساليب المبرمَجة أو النماذج (على سبيل المثال، من المرجّح أن تؤدي العملية اليدوية إلى عدم تطابق عناوين URL للتجزئة أو الإصدارات بين link rel=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 Early Hints في جميع المتصفّحات الرئيسية، تختلف التوجيهات التي يمكن إرسالها في Early Hints حسب المتصفّح:

دعم Preconnect:

دعم المتصفح

  • 103
  • 103
  • 120
  • 17

دعم التحميل المُسبق:

دعم المتصفح

  • 103
  • 103
  • x

دعم الخادم

في ما يلي ملخّص سريع لمستوى دعم Early Hints من خلال برامج خادم HTTP الشائعة (OSS):

إنّ تفعيل "النصائح المبكرة" هو الطريقة السهلة

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

تجنُّب المشاكل بالنسبة إلى العملاء الذين لا يتيحون ميزة "التلميحات المبكرة"

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

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

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

النقش المتقدم

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

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

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

في ما يلي حدود ميزة "التلميحات المبكرة" كما يتم تطبيقها في Chrome:

  • لا يتوفر هذا الخيار إلا لطلبات التنقل (أي المورد الرئيسي للمستند ذي المستوى الأعلى).
  • لا يمكن استخدام سوى الترميزَين preconnect وpreload (أي أنّ السمة prefetch غير متاحة).
  • سيؤدي التلميح المبكر المتبوع بعملية إعادة توجيه من مصادر متعددة في الرد النهائي إلى إسقاط Chrome للموارد والاتصالات التي حصل عليها من خلال Early Hints.

تُفرَض قيود مماثلة على المتصفحات الأخرى، وتحصر التلميحات الأولية في 103 على preconnect فقط.

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

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

  • تم إرسال التلميحات المبكرة في طلبات الموارد الفرعية.
  • تم إرسال تلميحات أولية في طلبات المورد الرئيسي لإطار iframe.
  • إتاحة ميزة الجلب المُسبَق في "التلميحات المبكرة"

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

العلاقة بالغاز 2/الدفع

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

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

صورة مصغّرة من تصوير بيير بامين.