مساعدة المتصفح من خلال تلميحات الموارد

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

يمكن أن تساعد إشارات الموارد المطوّرين في تحسين مدة تحميل الصفحة من خلال إعلام المتصفّح بكيفية تحميل الموارد وتحديد أولوياتها. كانت المجموعة الأولية من تلميحات الموارد، مثل preconnect وdns-prefetch، هي أول ما تم تقديمه. بمرور الوقت، تم إطلاق preload وFetch Priority API لتوفير إمكانات إضافية.

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

يمكن تحديد تلميحات الموارد في HTML، وغالبًا ما يتم ذلك في بداية العنصر <head>، أو ضبطها كعنوان HTTP. في نطاق هذه الوحدة، يتم تناول preconnect وdns-prefetch وpreload، بالإضافة إلى سلوكيات الجلب التخمينية التي توفّرها prefetch.

preconnect

يتم استخدام تلميح preconnect لإنشاء اتصال بمصدر آخر يتم منه جلب الموارد المهمة. على سبيل المثال، قد تستضيف صورك أو أصولك على شبكة توصيل محتوى (CDN) أو مصدر آخر:

<link rel="preconnect" href="https://example.com">

باستخدام preconnect، تتوقّع أنّ المتصفّح يخطّط للاتصال بخادم محدّد من مصادر متعددة في المستقبل القريب جدًا، وأنّ على المتصفّح فتح هذا الاتصال في أقرب وقت ممكن، ويفضّل أن يكون ذلك قبل انتظار محلّل HTML أو أداة فحص التحميل المُسبَق لإجراء ذلك.

إذا كان لديك عدد كبير من الموارد من مصادر متعددة على إحدى الصفحات، استخدِم preconnect لتلك الموارد الأكثر أهمية للصفحة الحالية.

لقطة شاشة لتوقيتات الاتصال بأحد الموارد في لوحة الشبكة ضمن &quot;أدوات مطوّري البرامج في Chrome&quot; يتضمّن إعداد الاتصال وقت التوقف المؤقت والتفاوض على الخادم الوكيل والبحث عن نظام أسماء النطاقات وإعداد الاتصال والتفاوض على بروتوكول أمان طبقة النقل (TLS).
تمثيل مرئي لتوقيتات الاتصال كما تظهر في لوحة الشبكة ضمن &quot;أدوات مطوّري البرامج في Chrome&quot;. إنّ التوقيتات الواردة في المربّع الأحمر هي تلك المتعلّقة بإعداد اتصال بخادم من مصادر متعددة، ويمكن أن تخفّف preconnect من حدّتها من خلال إنشاء الاتصالات في وقت أقرب، بدلاً من وقت اكتشاف المورد من مصادر متعددة.

حالة الاستخدام الشائعة لـ preconnect هي Google Fonts. تنصح Google Fonts بأن preconnect إلى نطاق https://fonts.googleapis.com الذي يعرض بيانات @font-face وإلى نطاق https://fonts.gstatic.com الذي يعرض ملفات الخطوط.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

تُستخدَم السمة crossorigin للإشارة إلى ما إذا كان يجب جلب مورد باستخدام مشاركة الموارد المتعدّدة المصادر (CORS). عند استخدام التلميح preconnect، إذا كان المورد الذي يتم تنزيله من المصدر يستخدم CORS، مثل ملفات الخطوط، عليك إضافة السمة crossorigin إلى التلميح preconnect.

dns-prefetch

مع أنّ فتح الاتصالات بخوادم من مصادر متعددة في وقت مبكر يمكن أن يحسّن بشكل كبير وقت تحميل الصفحة الأولي، قد لا يكون من المعقول أو الممكن إنشاء اتصالات بخوادم متعددة من مصادر متعددة في وقت واحد. إذا كنت قلقًا بشأن الإفراط في استخدام preconnect، يمكنك استخدام تلميح الموارد dns-prefetch الذي يكون أقل تكلفة.

كما يشير الاسم، لا تنشئ dns-prefetch اتصالاً بخادم من مصادر متعددة، بل تجري فقط بحث نظام أسماء النطاقات مسبقًا. تحدث عملية البحث في نظام أسماء النطاقات عندما يتم تحويل اسم نطاق إلى عنوان IP الأساسي. على الرغم من أنّ طبقات ذاكرة التخزين المؤقت لنظام أسماء النطاقات على مستوى الجهاز والشبكة تساعد في جعل هذه العملية سريعة بشكل عام، إلا أنّها تستغرق بعض الوقت.

<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

عمليات البحث عن نظام أسماء النطاقات غير مكلفة نسبيًا، وبسبب تكلفتها المنخفضة نسبيًا، قد تكون أداة أكثر ملاءمة في بعض الحالات من preconnect. على وجه الخصوص، قد يكون تلميح الموارد هذا مفيدًا في حالات الروابط التي تنقل إلى مواقع إلكترونية أخرى يُرجّح أن ينقر عليها المستخدم. dnstradamus هي إحدى الأدوات التي تنفّذ ذلك تلقائيًا باستخدام JavaScript، وتستخدِم Intersection Observer API لإدراج تلميحات dns-prefetch في رمز HTML الخاص بالصفحة الحالية عندما يتم الانتقال إلى روابط تؤدي إلى مواقع إلكترونية أخرى في إطار عرض المستخدم.

preload

