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

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

Kenji Baheux
Kenji Baheux
Barry Pollard

ما هي ميزة Early Hints (التلميح المبكر)؟

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

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

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

صورة توضّح كيف تسمح ميزة "التلميحات المبكرة" للصفحة بإرسال ردّ جزئي.
باستخدام "التلميحات الأولية": يمكن للخادم عرض استجابة جزئية مع تعديلات الموارد أثناء تحديد الاستجابة النهائية.

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

مقارنة بين موقعين
قبل/بعد مقارنة النصائح المبكرة على موقع إلكتروني تجريبي تم إجراؤه باستخدام WebPageTest (Moto G4 - DSL)

كيفية استخدام التلميحات المبكرة

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

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

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

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

تتضمّن الخطوة الثانية تقليل مخاطر استخدام Early Hints (التلميح المبكر) على الموارد أو المصادر التي قد تكون قديمة أو لم تعد مستخدَمة من قِبل المورد الرئيسي. على سبيل المثال، قد لا تكون الموارد التي يتم تحديثها وإصدارها بشكل متكرر (مثل 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 Early Hints متاحة في جميع المتصفّحات الرئيسية، تختلف التوجيهات التي يمكن إرسالها في Early Hints حسب كلّ متصفّح:

إتاحة الاتصال المسبق:

التوافق مع المتصفح

  • 103
  • 103
  • 120
  • 17

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

التوافق مع المتصفح

  • 103
  • 103
  • 123
  • x

تتوفّر في "أدوات مطوري البرامج في Chrome" أيضًا دعم 103 للتلميحات الأولية.

دعم الخادم

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

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

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

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

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

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

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

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

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

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

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

في ما يلي حدود ميزة "التلميحات الأولية" المطبّقة في Chrome:

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

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

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

استنادًا إلى اهتمام المنتدى، قد نزيد من إمكانياتنا في تطبيق Early Hints من خلال الإمكانات التالية:

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

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

العلاقة بالنظّارات H2/Push

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

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

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