عندما يحلّل المتصفّح صفحة ويب ويبدأ في اكتشاف الموارد وتنزيلها
مثل الصور أو النصوص البرمجية أو CSS، يتم تعيين رمز استرجاع priority له حتى يتمكّن من
تنزيلها بالترتيب الأمثل. تعتمد أولوية المورد عادةً على ما
هو ومكانه في الوثيقة. على سبيل المثال، قد تكون للصور في إطار العرض
أولوية High، والأولوية في صور CSS التي يتم تحميلها مبكرًا والتي تحظر العرض
باستخدام <link> في <head> قد تكون Very High. عادةً ما يعمل التعيين التلقائي للأولوية بشكل جيد، ولكن هناك حالات استخدام لا يكون فيها الترتيب المعين هو الأمثل.
تناقش هذه الصفحة واجهة برمجة التطبيقات Fetch Priority API وسمة HTML fetchpriority التي تساعدك على تحسين "مؤشرات أداء الويب الأساسية" من خلال السماح لك بالتلميح إلى الأولوية النسبية لأحد الموارد (high أو low).
ملخّص
في ما يلي بعض المجالات الرئيسية التي تساعد فيها أولوية الجلب:
- تعزيز أولوية صورة LCP من خلال تحديد
fetchpriority="high"على عنصر الصورة، ما يؤدي إلى حدوث سرعة LCP في وقت أقرب - زيادة أولوية النصوص البرمجية
asyncباستخدام دلالات أفضل من الاختراق الأكثر شيوعًا الحالي (إدراج<link rel="preload">للنصasync) - تقليل أولوية النصوص البرمجية المتأخرة لتسلسل الصور بشكل أفضل.
في السابق، كان للمطوّرين تأثير محدود في أولوية الموارد باستخدام التحميل المُسبق والاتصال المُسبَق. من خلال التحميل المُسبق، يمكنك إعلام المتصفّح بالموارد المهمة التي تريد تحميلها مبكرًا قبل أن يكتشفها المتصفّح بشكل طبيعي. يكون هذا مفيدًا بشكل خاص للموارد التي يصعب اكتشافها، مثل الخطوط المضمّنة في أوراق الأنماط أو صور الخلفية أو الموارد التي تم تحميلها من نص برمجي. يساعد الاتصال المسبق في إعداد الاتصالات بالخوادم المشتركة المصدر ويمكن أن يساعد في تحسين المقاييس مثل الوقت المستغرق حتى أول بايت. وهو مفيد عندما تعرف المصدر ولكن ليس بالضرورة عنوان URL الدقيق لمورد تحتاج إليه.
تكمل "أولوية الاسترجاع" تلميحات الموارد هذه.
وهو إشارة مستندة إلى الترميز تتوفّر من خلال السمة fetchpriority ويمكن
للمطوّرين استخدامها للإشارة إلى الأولوية النسبية لمورد معيّن.
يمكنك أيضًا استخدام هذه التلميحات من خلال JavaScript وجلب واجهة برمجة التطبيقات مع السمة priority للتأثير على أولوية عمليات جلب الموارد المخصّصة للبيانات. ويمكن أن تكمّل أولوية الاسترجاع
أيضًا التحميل المُسبق. التقِط صورة "سرعة عرض أكبر جزء من المحتوى على الصفحة" والتي ستكون لها أولوية منخفضة عند تحميلها مسبقًا. وإذا تم التراجع عن هذا الإجراء بسبب موارد أخرى ذات أولوية منخفضة، فإن استخدام أولوية الجلب يمكن أن يساعد في زيادة سرعة تحميل الصورة.
أولوية الموارد
يعتمد تسلسل تنزيل الموارد على الأولوية المعيّنة للمتصفح لكل مورد في الصفحة. تشمل العوامل التي يمكن أن تؤثر في منطق حساب الأولوية ما يلي:
- نوع المورد مثل CSS والخطوط والنصوص البرمجية والصور والموارد التابعة لجهة خارجية.
- تمثّل هذه السمة الموقع أو ترتيب المستند الذي يشير إلى الموارد.
- تمثّل هذه السمة تلميح المورد
preloadالذي يساعد المتصفّح في اكتشاف مورد بشكل أسرع وتحميله في وقت أبكر من السابق. - التغييرات الحاسوبية ذات الأولوية للنصوص البرمجية
asyncأوdefer
يوضِّح الجدول التالي كيفية إعطاء Chrome الأولوية لمعظم الموارد وترتيبها:
| التحميل في مرحلة حظر التنسيق | تحميل مرة واحدة في كل مرة في مرحلة حظر التنسيق | ||||
|---|---|---|---|---|---|
| أولوية الوميض |
VeryHigh | مرتفعة | متوسطة | منخفضة | VeryLow |
| أولوية أدوات مطوّري البرامج |
الأعلى | مرتفعة | متوسطة | منخفضة | الأدنى |
| المورد الرئيسي | |||||
| CSS (مبكر**) | CSS (متأخرة**) | CSS (عدم تطابق الوسائط***) | |||
| نص برمجي (مبكر** أو ليس من الماسح الضوئي للتحميل المُسبق) | النص البرمجي (متأخرًا**) | نص برمجي (غير متزامن) | |||
| الخط | الخط (rel=preload) | ||||
| استيراد | |||||
| صورة (في إطار العرض) | الصورة (أول 5 صور > 10,000 بكسل2) | صورة | |||
| الوسائط (فيديو/صوت) | |||||
| الجلب المُسبَق | |||||
| ملفات XSL | |||||
| XHR (مزامنة) | XHR/fetch* (غير متزامن) | ||||
ينزّل المتصفح الموارد التي لها نفس الأولوية المحسوبة بالترتيب الذي يتم اكتشافها به. يمكنك التحقّق من الأولوية المحدّدة لموارد مختلفة عند تحميل صفحة ضمن علامة التبويب شبكة "أدوات مطوّري البرامج في Chrome". (تأكد من تضمين عمود الأولوية عن طريق النقر بزر الماوس الأيمن فوق عناوين الجدول).
type = "font" على صفحة تفاصيل أخبار BBC
عند تغيير الأولويات، يمكنك الاطّلاع على الأولوية الأولية والنهائية في إعداد صفوف الطلبات الكبيرة أو في تلميح.
متى قد تحتاج إلى أولوية الجلب؟
الآن بعد أن فهمت منطق تحديد الأولويات في المتصفّح، يمكنك تعديل ترتيب التنزيل في صفحتك لتحسين أدائها ومؤشرات أداء الويب الأساسية. إليك بعض الأمثلة على الأشياء التي يمكنك تغييرها بدون استخدام أولوية الجلب:
- ضَع علامات الموارد مثل
<script>و<link>بالترتيب الذي تريد من المتصفِّح تنزيله. - استخدِم تلميح مورد
preloadلتنزيل الموارد الضرورية في وقت أبكر من السابق، خاصةً الموارد التي يصعُب على المتصفّح اكتشافها. - استخدِم
asyncأوdeferلتنزيل النصوص البرمجية بدون حظر موارد أخرى. - يمكنك التحميل الكسول للمحتوى في الجزء السفلي غير المرئي من الصفحة حتى يتمكّن المتصفّح من استخدام معدّل نقل البيانات المتاح للحصول على موارد أكثر أهمية في الجزء المرئي من الصفحة.
في ما يلي بعض الحالات الأكثر تعقيدًا التي تساعدك فيها أولوية الجلب في الحصول على ترتيب أولوية الموارد الذي تحتاج إليه:
- لديك العديد من الصور في الجزء المرئي من الصفحة، ولكن ليس لجميعها نفس الأولوية. على سبيل المثال، في لوحة العرض الدوّارة للصور، يجب تحديد أولوية أعلى فقط للصورة الأولى.
- تبدأ الصور الرئيسية داخل إطار العرض عادةً بأولوية
LowأوMedium. بعد اكتمال التخطيط، يكتشف Chrome أنهم في إطار العرض ويعزز أولويتهم. يؤدي ذلك عادةً إلى إضافة تأخير كبير في تحميل الصور. يؤدي توفير أولوية الجلب في الترميز إلى السماح للصورة بالبدء بأولوية "عالية" وبدء التحميل في وقت مبكر جدًا.
لا يزال التحميل المُسبق مطلوبًا لاكتشاف صور LCP المضمّنة كخلفيات CSS قبل إطلاقها. لتعزيز أولوية صور الخلفية، يمكنك تضمينfetchpriority='high'في عملية التحميل المُسبق. - في حال تعريف النصوص البرمجية بالرمز
asyncأوdefer، يتم تحميل المتصفِّح بشكل غير متزامن. ومع ذلك، وكما هو موضَّح في جدول الأولوية، يتم أيضًا تعيين أولوية "منخفضة" لهذه النصوص البرمجية. من الأفضل زيادة أولويتها مع ضمان التنزيل غير المتزامن، خاصةً بالنسبة إلى النصوص البرمجية المهمة لتجربة المستخدم. - إذا كنت تستخدم واجهة برمجة تطبيقات JavaScript
fetch()لجلب الموارد أو البيانات بشكل غير متزامن، سيمنحها المتصفح أولويةHigh. قد تحتاج إلى تنفيذ بعض عمليات الجلب بأولوية أقل، خاصةً إذا كنت تخلط بين طلبات البيانات من واجهة برمجة التطبيقات في الخلفية وطلبات البيانات من واجهة برمجة التطبيقات التي تستجيب لإدخال المستخدم. ضَع علامة على طلبات البيانات من واجهة برمجة التطبيقات للخلفية على أنّها ذات أولويةLow، وعلى طلبات البيانات من واجهة برمجة التطبيقات التفاعلية على أنّها ذات أولويةHigh. - يعيّن المتصفّح CSS والخطوط
High" priority، ولكن قد تكون بعض هذه الموارد أكثر أهمية من غيرها. يمكنك استخدام أولوية الجلب لخفض أولوية الموارد غير المهمة.
السمة fetchpriority
استخدِم سمة HTML fetchpriority لتحديد أولوية تنزيل أنواع الموارد، مثل CSS والخطوط والنصوص البرمجية والصور عند تنزيلها باستخدام العلامات link أو img أو script. يمكن أن يأخذ القيم التالية:
high: المورد ذو أولوية عالية، وتريد أن يعطي المتصفّح الأولوية له ما دامت الأساليب الإرشادية للمتصفّح لا تمنع حدوث ذلك.low: المورد ذو أولوية منخفضة، وتريد من المتصفح خفض ترتيبه إذا كانت أساليبه الإرشادية تسمح بذلك.auto: القيمة التلقائية التي تتيح للمتصفّح اختيار الأولوية المناسبة.
إليك بعض الأمثلة على استخدام السمة fetchpriority في الترميز، بالإضافة إلى سمة priority التي تعادل النص البرمجي.
<!-- We don't want a high priority for this above-the-fold image -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">
<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
<script>
fetch('https://example.com/', {priority: 'low'})
.then(data => {
// Trigger a low priority fetch
});
</script>
تأثيرات أولوية المتصفّح وfetchpriority
يمكنك تطبيق السمة fetchpriority على موارد مختلفة كما هو موضّح في الجدول التالي لزيادة الأولوية المحسوبة أو تقليلها.
يشير fetchpriority="auto" (MATCH) في كل صف إلى الأولوية التلقائية لهذا النوع من الموارد.
| التحميل في مرحلة حظر التنسيق | تحميل واحد تلو الآخر في مرحلة حظر التنسيق | ||||
|---|---|---|---|---|---|
| أولوية الوميض |
VeryHigh | مرتفعة | متوسطة | منخفضة | VeryLow |
| أولوية أدوات مطوّري البرامج |
الأعلى | مرتفعة | متوسطة | منخفضة | الأدنى |
| المورد الرئيسي | ◉ | ||||
| CSS (مبكر**) | ⬆◉ | ⬇ | |||
| CSS (متأخرة**) | ⬆ | ◉ | ⬇ | ||
| CSS (عدم تطابق الوسائط***) | ⬆*** | ◉⬇ | |||
| نص برمجي (مبكر** أو ليس من الماسح الضوئي للتحميل المُسبق) | ⬆◉ | ⬇ | |||
| النص البرمجي (متأخرًا**) | ⬆ | ◉ | ⬇ | ||
| النص البرمجي (غير متزامن/تأجيل) | ⬆ | ◉⬇ | |||
| الخط | ◉ | ||||
| الخط (rel=preload) | ⬆◉ | ⬇ | |||
| استيراد | ◉ | ||||
| صورة (في إطار العرض - بعد التنسيق) | ⬆◉ | ⬇ | |||
| الصورة (أول 5 صور > 10,000 بكسل2) | ⬆ | ◉ | ⬇ | ||
| صورة | ⬆ | ◉⬇ | |||
| الوسائط (فيديو/صوت) | ◉ | ||||
| XHR (مزامنة) - متوقّف نهائيًا | ◉ | ||||
| XHR/fetch* (غير متزامن) | ⬆◉ | ⬇ | |||
| الجلب المُسبَق | ◉ | ||||
| ملفات XSL | ◉ | ||||
تحدّد السمة fetchpriority الأولوية النسبية، ما يعني أنّها ترفع
الأولوية التلقائية أو تخفضها بمقدار مناسب، بدلاً من ضبط
الأولوية صراحةً على High أو Low. يؤدي ذلك غالبًا إلى أولوية High أو Low،
ولكن ليس دائمًا. على سبيل المثال، تحتفظ خدمة CSS المهمة ذات fetchpriority="high" بالأولوية "عالية جدًا"/"أعلى"، بينما يحتفظ استخدام fetchpriority="low" بهذه
العناصر بالأولوية "مرتفعة". ولا تتضمّن أي من هذه الحالات تحديد
الأولوية بشكل صريح إلى High أو Low.
حالات الاستخدام
استخدِم السمة fetchpriority عندما تريد منح المتصفّح تلميحًا إضافيًا
حول أولوية جلب مورد من خلاله.
زيادة أولوية صورة سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP)
ويمكنك تحديد السمة fetchpriority="high" لتعزيز أولوية سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) أو غيرها من الصور المهمة.
<img src="lcp-image.jpg" fetchpriority="high">
توضّح المقارنة التالية صفحة "رحلات جوية من Google" مع صورة خلفية LCP محمَّلة بأولوية الجلب أو بدونها. بعد ضبط الأولوية على "مرتفع"، تحسنت قيمة LCP من 2.6 إلى 1.9.
خفض أولوية صور الجزء المرئي من الصفحة
استخدِم "fetchpriority="low"" لتقليل أولوية الصور في الجزء المرئي من الصفحة التي
ليست مهمة على الفور، مثل لوحة العرض الدوّارة للصور.
<ul class="carousel">
<img src="img/carousel-1.jpg" fetchpriority="high">
<img src="img/carousel-2.jpg" fetchpriority="low">
<img src="img/carousel-3.jpg" fetchpriority="low">
<img src="img/carousel-4.jpg" fetchpriority="low">
</ul>
في تجربة سابقة مع تطبيق Oodle، استخدمنا هذه الطريقة لتقليل أولوية الصور التي لا تظهر عند التحميل. قلل من وقت تحميل الصفحة بمقدار ثانيتين
خفض أولوية الموارد التي تم تحميلها مُسبقًا
لمنع الموارد التي تم تحميلها مسبقًا من التنافس مع الموارد المهمة الأخرى، يمكنك تقليل أولويتها. استخدِم هذا الأسلوب مع الصور والنصوص البرمجية وCSS.
<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
<!-- Preload CSS without blocking other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">
إعادة ترتيب أولوية النصوص البرمجية
يجب أن تكون النصوص البرمجية التي يجب أن تكون تفاعلية في صفحتك لتحميلها سريعًا، ولكن يجب ألا تحظر موارد أخرى. يمكنك وضع علامة على هذه العناصر باعتبارها async بأولوية عالية.
<script src="async_but_important.js" async fetchpriority="high"></script>
لا يمكنك وضع علامة async على نص برمجي إذا كان يعتمد على حالات DOM محددة. ومع ذلك، إذا تم تشغيلها لاحقًا على الصفحة، يمكنك تحميلها بأولوية أقل:
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>
خفض أولوية عمليات استرجاع البيانات غير المهمة
ينفِّذ المتصفح fetch بأولوية عالية. إذا كانت لديك عمليات جلب متعددة قد يتم تنشيطها في وقت واحد، يمكنك استخدام الأولوية التلقائية العالية لعمليات جلب البيانات الأكثر أهمية وخفض أولوية البيانات الأقل أهمية.
// Important validation data (high by default)
let authenticate = await fetch('/user');
// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});
ملاحظات تنفيذ أولوية الجلب
في ما يلي بعض الأشياء التي يجب أن تكون على دراية بها عند استخدام أولوية الجلب:
- السمة
fetchpriorityهي تلميح وليس توجيهًا. ويحاول المتصفّح احترام تفضيل مطوّر البرامج، ولكن يمكنه أيضًا تطبيق الإعدادات المفضّلة لأولوية الموارد للحصول على أولوية الموارد لحل التعارضات. لا تخلط بين أولوية الجلب والتحميل المُسبق:
- إنّ عملية التحميل المُسبق هي جلب إلزامي، وهي وليست تلميحًا.
- يتيح التحميل المسبق للمتصفح اكتشاف مورد مبكرًا، ولكنه لا يزال يجلب المورد ذي الأولوية التلقائية. وفي الوقت نفسه، لا تساعد أولوية الجلب في قابلية الاكتشاف، ولكنها تتيح لك زيادة أولوية الجلب أو خفضها.
- من الأسهل ملاحظة وقياس تأثيرات التحميل المُسبق مقارنةً بآثار تغيير الأولوية.
ويمكن أن تكمّل أولوية الاسترجاع عمليات التحميل المُسبق عن طريق زيادة دقة تحديد الأولويات. إذا سبق لك تحديد تحميل مُسبَق كأحد العناصر الأولى في
<head>لصورة سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP)، قد لا تؤدي أولوية استرجاعhighإلى تحسين سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) بشكل كبير. ومع ذلك، إذا تم التحميل المُسبق بعد تحميل موارد أخرى، يمكن أن تحسّن أولوية استرجاعhighسرعة LCP بشكل أكبر. وإذا كانت الصورة المهمة عبارة عن صورة خلفية CSS، عليك تحميلها مسبقًا باستخدامfetchpriority = "high".تكون التحسينات في وقت التحميل الناتجة عن تحديد الأولويات أكثر صلة في البيئات التي تتنافس فيها المزيد من الموارد على معدل نقل البيانات المتاح للشبكة. يُعد هذا أمرًا شائعًا لاتصالات HTTP/1.x حيث لا يمكن إجراء عمليات تنزيل متوازية، أو عند اتصالات HTTP/2 بمعدل نقل بيانات منخفض. في هذه الحالات، يمكن أن يساعد تحديد الأولويات في حل المؤثِّرات السلبية.
لا تطبّق شبكات توصيل المحتوى (CDN) تحديد أولوية HTTP/2 بشكل موحّد. حتى إذا أرسل المتصفح الأولوية من أولوية الجلب، قد لا تعطي شبكة توصيل المحتوى (CDN) الأولوية للموارد بالترتيب المحدد. هذا يجعل من الصعب اختبار أولوية الجلب. يتم تطبيق الأولويات داخليًا داخل المتصفح وباستخدام البروتوكولات التي تدعم تحديد الأولويات (HTTP/2 وHTTP/3). لا يزال من المفيد استخدام أولوية الجلب لتحديد أولوية المتصفح الداخلي بشكل مستقل عن شبكة توصيل المحتوى (CDN) أو دعم المصدر، لأنّ الأولويات تتغير غالبًا عندما يطلب المتصفّح موارد. على سبيل المثال، غالبًا ما يتم منع الطلب من الموارد ذات الأولوية المنخفضة، مثل الصور، أثناء معالجة المتصفّح لعناصر
<head>المهمة.قد لا تتمكن من تقديم أولوية الجلب كأفضل ممارسة في تصميمك الأولي. لاحقًا في دورة التطوير، يمكنك تحديد الأولويات التي يتم تعيينها لموارد مختلفة على الصفحة، وإذا لم تتطابق مع توقعاتك، يمكنك تقديم أولوية الجلب لإجراء المزيد من التحسين.
نصائح لاستخدام عمليات التحميل المُسبق
يُرجى مراعاة ما يلي عند استخدام عمليات التحميل المُسبق:
- يؤدي تضمين تحميل مسبق في عناوين HTTP إلى وضعه قبل كل شيء آخر في ترتيب التحميل.
- بشكل عام، يتم تحميل التحميل المسبق بالترتيب الذي يصل إليه المحلل اللغوي لأي فئة أعلى من الأولوية "متوسطة". كن حذرًا إذا كنت تُدرج عمليات تحميل مُسبقة في بداية نص HTML.
- ومن المحتمل أن تعمل عمليات التحميل المُسبق للخط بشكل أفضل في نهاية الرأس أو بداية النص.
- يجب تنفيذ عمليات استيراد التحميل المسبق (مثل
import()أوmodulepreloadالديناميكية) بعد علامة النص البرمجي التي تحتاج إلى الاستيراد، لذا تأكَّد من تحميل النص البرمجي أو تحليله أولاً حتى يمكن تقييمه أثناء تحميل العناصر الاعتمادية. - تكون الأولوية التلقائية لعمليات التحميل المُسبق للصور "منخفضة" أو "متوسطة". رتِّبها وفقًا للنصوص البرمجية غير المتزامنة وغيرها من العلامات ذات الأولوية المنخفضة أو المنخفضة.
السجلّ
تمت تجربة "أولوية الجلب" لأول مرة في Chrome في عام 2018 كتجربة أصلية في عام 2018، ثم تم إجراؤها مرة أخرى في عام 2021 باستخدام السمة importance. في ذلك الوقت كان يُدعى
تلميحات الأولوية. تم تغيير الواجهة إلى fetchpriority لـ HTML وpriority لـ Fetch API لـ JavaScript كجزء من عملية معايير الويب. لتقليل الالتباس، نطلق الآن على
أولوية استرجاع واجهة برمجة التطبيقات هذه.