103 تلميحات مبكرة: ما هو وكيفية تنفيذها

103 Early Hints هو رمز حالة HTTP الجديد الذي يساعد المتصفحات على تحديد المحتوى الذي سيتم تحميله مسبقًا قبل أن تبدأ الصفحة في الوصول.

بعد أن تم ذكرها لأول مرة بواسطة Cloudflare في نهاية العام الماضي ، أعلنت Google رسميًا الآن أن Early Hints متاح في Chrome الإصدار 103 مع دعم التحميل المسبق والاتصال المسبق للبدء:

في الأسطر التالية ، ستتعرف على ماهية النصائح المبكرة بالضبط وكيف يمكنك تنفيذها على موقع الويب الخاص بك لتحسين الأداء.

ولكن قبل ذلك ، نجري مراجعة سريعة لكيفية عمل المتصفحات ولماذا كانت هناك حاجة إلى تلميحات مبكرة في المقام الأول.

باختصار: المتصفحات والخوادم وخادم وقت التفكير

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

في الأساس ، يرسل متصفحك طلبًا إلى الخادم ، وتأتي الإرشادات الخاصة بما يتم تحميله من استجابة الخادم.

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

تُعرف هذه الفترة باسم "وقت التفكير في الخادم".

أثناء وقت التفكير في الخادم هذا ، يظل المتصفح موجودًا هناك وينتظر دون عرض أي محتوى. وأعتقد أننا يمكن أن نتفق على أنه لا أحد يريد التحديق في شاشة فارغة.

هذا هو المكان الذي تلعب فيه التلميحات المبكرة.

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

تتمثل إحدى طرق تحسين أداء الصفحة في استخدام تلميحات الموارد. كما يوحي اسمهم ، فإنهم يقدمون للمتصفح "تلميحات" حول الموارد التي قد يحتاجها لاحقًا - على سبيل المثال ، التحميل المسبق لملفات معينة أو الاتصال بخادم مختلف.

إذا كنت مهتمًا بالموضوع وترغب في معرفة المزيد ، فراجع مقالتنا حول تلميحات الموارد وتنفيذها.

بقدر ما قد يبدو استخدام تلميحات الموارد ، هناك مشكلة. لكي يعمل المتصفح عليها ، يجب أن يرسل الخادم جزءًا على الأقل من الصفحة.

أدخل تلميحات مبكرة.

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

بدون تلميحات مبكرة

بعبارات أبسط:

مع تمكين التلميحات المبكرة ، يرسل الخادم استجابتين: الأول (رمز حالة HTTP 103 Early Hints) لإرشاد المتصفح بشأن ما يمكنه بدء تحميله على الفور ، والثاني (رمز حالة HTTP 200) هو الاستجابة الكاملة مع المتبقي معلومة.

مع تمكين التلميحات المبكرة

من خلال إرسال هذه التلميحات إلى المتصفح قبل تجميع الاستجابة الكاملة ، يمكن للمتصفح معرفة ما يحتاج إلى القيام به لتحميل صفحة الويب بشكل أسرع للمستخدم.

النتيجة النهائية:

أوقات تحميل أسرع للصفحة ووقت استجابة أقل من وجهة نظر المستخدم.

إذا كنت تبحث عن تفسير أكثر رسمية ، فقد قامت Cloudflare بعمل رائع بتقديمه:

تنفيذ التلميحات المبكرة على موقع الويب الخاص بك

يجب عليك اتخاذ عدة خطوات لتنفيذ Early Hints على موقع الويب الخاص بك بنجاح.

الخطوة 0: ضع في اعتبارك استخدام link rel = preload أو link rel = preonnect بدلاً من تلميحات مبكرة

هذه هي الخطوة 0 لأنه إذا كان بإمكان الخادم الخاص بك إرسال 200 استجابة على الفور ، فإن إضافة "تلميحات مبكرة" غير مجدية . بدلاً من ذلك ، إذا كنت ترغب في تسريع استجابة 200 ، أكثر من ذلك ، يمكنك استخدام الرابط rel = التحميل المسبق أو الرابط rel = التوصيل المسبق لتلميحات الموارد.

أسهل طريقة لتحديد مدى سرعة إرسال الخادم الخاص بك لاستجابة 200 هي استخدام أداة اختبار أداء KeyCDN. كل ما عليك فعله هو إدخال عنوان URL الخاص بموقعك والحصول على البيانات:

الخطوة 1: حدد أهم صفحاتك

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

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

ذلك لأن المتصفحات الحديثة جيدة جدًا في تخمين الصفحة التي سيزورها المستخدم بعد ذلك ، ومن المحتمل أن يكون لديهم جميع الموارد الفرعية التي يحتاجونها في التنقل الثاني أو الثالث.

الخطوة 2: تحديد الأصول الهامة والموارد الفرعية التي تساهم بأكبر قدر في مقاييس الأداء الرئيسية

بعد تحديد أهم صفحاتك المقصودة ، يجب أن تنتقل إلى تحديد الأصول والموارد الفرعية التي تعتبر مرشحة جيدة لتلميحات الاتصال المسبق أو التحميل المسبق. ستكون هذه أصولًا وموارد تساهم بشكل كبير في المقاييس الرئيسية مثل Largest Contentful Paint و First Contentful Paint.

بشكل أكثر تحديدًا ، قد ترغب في البحث عن موارد فرعية لحظر العرض مثل JavaScript المتزامن أو أوراق الأنماط أو حتى خطوط الويب.

يمكنك التعرف عليها عن طريق تشغيل موقع الويب الخاص بك من خلال أداة اختبار مثل WebPageTest والتحقق من مخطط الشلال. سيكون أمام جميع موارد حظر العرض علامة "X":

أسهل طريقة لتحديد الموارد الفرعية المناسبة للتلميحات المبكرة هي إذا كانت مواردك الرئيسية تستخدم بالفعل link rel = preonnect أو link rel = preload . هؤلاء هم المرشحون المثاليون.

وهذه هي الطريقة التي يمكنك بها إضافة تلميحات مبكرة يدويًا إلى موقع الويب الخاص بك.

ولكن ماذا لو لم تكن لديك المهارات التقنية للقيام بذلك بنفسك؟

حسنًا ، هناك طريقة أسهل.

تمكين التلميحات المبكرة باستخدام حساب Cloudflare الخاص بك

إذا كنت من مستخدمي Cloudflare ، فيمكنك تمكين Early Hints من خلال لوحة القيادة ، باتباع الخطوات التالية:

1. قم بتسجيل الدخول إلى لوحة معلومات Cloudflare الخاصة بك وحدد المجال الخاص بك.
2. من لوحة القيادة ، انقر فوق السرعة> التحسين.
3. ضمن التسليم الأمثل ، قم بتمكين التلميحات المبكرة.

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

نحن نتعمق في عملية التطوير ونعمل بجد لإصدار ذاكرة التخزين المؤقت لحافة HTML في أسرع وقت ممكن. لذا تأكد من الاشتراك في النشرة الإخبارية لدينا ومتابعة مدونتنا لتكون أول من يعرف متى نعلن ذلك.