تعرَّف على تعديلات الموارد 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) للصور، حيث يعتمد المسار الدقيق للصورة على الاستعلامات عن الوسائط أو عمليات التحقّق من ميزات بيئة التشغيل على متصفّح المستخدم.
في هذه الحالات، إذا كان المورد الذي ستجلبه مهمًا، تحتاج إلى توفير أكبر قدر ممكن من الوقت من خلال الاتصال المسبق بالخادم. ولن ينزِّل المتصفّح الملف إلى أن تطلبه صفحتك، ولكن على الأقل يمكنه معالجة جوانب الاتصال مسبقًا، ما يوفّر للمستخدم عدم الانتظار لإجراء عدّة عمليات نقل ذهاب وعودة.
وسائط البث
هناك مثال آخر على الوقت الذي قد تحتاج فيه إلى توفير بعض الوقت في مرحلة الاتصال، ولكن ليس بالضرورة بدء استرداد المحتوى على الفور، وهو بث الوسائط من مصدر مختلف.
تبعًا لطريقة تعامل صفحتك مع المحتوى الذي يتم بثه، قد تحتاج إلى الانتظار حتى يتم تحميل النصوص البرمجية وتصبح جاهزة لمعالجة البث. تساعدك الاتصال المسبق على تقليل وقت الانتظار إلى جولة ذهاب وعودة واحدة عندما تكون مستعدًا لبدء الجلب.
كيفية تنفيذ 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)، من الأفضل أن تكون الموارد قابلة للاكتشاف على الفور، لأنّ المحتوى المرشّح لسرعة عرض أكبر محتوى مرئي يشكّل جزءًا أساسيًا من تجربة المستخدم. يمكن أن تؤدي القيمة fetchpriority التي تبلغ "high" على موارد سرعة عرض أكبر محتوى مرئي (LCP) إلى تحسين ذلك بشكل أكبر من خلال الإشارة إلى أهمية مادة العرض هذه في المتصفّح لتتمكّن من جلبها مبكرًا.
عندما لا يكون من الممكن جعل مواد عرض LCP قابلة للاكتشاف على الفور، يسمح الرابط preload، الذي يحمل القيمة fetchpriority أيضًا بقيمة "high"، للمتصفح بتحميل المورد في أقرب وقت ممكن.
إذا لم يتوفّر أي من هذين الخيارين، لأنّ المورد المحدَّد لن يكون معروفًا إلا في وقت لاحق من تحميل الصفحة، يمكنك استخدام preconnect على الموارد ذات المصادر المشتركة للحد من تأثير الاكتشاف المتأخر للمورد قدر الإمكان.
بالإضافة إلى ذلك، إنّ preconnect أقل تكلفة من preload من حيث استخدام معدل نقل البيانات، ولكن لا تخلو من المخاطر. وكما هو الحال مع تلميحات preload الزائدة، ستظل تلميحات preconnect المفرطة تستهلك معدل نقل بيانات في ما يتعلق بشهادات بروتوكول أمان طبقة النقل (TLS). احرص على عدم الاتصال مسبقًا بعدد كبير جدًا من المصادر، حيث قد يؤدي ذلك إلى حدوث تعارض في معدل نقل البيانات.
الخاتمة
يُعدّ هذان التلميحان من الموارد مفيدان لتحسين سرعة الصفحة عندما تعلم أنّك ستنزّل قريبًا محتوى من نطاق تابع لجهة خارجية، ولكنّك لا تعرف عنوان URL الدقيق للمورد. وتشمل الأمثلة شبكات توصيل المحتوى (CDN) التي توزّع مكتبات JavaScript أو الصور أو الخطوط. ضَع في اعتبارك القيود، واستخدِم preconnect للموارد الأكثر أهمية فقط، واعتمد على dns-prefetch لباقي الموارد، وقِس تأثيرها دائمًا على أرض الواقع.