الاتصال المسبق بالمصادر المطلوبة

يسرد قسم "الفرص" في تقرير Lighthouse جميع الطلبات الرئيسية التي لم تمنح الأولوية لطلبات الجلب من خلال <link rel=preconnect> بعد:

لقطة شاشة لعملية ربط Lighthouse 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

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

Magento

عدِّل تنسيق المظاهر وأضِف الاتصال المسبق أو الجلب المسبق لنظام أسماء النطاقات في تلميحات الموارد.

المراجِع