يسرد قسم "الفرص" في تقرير Lighthouse جميع الطلبات الرئيسية التي لم يتم بعد تحديد أولويتها لطلبات الجلب باستخدام <link rel=preconnect>:
توافُق المتصفح
<link rel=preconnect> متوافق مع معظم المتصفّحات. اطّلِع على
توافُق المتصفّح.
تحسين سرعة تحميل الصفحة باستخدام preconnect
يمكنك إضافة تعديلات المورد preconnect أو dns-prefetch لإنشاء اتصالات مبكرة بالمصادر المُهمّة التابعة لجهات خارجية.
تُعلم <link rel="preconnect"> المتصفّح بأنّ صفحتك تنوي إنشاء اتصال بمصدر آخر، وأنّك تريد بدء العملية في أقرب وقت ممكن.
غالبًا ما يستغرق إنشاء الاتصالات وقتًا طويلاً على الشبكات البطيئة، خاصةً عندما يتعلق الأمر بالاتصالات الآمنة، لأنّها قد تتضمّن عمليات بحث في نظام أسماء النطاقات (DNS)، عمليات إعادة توجيه، وعدة رحلات ذهاب وإياب إلى الخادم النهائي الذي يعالج طلب المستخدم.
يمكن أن يؤدي الاهتمام بكل ذلك مسبقًا إلى جعل تطبيقك يبدو أسرع بكثير للمستخدم بدون التأثير سلبًا في استخدام النطاق الترددي. يتم قضاء معظم الوقت في إنشاء اتصال في الانتظار، بدلاً من تبادل البيانات.
يمكنك إعلام المتصفّح بنيّتك ببساطة عن طريق إضافة علامة رابط إلى صفحتك:
<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.