يُستخدم التوجيه preload لبدء طلب مبكر لمورد مطلوب لعرض الصفحة:

<link rel="preload" href="/lcp-image.jpg" as="image">

يجب أن تقتصر توجيهات preload على الموارد المهمة التي تم اكتشافها في وقت متأخر. تشمل حالات الاستخدام الأكثر شيوعًا ملفات الخطوط أو ملفات CSS التي يتم جلبها من خلال تعريفات @import ، أو موارد CSS background-image التي من المحتمل أن تكون من العناصر المرشّحة لسرعة عرض أكبر جزء من المحتوى على الصفحة (LCP). في مثل هذه الحالات، لن يتمكّن برنامج الفحص المسبق للتحميل من العثور على هذه الملفات لأنّ المرجع الخاص بالمورد يكون ضمن موارد خارجية.

على غرار preconnect، يتطلّب التوجيه preload السمة crossorigin إذا كنت بصدد التحميل المسبق لمورد CORS، مثل الخطوط. إذا لم تضِف السمة crossorigin أو أضفتها لطلبات غير متوافقة مع CORS، سيتم تنزيل المرجع مرّتين من خلال المتصفّح، ما يؤدي إلى إهدار النطاق الترددي الذي كان من الممكن استخدامه بشكل أفضل مع مراجع أخرى.

<link rel="preload" href="/font.woff2" as="font" crossorigin>

في مقتطف HTML السابق، يتم توجيه المتصفّح إلى التحميل المُسبَق /font.woff2 باستخدام طلب CORS، حتى إذا كان /font.woff2 على النطاق نفسه.

prefetch

يتم استخدام التوجيه prefetch لبدء طلب منخفض الأولوية لمورد من المحتمل استخدامه في عمليات التنقّل المستقبلية:

<link rel="prefetch" href="/next-page.css" as="style">

يتّبع هذا التوجيه إلى حد كبير التنسيق نفسه الذي يتّبعه التوجيه preload، ولكن تستخدم السمة rel الخاصة بالعنصر <link> القيمة "prefetch" بدلاً من ذلك. على عكس التوجيه preload، فإنّ التوجيه prefetch هو إلى حد كبير توجيه تخميني، إذ إنّك تبدأ عملية جلب مورد لعملية تنقّل مستقبلية قد تحدث أو لا تحدث.

في بعض الأحيان، يمكن أن تكون prefetch مفيدة، مثلاً إذا حدّدت مسار مستخدم على موقعك الإلكتروني يتّبعه معظم المستخدمين حتى إكماله، يمكن أن تساعد prefetch لمورد مهم في العرض لتلك الصفحات المستقبلية في تقليل أوقات التحميل.

Fetch Priority API

يمكنك استخدام Fetch Priority API من خلال السمة fetchpriority لزيادة أولوية أحد الموارد. يمكنك استخدام السمة مع العناصر <link> و<img> و<script>.

<div class="gallery">
  <div class="poster">
    <img src="img/poster-1.jpg" fetchpriority="high">
  </div>
  <div class="thumbnails">
    <img src="img/thumbnail-2.jpg" fetchpriority="low">
    <img src="img/thumbnail-3.jpg" fetchpriority="low">
    <img src="img/thumbnail-4.jpg" fetchpriority="low">
  </div>
</div>

يتم تلقائيًا جلب الصور بأولوية أقل. بعد تحديد التنسيق، إذا تبيّن أنّ الصورة تقع ضمن إطار العرض الأولي، يتم رفع مستوى الأولوية إلى أولوية عالية. في مقتطف HTML السابق، يطلب fetchpriority من المتصفّح على الفور تنزيل صورة LCP الأكبر حجمًا بأولوية عالية، بينما يتم تنزيل الصور المصغّرة الأقل أهميةً بأولوية أقل.

تحمّل المتصفّحات الحديثة الموارد على مرحلتَين. المرحلة الأولى مخصّصة للموارد المهمة وتنتهي بعد تنزيل جميع النصوص البرمجية التي تحظر العرض وتنفيذها. خلال هذه المرحلة، قد يتأخر تنزيل موارد الأولوية المنخفضة. باستخدام fetchpriority="high"، يمكنك زيادة أولوية أحد الموارد، ما يتيح للمتصفّح تنزيله خلال المرحلة الأولى.

عروض توضيحية حول تلميحات الموارد

اختبِر معلوماتك

ما هي وظيفة تلميح المورد preconnect؟

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

ما هي الإجراءات التي تتيح لك واجهة برمجة التطبيقات Fetch Priority API تنفيذها؟

حدِّد الأولوية النسبية للعناصر <link> و<img> و<script>.
تحديد الأولوية التي يتم بها تنزيل ملف HTML الخاص بالصفحة الحالية

متى يجب استخدام تلميح prefetch؟

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

الموضوع التالي: أداء الصور

من المحتمل أنّك أصبحت الآن واثقًا من معرفتك باعتبارات الأداء العامة عندما يتعلّق الأمر بصفحة HTML، والعنصر <head>، وتلميحات الموارد. ومع ذلك، هناك تحسينات إضافية خاصة بأنواع مختلفة من الموارد التي يتم تحميلها عادةً على الصفحات. في الوحدة التالية، سنتناول موضوع أداء الصور الذي يمكن أن يساعدك في تحميل صور موقعك الإلكتروني بأسرع ما يمكن، بغض النظر عن الجهاز الذي يستخدمه الزائر.