تعرف على تلميحات الموارد rel=preconnect وrel=dns-prefetch وكيفية استخدامها.
قبل أن يتمكن المتصفح من طلب مورد من خادم، يجب أن ينشئ اتصالاً. يتضمن إنشاء اتصال آمن ثلاث خطوات:
البحث عن اسم النطاق وتحويله إلى عنوان IP
يمكنك إعداد اتصال بالخادم.
تشفير الاتصال للحفاظ على الأمان
في كل خطوة من هذه الخطوات، يرسل المتصفح جزءًا من البيانات إلى أحد الخوادم، ويرسل الخادم استجابة مرة أخرى. وتُعرف هذه الرحلة، من نقطة الانطلاق إلى الوجهة والعودة، باسم رحلة ذهاب وعودة.
استنادًا إلى ظروف الشبكة، قد تستغرق عملية الذهاب والعودة مرة واحدة مقدارًا كبيرًا من الوقت. قد تتضمن عملية إعداد الربط ما يصل إلى ثلاث رحلات ذهاب وعودة، وأكثر من ذلك في الحالات غير المحسَّنة.
إنّ الاهتمام بكل ذلك مسبقًا يجعل التطبيقات تبدو أسرع. تشرح هذه المشاركة كيفية تحقيق ذلك من خلال تلميحَي مورد: <link rel=preconnect> و<link rel=dns-prefetch>.
بدء عمليات تواصل مبكرة مع "rel=preconnect"
إنّ المتصفحات الحديثة تبذل قصارى جهدها لتوقّع الاتصالات التي ستحتاجها الصفحة، ولكن لا يمكنها توقّع كل هذه الروابط بشكل موثوق. والخبر السار هو أنّه يمكنك تقديم تلميح (المرجع هونغ).
إنّ إضافة rel=preconnect إلى <link> تُعلم المتصفّح بأنّ صفحتك تنوي إنشاء اتصال بنطاق آخر، وأنّك تريد بدء العملية في أقرب وقت ممكن. سيتم تحميل الموارد بشكل أسرع لأن عملية الإعداد قد اكتملت بالفعل بحلول الوقت الذي يطلبها المتصفح.
تمت تسمية تلميحات الموارد باسمها لأنها ليست تعليمات إلزامية. وهي توفر المعلومات حول ما تريد تنفيذه، ولكن الأمر متروك للمتصفح ليقرر ما إذا كان سيتم تنفيذه أم لا. يتطلب إعداد الاتصال وإبقاءه مفتوحًا الكثير من العمل، لذا قد يختار المتصفّح تجاهل تلميحات الموارد أو تنفيذها جزئيًا حسب الموقف.
يمكنك ببساطة إعلام المتصفّح بالغرض من ذلك، تمامًا مثل إضافة علامة <link> إلى صفحتك:
<link rel="preconnect" href="https://example.com">
يمكنك تسريع وقت التحميل بمقدار 100 إلى 500 ملي ثانية من خلال إنشاء اتصالات مبكرة بمصادر مهمة تابعة لجهات خارجية. قد تبدو هذه الأرقام صغيرة، ولكنها تُحدث فرقًا في إدراك المستخدمين لأداء صفحة الويب.
حالات استخدام rel=preconnect
معرفة المكان من، وليس المكان الذي تجلبه
بسبب التبعيات ذات الإصدارات، ينتهي بك الأمر أحيانًا في موقف تعرف فيه أنك ستطلب موردًا من شبكة توصيل محتوى (CDN) معينة، ولكن ليس المسار الدقيق له.
أما الحالة الشائعة الأخرى، فهي تحميل الصور من شبكة توصيل المحتوى (CDN) الخاصة بالصورة، حيث يعتمد المسار الدقيق للصورة على طلبات البحث عن الوسائط أو عمليات التحقّق من ميزات وقت التشغيل على متصفّح المستخدم.
في هذه الحالات، إذا كان المورد الذي ستجلبه مهمًا، فأنت تريد توفير أكبر قدر ممكن من الوقت من خلال الاتصال المسبق بالخادم. لن يقوم المتصفح بتنزيل الملف حتى تطلبه صفحتك، ولكن على الأقل يمكنه التعامل مع جوانب الاتصال مسبقًا، مما يوفر للمستخدم من الانتظار لعدة رحلات ذهاب وعودة.
وسائط البث
يمكن مثلاً توفير بعض الوقت في مرحلة الربط، ولكن ليس بالضرورة بدء استرداد المحتوى فورًا، وهو بث الوسائط من مصدر مختلف.
واستنادًا إلى كيفية تعامل صفحتك مع المحتوى الذي يتم بثه، قد تحتاج إلى الانتظار إلى أن يتم تحميل النصوص البرمجية وتكون جاهزة لمعالجة البث. يساعدك الاتصال المسبق على تقليل وقت الانتظار إلى رحلة ذهاب وعودة واحدة عندما تكون مستعدًا لبدء الجلب.
كيفية تنفيذ rel=preconnect
هناك طريقة لبدء استخدام preconnect وهي إضافة علامة <link> إلى <head> من المستند.
<head>
<link rel="preconnect" href="https://example.com">
</head>
لا يكون الاتصال المُسبَق فعّالاً إلا للنطاقات الأخرى غير نطاق المصدر، لذا يجب ألّا تستخدمه لموقعك الإلكتروني.
يمكنك أيضًا بدء اتصال مسبق عبر عنوان HTTP يتضمّن العلامة Link:
Link: <https://example.com/>; rel=preconnect
يتم تحميل بعض أنواع الموارد، مثل الخطوط، في الوضع المجهول. بالنسبة إلى هذه السمات، يجب ضبط السمة crossorigin باستخدام التلميح preconnect:
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
إذا حذفت السمة crossorigin، لن يُجري المتصفّح سوى بحث نظام أسماء النطاقات.
حلّ مشكلة اسم النطاق مبكرًا باستخدام rel=dns-prefetch
أنت تتذكر المواقع بأسمائها، لكن الخوادم تتذكرها حسب عناوين IP. وهذا هو سبب وجود نظام أسماء النطاقات (DNS). يستخدم المتصفّح نظام أسماء النطاقات لتحويل اسم الموقع الإلكتروني إلى عنوان IP. هذه العملية – تحليل اسم النطاق – هي الخطوة الأولى في إنشاء الاتصال.
إذا كانت الصفحة بحاجة إلى إجراء عمليات ربط بالعديد من النطاقات التابعة لجهات خارجية، سيؤدي ربط جميع هذه النطاقات مسبقًا إلى نتائج عكسية. يمكن استخدام التلميح preconnect على أفضل نحو لإجراء الاتصالات الأكثر أهمية فقط. بالنسبة إلى باقي الخطوات، يمكنك استخدام <link rel=dns-prefetch> لتوفير الوقت في الخطوة الأولى، وهي "بحث نظام أسماء النطاقات"، والذي يستغرق عادةً حوالي 20 إلى 120 ملي ثانية.
يتم بدء التحويل باستخدام نظام أسماء النطاقات (DNS) مثل preconnect: من خلال إضافة علامة <link> إلى <head> في المستند.
<link rel="dns-prefetch" href="http://example.com">
تختلف توافق المتصفِّح مع dns-prefetch قليلاً عن preconnect دعم، لذا يمكن أن يعمل dns-prefetch كإجراء احتياطي للمتصفّحات التي لا تتوافق مع preconnect.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">لتنفيذ الأسلوب الاحتياطي بأمان، استخدِم علامات روابط منفصلة.
<link rel="preconnect dns-prefetch" href="http://example.com">يؤدي تنفيذ الإجراء الاحتياطي
dns-prefetch في العلامة <link> نفسها إلى حدوث خطأ في Safari يتم فيه إلغاء preconnect.
التأثير في سرعة عرض أكبر محتوى مرئي (LCP)
إنّ استخدام الترميزَين dns-prefetch وpreconnect يسمحان للمواقع الإلكترونية بتقليل الوقت الذي يستغرقه الاتصال بمصدر آخر. الهدف النهائي هو أنه يجب تقليل الوقت اللازم لتحميل مورد من مصدر آخر قدر الإمكان.
في حال معنى سرعة عرض أكبر محتوى مرئي (LCP)، من الأفضل أن تكون الموارد قابلة للاكتشاف على الفور، لأنّ المرشّحين لسرعة عرض أكبر محتوى مرئي (LCP) هم جزء مهم من تجربة المستخدم. ويمكن أن تحسّن قيمة fetchpriority "high" على موارد سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) من خلال الإشارة إلى مدى أهمية مادة العرض هذه للمتصفِّح حتى يتمكّن من جلبها مبكرًا.
عندما لا يكون من الممكن جعل مواد عرض LCP قابلة للاكتشاف فورًا، يظل رابط preload يسمح للمتصفِّح بتحميل المورد في أقرب وقت ممكن، أي أيضًا بقيمة fetchpriority."high"
إذا لم يكُن أي من هذه الخيارات متاحًا، لأن المورد الدقيق لن يكون معروفًا إلا في وقت لاحق من تحميل الصفحة، يمكنك استخدام preconnect في الموارد المشتركة المصدر للحدّ قدر الإمكان من تأثير الاكتشاف المتأخر للمورد.
بالإضافة إلى ذلك، فإنّ preconnect أقل تكلفة من preload من حيث استخدام معدل نقل البيانات، ولكنها لا تزال بدون مخاطر. كما هو الحال مع تلميحات preload الزائدة، لا تزال تلميحات preconnect تستهلك معدل نقل البيانات في ما يتعلّق بشهادات بروتوكول أمان طبقة النقل (TLS). يجب عدم الاتصال مسبقًا بعدد كبير جدًا من المصادر، لأنّ ذلك قد يؤدي إلى زيادة معدّل نقل البيانات.
الخلاصة
يساعد تلميحا الموارد هذان في تحسين سرعة الصفحة عندما تعرف أنك ستنزّل ملفًا من نطاق تابع لجهة خارجية قريبًا، ولكنك لا تعرف عنوان URL الدقيق للمورد. وتشمل الأمثلة شبكات توصيل المحتوى (CDN) التي توزّع مكتبات JavaScript أو الصور أو الخطوط. ضَع في اعتبارك القيود، واستخدِم preconnect فقط للموارد الأكثر أهمية، واعتمد على dns-prefetch في بقية الموارد، وقِس دائمًا تأثير ذلك على أرض الواقع.