على الرغم من أن هدف الجميع هو تقليل ميزانية أداء الويب، إلا أنه لا يزال من الضروري الاستفادة من خدمات الطرف الثالث. عند استخدام هذه الخدمات، "بحث DNS" يمكن أن تستهلك الأوقات جزءًا كبيرًا من الميزانية، اعتمادًا على عدد الخدمات. تؤثر هذه التحميلات على جوانب مختلفة من سرعة الصفحة، بما في ذلك First Contentful Paint (FCP).

الغرض من هذين المفهومين هو تحسين أوقات الاتصال لجهة خارجية. قبل فهم الاختلافات بين هذين المفهومين، من الضروري فهم ما يحدث بالضبط عند تقديم طلب من طرف ثالث:

  1. تم حل المجال للحصول على عنوان IP.
  2. تم تأسيس اتصال مع الخادم.
  3. يتم تشفير الاتصال لضمان الأمان.

يتم تكرار هذا التسلسل الهرمي لكل اتصال جهة خارجية. هذا هو المكان الذي يظهر فيه الفرق بين الاتصال المسبق والجلب المسبق لنظام أسماء النطاقات.

  • الاتصال المسبق: يضمن أن جميع الخطوات الثلاث المذكورة أعلاه تم تكوينها مسبقًا.
  • الجلب المسبق لنظام أسماء النطاقات: يعمل فقط على تحويل اسم المجال إلى عنوان IP في الخطوة الأولى.

كما ترى، يعد الاتصال المسبق أكثر شمولاً وإفادة. ومع ذلك، كل شيء يأتي بتكلفة. قد يؤثر استخدام الاتصال المسبق لجميع اتصالاتك سلبًا على تحسين صفحتك. لذلك، ذيجب عليك استخدام الاتصال المسبق فقط للاتصالات المهمة واستخدام الجلب المسبق لنظام أسماء النطاقات لجميع اتصالات الطرف الثالث الأخرى.

صورة 14.png
المصدر https://web.dev/preconnect-and-dns-prefetch/

ملخص الاستخدام

وبالنظر إلى المعلومات المذكورة أعلاه، إليك ملخص سريع لاستخدامها:

<link rel="preconnect" href="https://third-party-example.com">
<link rel="dns-prefetch" href="https://third-party-example.com">

التوافق المتصفح

أثناء مناقشة استخدامها، من المهم أيضًا الإشارة إلى توافق المتصفح. يتم دعم هذين المفهومين المرتبطين ارتباطًا وثيقًا على نطاق واسع بواسطة المتصفحات الحديثة، لكن استخدامهما لا يتداخل تمامًا. يتم دعم الاتصال المسبق بنسبة 97% تقريبًا من المتصفحات، في حين يتم دعم dns-prefetch بنسبة 83% من المتصفحات (اعتبارًا من يونيو 2024).

المساهمة في ميزانية أداء الويب

  • يمكن أن يوفر الاتصال المسبق تحسينًا إجماليًا للسرعة 100-500ms.
  • يمكن لـ DNS-Prefetch تسريع كل اتصال عن طريق 20-120ms.

ونحن نخطط لإجراء اختباراتنا الخاصة لتقديم أمثلة محلية أكثر إرضاءً.

أخيرًا، أود أن أوصي وأشيد بمدونة Ceyhun Enki Aksan، التي ساهمت بشكل كبير في فهمي أثناء إعداد هذه المقالة: مدونة سيهون إنكي أكسان.