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