في الوحدة الأخيرة حول تحسين تحميل الموارد، تعرّفت على كيفية تأثير موارد الصفحة المختلفة، مثل CSS وJavaScript، في سرعة تحميل الصفحة، وكيفية تحسينها وتحسين طريقة عرضها لتسريع عملية عرض الصفحة. هذا هو الوقت المناسب للانتقال إلى جانب أكثر تقدّمًا من عملية تحميل الموارد، وهو يتضمّن مساعدة المتصفّح على تحميلها بشكل أسرع باستخدام تلميحات الموارد.
يمكن أن تساعد إشارات الموارد المطوّرين في تحسين مدة تحميل الصفحة بشكل أكبر من خلال إعلام المتصفّح بكيفية تحميل الموارد وتحديد أولوياتها. كانت المجموعة الأولية من تلميحات الموارد، مثل preconnect وdns-prefetch، هي أول ما تم تقديمه.
بمرور الوقت، تم إطلاق preload وFetch Priority API لتوفير إمكانات إضافية.
توجّه تلميحات الموارد المتصفّح إلى تنفيذ إجراءات معيّنة مسبقًا يمكن أن تحسّن أداء التحميل. يمكن أن تنفّذ تلميحات الموارد إجراءات مثل إجراء عمليات بحث مبكرة عن نظام أسماء النطاقات، والاتصال بالخوادم مسبقًا، وحتى جلب الموارد قبل أن يكتشفها المتصفّح عادةً.
يمكن تحديد تلميحات الموارد في HTML، وغالبًا ما يتم ذلك في بداية العنصر <head>، أو ضبطها كعنوان HTTP. في نطاق هذه الوحدة، يتم تناول preconnect وdns-prefetch وpreload، بالإضافة إلى سلوكيات الجلب التخمينية التي توفّرها prefetch.
preconnect
يتم استخدام التلميح preconnect لإنشاء اتصال بمصدر آخر يتم منه جلب الموارد المهمة. على سبيل المثال، قد تستضيف صورك أو أصولك على شبكة توصيل محتوى أو مصدر آخر:
<link rel="preconnect" href="https://example.com">
باستخدام preconnect، تتوقّع أنّ المتصفّح سيخطّط للاتصال بخادم محدّد من مصادر متعددة في المستقبل القريب جدًا، وأنّ على المتصفّح فتح هذا الاتصال في أقرب وقت ممكن، ويفضّل أن يكون ذلك قبل انتظار محلّل HTML أو أداة فحص التحميل المُسبَق لإجراء ذلك.
إذا كان لديك عدد كبير من الموارد من مصادر متعددة على إحدى الصفحات، استخدِم preconnect
لتلك الموارد الأكثر أهمية للصفحة الحالية.
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" fetchpriority="high">
يجب أن تقتصر توجيهات preload على الموارد المهمة التي تم اكتشافها في وقت متأخر. تشمل حالات الاستخدام الأكثر شيوعًا ملفات الخطوط أو ملفات CSS التي يتم جلبها من خلال تصريحات @import، أو موارد CSS background-image التي من المحتمل أن تكون من المرشّحة لسرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) أو موارد LCP الأخرى التي لا يمكن اكتشافها في HTML الأولي (على سبيل المثال، إذا تم تحميلها بواسطة JavaScript). في مثل هذه الحالات، لن يتمكّن برنامج الفحص المسبق للتحميل من اكتشاف هذه الملفات لأنّ المرجع الخاص بالملف موجود في موارد خارجية.
على غرار 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؟
ما هي الإجراءات التي تتيح لك واجهة برمجة التطبيقات Fetch Priority API تنفيذها؟
<link> و<img> و<script>.
متى يجب استخدام التلميح prefetch؟
الموضوع التالي: أداء الصور
من المحتمل أنّك أصبحت الآن واثقًا من معرفتك
باعتبارات الأداء العامة عندما يتعلّق الأمر بصفحة HTML، والعنصر <head>، وتلميحات الموارد. ومع ذلك، هناك تحسينات إضافية خاصة بأنواع مختلفة من الموارد التي يتم تحميلها عادةً على الصفحات. في الوحدة التالية، سنتناول موضوع أداء الصور الذي يمكن أن يساعدك في تحميل صور موقعك الإلكتروني بأسرع ما يمكن بغض النظر عن الجهاز الذي يستخدمه الزائر.