يسرد قسم "فرص التحسين" في تقرير Lighthouse جميع الطلبات الرئيسية
التي لا تمنح الأولوية لطلبات الجلب باستخدام <link rel=preconnect>:
توافُق المتصفح
يمكن استخدام <link rel=preconnect> على معظم المتصفحات. يُرجى الاطّلاع على توافق المتصفّح.
تحسين سرعة تحميل الصفحة باستخدام ميزة "الربط المُسبَق"
يمكنك إضافة تعديلات الموارد preconnect أو dns-prefetch
لإنشاء اتصالات مبكرة بالمصادر المهمة التابعة لجهات خارجية.
يُعلم الرمز <link rel="preconnect"> المتصفّح بأنّ صفحتك تريد
إنشاء اتصال بمصدر آخر،
وأنّك تريد بدء العملية في أقرب وقت ممكن.
غالبًا ما ينطوي إنشاء الاتصالات على وقت كبير في الشبكات البطيئة، لا سيما عندما يتعلق الأمر بالاتصالات الآمنة، إذ قد يشمل ذلك عمليات بحث في نظام أسماء النطاقات وعمليات إعادة توجيه وعدة رحلات ذهاب وعودة إلى الخادم النهائي الذي يعالج طلب المستخدم.
يمكن أن يؤدي الاهتمام بكل هذه الأمور مسبقًا إلى جعل تطبيقك أسرع بالنسبة إلى المستخدم بدون التأثير سلبًا في استخدام النطاق الترددي. يتمّ قضاء معظم الوقت في انتظار بدء الاتصال، بدلاً من تبادل البيانات.
يمكنك إبلاغ المتصفّح بنيتك ببساطة عن طريق إضافة علامة رابط إلى صفحتك:
<link rel="preconnect" href="https://example.com">
يتيح ذلك للمتصفّح معرفة أنّ الصفحة
تهدف إلى الربط بـ example.com واسترداد المحتوى من هناك.
يُرجى العِلم أنّه على الرغم من أنّ <link rel="preconnect"> رخيص جدًا،
يمكن أن يستغرق وقتًا ثمينًا من وحدة المعالجة المركزية، خاصةً في عمليات الاتصال الآمنة.
ويُعدّ ذلك أمرًا سيئًا بشكل خاص إذا لم يتم استخدام الاتصال في غضون 10 ثوانٍ،
لأنّ المتصفّح يغلقه، ما يؤدي إلى إهدار كل هذه الجهود المبذولة في وقت مبكر.
بشكل عام،
يمكنك محاولة استخدام السمة <link rel="preload"> لأنّها تعديل أكثر شمولاً في الأداء،
لكن عليك الاحتفاظ بـ <link rel="preconnect"> في شريط الأدوات الخاص بك مع الحالات الهامشية مثل:
<link rel="dns-prefetch"> هو نوع آخر من <link> مرتبط بعمليات الربط.
هذا يتعامل مع بحث نظام أسماء النطاقات فقط، لكنه يدعم المتصفح على نطاق أوسع، لذا قد يكون بمثابة احتياطي لطيف.
يمكنك استخدامه بالطريقة نفسها:
<link rel="dns-prefetch" href="https://example.com" />.
إرشادات خاصة بالحِزم
Drupal
يمكنك إضافة تعديلات الموارد Preconnect أو dns-prefetch من خلال تثبيت وإعداد وحدة تسهّل إضافة تعديلات الموارد المُقدّمة للوكيل المستخدم.
Magento
عدِّل تنسيق تصميماتك وأضِف تعديلات الموارد preconnect أو dns-prefetch.