تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

تحسين تحميل الموارد باستخدام Fetch Priority API

تشير واجهة برمجة التطبيقات Fetch Priority API إلى الأولوية النسبية للموارد بالنسبة إلى المتصفّح. وبإمكانه تفعيل التحميل الأمثل وتحسين "مؤشرات أداء الويب الأساسية".

Addy Osmani

Leena Sohoni

Patrick Meenan

Barry Pollard

دعم المتصفح

المصدر

عندما يحلّل المتصفّح صفحة ويب ويبدأ في اكتشاف الموارد وتنزيلها، مثل الصور أو النصوص البرمجية أو صفحات الأنماط المتتالية (CSS)، يحدّد لها priority عملية جلب حتى يتمكّن من تنزيلها بالترتيب الأمثل. تعتمد أولوية المورد عادةً على ما هو عليه ومكانه في المستند. على سبيل المثال، قد تحظى الصور ضمن إطار العرض بالأولوية High، وقد تكون أولوية خدمة CSS التي يتم تحميلها قبل إطلاقها والتي تحظر العرض باستخدام <link> في <head> هي Very High. المتصفحات جيدة جدًا في تعيين الأولويات التي تعمل بشكل جيد ولكنها قد لا تكون مثالية في جميع الحالات.

تناقش هذه الصفحة واجهة برمجة التطبيقات Fetch Priority API وسمة HTML fetchpriority التي تتيح لك تعديل معلومات الأولوية النسبية لأحد الموارد (high أو low). يمكن أن تساعدك ميزة "أولوية الجلب" على تحسين "مؤشرات أداء الويب الأساسية".

ملخّص

في ما يلي بعض النواحي الرئيسية التي يمكن أن تساعدك فيها ميزة "أولوية الجلب":

تحسين أولوية صورة LCP من خلال تحديد fetchpriority="high" في عنصر الصورة، ما يؤدي إلى حدوث سرعة LCP في وقت أقرب
زيادة أولوية نصوص async البرمجية باستخدام دلالات أفضل من الاختراق الأكثر شيوعًا حاليًا (إدراج <link rel="preload"> للنص البرمجي async)
تقليل أولوية النصوص البرمجية ذات النص المتأخر للسماح بتسلسل أفضل مع الصور.

عرض في شريط الصور يقارن بين اختبارَين لصفحة "رحلات جوية من Google" الرئيسية في الجزء السفلي، يتم استخدام أولوية الجلب لتعزيز أولوية الصورة الرئيسية، ما يؤدي إلى تقليل سرعة عرض أكبر جزء من المحتوى على الصفحة بمقدار 0.7 ثانية. — يمكنك جلب أولوية تحسين "سرعة عرض أكبر محتوى مرئي" من 2.6 ثانية إلى 1.9 ثانية في اختبار "رحلات جوية من Google".

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

تكمل أولوية الجلب هذه تلميحات الموارد هذه. إنّها إشارة تستند إلى الترميز وتتوفّر من خلال السمة fetchpriority ويمكن للمطوّرين استخدامها للإشارة إلى الأولوية النسبية لمورد معيّن. يمكنك أيضًا استخدام هذه التلميحات من خلال JavaScript وواجهة برمجة تطبيقات الجلب من خلال السمة priority للتأثير في أولوية عمليات جلب الموارد المخصّصة للبيانات. يمكن أيضًا لأولوية الجلب أن تكمل عملية التحميل المُسبق. التقِط صورة "سرعة عرض أكبر محتوى مرئي" التي ستظل تحظى بأولوية منخفضة عند تحميلها مسبقًا. وإذا رفضت مصادر أخرى ذات أولوية منخفضة، يمكن أن يساعد استخدام أولوية الجلب في زيادة سرعة تحميل الصورة.

أولوية المورد

يعتمد تسلسل تنزيل الموارد على الأولوية المعينة للمتصفح كل مورد على الصفحة. العوامل التي يمكن أن تؤثر في حساب الأولوية ما يلي:

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

يوضّح الجدول التالي كيفية تحديد Chrome حسب الأولوية وتسلسل معظم الموارد:

مثال على كيفية قراءة هذا الجدول:

تكون خدمة مقارنة الأسعار المبكرة (مثل CSS في <head>) هي highest تلقائيًا وتحظر التنسيق.
لا تحظر لغة CSS المتأخّرة (مثل CSS في منتصف <body>) التنسيق الأوّلي. ولا يتم تحميل جميع هذه المتصفحات عندما يكون المتصفّح في مرحلة حظر التخطيط هذه، وبدلاً من ذلك يتم تحميله واحدًا تلو الآخر مع موارد أخرى إلى أن يترك المتصفح مرحلة حظر التصميم كي يتمكّن المتصفّح من التركيز على موارد أكثر أهمية.
يتم تحميل صفحات الأنماط المتتالية (CSS) غير المطابقة (مثل أوراق الأنماط media="print" عند تحميل الصفحة على شاشة ولا تتم طباعتها) باستخدام أولوية lowest.

هناك المزيد من التفسيرات في الحواشي السفلية للجدول.

	التحميل في مرحلة حظر التنسيق		تحميل مرة واحدة في مرحلة حظر التنسيق
أولوية الوميض	VeryHigh	مرتفعة	الوسيط	منخفضة	VeryLow
DevTools Priority	الأعلى	مرتفعة	الوسيط	منخفضة	الأدنى
	المرجع الرئيسي
	CSS (مبكر**)		CSS (وقت متأخر**)		CSS (عدم تطابق الوسائط***)
		النص البرمجي (مبكر** أو ليس من الماسح الضوئي للتحميل المسبق)	النص البرمجي (وقت متأخر**)	نص برمجي (غير متزامن)
	الخط	الخط (rel=preload)
		استيراد
		الصورة (في إطار العرض)	صورة (أول 5 صور > 10,000 بكسل 2)	صورة
				الوسائط (فيديو/صوت)
					الجلب المُسبَق
		XSL
	XHR (المزامنة)	XHR/fetch* (غير متزامن)

ملاحظات:
* تستخدم عمليات التحميل المُسبق التي تستخدم "as" أو الجلب من خلال "destination" محددة أولوية الوجهة التي تطلبها. على سبيل المثال، تستخدِم ميزة "التحميل المُسبق" as="style" الأولوية القصوى. في حال عدم توفّر وجهة واضحة، تُعطى الأولوية للاسترجاع مثل طلب XHR غير متزامن.
** "مبكر" على أنه مطلوب قبل طلب أي صور غير محمّلة مسبقًا، و"متأخر" هو بعد طلب صور غير محمّلة مسبقًا.
*** لا يجلب "الماسح الضوئي للتحميل المسبق" لغة CSS التي لا يتطابق فيها نوع الوسائط، ولا تتم معالجتها إلا عند وصول المحلل اللغوي الرئيسي إليها، ما يعني عادةً أنّه يتم جلبها في وقت متأخر جدًا.

تبدأ الصور من "منخفضة" حسب الأولوية افتراضيًا. في وقت التنسيق، يتم تحسين الصور داخل إطار العرض إلى "عالية". بدءًا من الإصدار 117 من Chrome، تم ضبط أول 5 صور كبيرة على "متوسطة". لتسريع هذه العملية، ويمكن استرجاع اثنين منهما بالتوازي أثناء "وضع الإغلاق" الأولي. من خلال وضع علامة على الصور المهمة في الترميز باستخدام fetchpriority="high"، يمكن أن تبدأ الصور من "مرتفع". على الفور وسيتم تحميلها بشكل أسرع بكثير.

يُنزِّل المتصفّح الموارد بنفس الأولوية المحسوبة بالترتيب الذي يتم اكتشافها به. يمكنك التحقّق من الأولوية المعيّنة لموارد مختلفة عند تحميل إحدى الصفحات ضمن علامة التبويب الشبكة ضمن "أدوات مطوري البرامج في Chrome". (تأكَّد من تضمين عمود الأولوية من خلال النقر بزر الماوس الأيمن على عناوين الجدول ووضع علامة في المربّع).

علامة التبويب "الشبكة" في "أدوات مطوري البرامج" في Chrome تتضمن عددًا من موارد الخطوط كلها ذات أولوية قصوى. — أولوية المورد `type = "font"` على صفحة تفاصيل أخبار BBC

علامة التبويب "الشبكة" في "أدوات مطوري البرامج" في Chrome تتضمن عددًا من موارد الخطوط هما مزيج من الأولوية المنخفضة والعالية. — الأولوية للمورد `type = "script"` على صفحة تفاصيل أخبار BBC.

عندما تتغيّر الأولويات، يمكنك رؤية كلّ من الأولوية الأولية والنهائية في إعداد صفوف الطلبات الكبيرة أو في تلميح.

علامة التبويب "الشبكة" في "أدوات مطوري البرامج" في Chrome. "صفوف الطلبات الكبيرة" وضع علامة على الإعداد ويعرض عمود الأولوية الصورة الأولى لها أولوية عالية، وأولوية أولية مختلفة للمتوسط أدناه. ويظهر الشيء نفسه في التلميح. — التغييرات التي تطرأ على الأولوية في "أدوات مطوري البرامج"

متى قد تحتاج إلى أولوية الجلب؟

الآن بعد أن فهمت منطق تحديد الأولويات في المتصفح، يمكنك إجراء تعديلات على ترتيب تنزيل الصفحة لتحسين أدائها ومؤشرات أداء الويب الأساسية. وإليك بعض الأمثلة على الأشياء التي يمكنك تغييرها للتأثير في أولوية تنزيلات الموارد:

ضَع علامات الموارد، مثل <script> و<link>، بالترتيب الذي تريد أن ينزّلها المتصفّح. يتم بشكل عام تحميل الموارد ذات الأولوية نفسها بالترتيب الذي يتم اكتشافها به.
استخدِم تلميح المورد preload لتنزيل الموارد الضرورية في وقت مبكر، لا سيما للموارد التي لا يسهل على المتصفّح اكتشافها مبكرًا.
يمكنك استخدام async أو defer لتنزيل النصوص البرمجية بدون حظر الموارد الأخرى.
التحميل الكسول لمحتوى الجزء السفلي غير المرئي من الصفحة ليتمكّن المتصفّح من استخدام معدّل نقل البيانات المتاح للحصول على موارد الجزء المرئي من الصفحة الأكثر أهمية

تساعد هذه الأساليب في التحكّم في احتساب أولوية المتصفّح، ما يؤدي إلى تحسين الأداء ومؤشرات أداء الويب الأساسية. على سبيل المثال، عند تحميل صورة خلفية مهمة بشكل مسبق، يمكن اكتشافها في وقت أبكر من ذلك، ما يؤدي إلى تحسين سرعة عرض أكبر محتوى مرئي (LCP).

وفي بعض الأحيان، قد لا تكون هذه الأسماء المعرِّفة كافية لتحديد أولوية الموارد على النحو الأمثل لتطبيقك. في ما يلي بعض السيناريوهات التي تكون فيها أولوية الجلب مفيدة:

لديك العديد من الصور في الجزء المرئي من الصفحة، ولكن ليس لجميعها الأولوية نفسها. على سبيل المثال، في العرض الدوار للصور، تحتاج أول صورة مرئية فقط إلى أولوية أعلى، ويمكن ضبط الصور الأخرى، التي عادةً ما تكون خارج الشاشة في البداية، لتكون ذات أولوية أقل.
تبدأ الصور داخل إطار العرض عادةً عند أولوية Low. بعد اكتمال التنسيق، يكتشف Chrome أنها في إطار العرض ويعزز أولويتها. يضيف هذا عادةً تأخيرًا كبيرًا إلى تحميل الصور المهمة، مثل صور الجزء الرئيسي. يؤدي توفير "أولوية الجلب" في الترميز إلى السماح ببدء الصورة عند أولوية High وبدء التحميل مبكرًا بكثير. وفي محاولة لأتمتة هذا الأمر إلى حد ما، تم ضبط أول خمس صور أكبر حجمًا على أولوية Medium من قِبل Chrome، ما يساعد في حل هذه المشكلة، إلا أنّ صورة fetchpriority="high" الواضحة ستكون أفضل.

لا يزال من الضروري استخدام ميزة "التحميل المُسبق" لرصد صور LCP المُضمَّنة كخلفيات CSS قبل إطلاقها. لتحسين صور الخلفية الأولوية، يمكنك تضمين fetchpriority='high' في عملية التحميل المُسبق.
إنّ تعريف النصوص البرمجية كـ async أو defer يطلب من المتصفّح تحميلها بشكل غير متزامن. ومع ذلك، وكما هو موضح في جدول الأولوية، يتم أيضًا تعيين قيمة "منخفضة" لهذه النصوص البرمجية. الأولوية. وقد ترغب في زيادة أولويتها مع ضمان التنزيل غير المتزامن، خاصةً للنصوص البرمجية المهمة لتجربة المستخدم.
في حال استخدام واجهة برمجة تطبيقات JavaScript fetch() لجلب الموارد أو البيانات بشكل غير متزامن، يحدِّدها المتصفّح أولوية High. قد تحتاج إلى تنفيذ بعض عمليات الجلب بأولوية أقل، خاصةً في حال مزج طلبات البيانات من واجهة برمجة التطبيقات في الخلفية مع طلبات البيانات من واجهة برمجة التطبيقات التي تستجيب لإدخال المستخدم. ضَع علامة على طلبات البيانات من واجهة برمجة التطبيقات التي تعمل في الخلفية على أنّها ذات أولوية Low وعلى طلبات البيانات من واجهة برمجة التطبيقات التفاعلية كأولوية High.
يعيّن المتصفّح لغة CSS والخطوط على أولوية High، ولكن قد تكون بعض هذه الموارد أكثر أهمية من غيرها. يمكنك استخدام "أولوية الجلب" لتقليل أولوية الموارد غير المهمة (تجدر الإشارة إلى أن CSS المبكر هو حظر العرض، لذا يجب أن تكون الأولوية High عادةً).

السمة `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"" ( التحكُّم). (متاح أيضًا كمستند Google).

	التحميل في مرحلة حظر التنسيق		تحميل واحد تلو الآخر في مرحلة حظر التصميم
أولوية الوميض	VeryHigh	مرتفعة	الوسيط	منخفضة	VeryLow
DevTools Priority	الأعلى	مرتفعة	الوسيط	منخفضة	الأدنى
المورد الرئيسي	◉
CSS (مبكر**)	⬆◉	⬇
CSS (وقت متأخر**)		⬆	◉	⬇
CSS (عدم تطابق الوسائط***)		⬆***			◉⬇
النص البرمجي (مبكر** أو ليس من الماسح الضوئي للتحميل المسبق)		⬆◉		⬇
النص البرمجي (وقت متأخر**)		⬆	◉	⬇
نص برمجي (غير متزامن/تأجيل)		⬆		◉⬇
الخط	◉
الخط (rel=preload)		⬆◉		⬇
استيراد		◉
الصورة (في إطار العرض - بعد التنسيق)		⬆◉		⬇
صورة (أول 5 صور > 10,000 بكسل 2)		⬆	◉	⬇
صورة		⬆		◉⬇
الوسائط (فيديو/صوت)				◉
XHR (المزامنة) - متوقف	◉
XHR/fetch* (غير متزامن)		⬆◉		⬇
الجلب المُسبَق					◉
XSL		◉

ملاحظات:
* يستخدم التحميل المُسبق باستخدام "as" أو الجلب باستخدام "destination" محدّدة أولوية الوجهة التي يطلبها. على سبيل المثال، سيستخدم التحميل المُسبق للسمة as="style" الأولوية القصوى. بدون تحديد هدف صريح، ستُعطى الأولوية لعملية الجلب مثل XHR غير متزامن.
** "مبكر" على أنّه مطلوب قبل طلب أي صور غير محمَّلة مسبقًا ("الموعد المتأخّر" بعدها).
*** لا يجلب "الماسح الضوئي للتحميل المسبق" CSS التي لا يتطابق فيها نوع الوسائط، ولا تتم معالجتها إلا عند وصول المحلل اللغوي الرئيسي إليها، ما يعني عادةً أنّه سيتم استرجاعها في وقت متأخر جدًا، حتى مع fetchpriority="high".

تبدأ الصور تلقائيًا من "منخفض" الأولوية ثم يتم رفعها في وقت التنسيق إلى "مرتفع" إذا كانت داخل إطار العرض. بدءًا من الإصدار 117 من Chrome، تم ضبط أول 5 صور كبيرة على "متوسطة". لتسريع هذه العملية ويمكن جلب اثنين منها بالتوازي أثناء "وضع الإغلاق" الأولي. من خلال وضع علامة على الصور المهمة في الترميز باستخدام fetchpriority="high"، يمكن أن تبدأ الصور من "مرتفع". على الفور وسيتم تحميلها بشكل أسرع بكثير.

تحدِّد 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 ثانية.

تم إجراء تجربة باستخدام العاملين في Cloudflare لإعادة كتابة صفحة "رحلات جوية من Google" باستخدام أولوية الجلب.

خفض أولوية صور الجزء المرئي من الصفحة

استخدِم 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>

على الرغم من أنّ الصور من 2 إلى 4 ستكون خارج إطار العرض، قد يتم اعتبارها "قريبة بما يكفي" لزيادة ظهورها إلى high وتحميلها أيضًا حتى إذا تمّت إضافة سمة load=lazy. وبالتالي، فإنّ fetchpriority="low" هو الحل الصحيح لهذه المشكلة.

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

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

تقليل أولوية الموارد المُحمَّلة مسبقًا

لمنع الموارد التي تم تحميلها مسبقًا من منافسة الموارد المهمة الأخرى، يمكنك تقليل أولويتها. استخدِم هذا الأسلوب مع الصور والنصوص البرمجية وCSS.

<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" as="script" href="non-critical-script.js" fetchpriority="low">

<!-- Preload CSS without blocking render, or 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>

سيؤدي ذلك إلى حظر المحلل اللغوي عند وصوله إلى هذا النص البرمجي، مع السماح بمنح الأولوية للمحتوى قبل ذلك.

إذا احتجت إلى نموذج DOM المكتمل، يمكنك استخدام السمة defer (التي يتم تشغيلها بالترتيب بعد DOMContentLoaded) أو حتى async في أسفل الصفحة.

خفض أولوية عمليات استرجاع البيانات غير المهمة

ينفِّذ المتصفّح 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 أو HTTP/3 ذات النطاق الترددي المنخفض. في هذه الحالات، يمكن أن يساعد تحديد الأولويات في حل المعوقات.
لا تطبّق شبكات توصيل المحتوى (CDN) أولويات HTTP/2 بشكل موحّد، وبشكل مشابه مع HTTP/3. وحتى إذا كان المتصفح ينقل الأولوية من أولوية الجلب، قد لا تعيد شبكة توصيل المحتوى تحديد أولويات الموارد بالترتيب المحدد. وهذا يجعل اختبار أولوية الجلب أمرًا صعبًا. يتم تطبيق الأولويات داخليًا ضمن المتصفح وباستخدام بروتوكولات تتيح تحديد الأولويات (HTTP/2 وHTTP/3). ومع ذلك، لا يزال من المفيد استخدام أولوية الجلب فقط لتحديد أولويات المتصفّح الداخلي بشكل مستقل عن شبكة توصيل المحتوى (CDN) أو دعم المصدر، لأنّ الأولويات غالبًا ما تتغير عندما يطلب المتصفّح موارد. على سبيل المثال، غالبًا ما لا يتم طلب الموارد ذات الأولوية المنخفضة، مثل الصور، بينما يعالج المتصفّح عناصر <head> المهمة.
قد لا تتمكن من تقديم أولوية الجلب كأفضل ممارسة في التصميم الأولي. في وقت لاحق من دورة التطوير، يمكنك تحديد الأولويات التي يتم تعيينها لموارد مختلفة في الصفحة، وإذا لم تتطابق مع توقعاتك، يمكنك تحديد أولوية الجلب للحصول على مزيد من التحسين.

على المطوّرين استخدام ميزة التحميل المُسبَق لأغراضها المقصودة، أي التحميل المُسبق للموارد التي لم يرصدها المحلل اللغوي (الخطوط وعمليات الاستيراد وصور LCP الخلفية). سيؤثر موضع تلميح preload في وقت تحميل المورد مسبقًا.

تتعلق أولوية الاسترجاع بكيفية استرجاع المورد عند استرجاعه.

نصائح لاستخدام عمليات التحميل المُسبق

يجب مراعاة ما يلي عند استخدام عمليات التحميل المُسبق:

يؤدي تضمين التحميل المسبق في عناوين HTTP إلى وضعها قبل كل شيء آخر في ترتيب التحميل.
بشكل عام، يتم تحميل عمليات التحميل المُسبقة حسب ترتيب وصول المحلل اللغوي إليها لأي شيء ذي أولوية Medium أو أعلى. يجب توخّي الحذر عند تضمين عمليات التحميل المُسبق في بداية محتوى HTML.
من المحتمل أن تعمل عمليات التحميل المُسبق للخط على نحو أفضل في نهاية الرأس أو بدايته.
يجب تنفيذ عمليات الاستيراد المُسبقة (import() الديناميكية أو modulepreload) بعد علامة النص البرمجي التي تحتاج إلى الاستيراد، لذا تأكَّد من تحميل النص البرمجي أو تحليله أولاً حتى يمكن تقييمه أثناء تحميل ملحقاته.
يكون لعمليات التحميل المُسبق للصور أولوية Low أو Medium بشكل تلقائي. رتِّبها بالنسبة إلى النصوص البرمجية غير المتزامنة وغيرها من العلامات ذات الأولوية المنخفضة أو الأدنى.

السجلّ

تم تجربة ميزة "أولوية الجلب" لأول مرة في Chrome كميزة تجريبية أصلية في عام 2018، ثم تمت تجربتها مرة أخرى في عام 2021 باستخدام السمة importance. وكان يُطلق عليها في ذلك الوقت تلميحات الأولوية. ومنذ ذلك الحين، تم تغيير الواجهة إلى fetchpriority لكل من HTML وpriority لواجهة برمجة تطبيقات الجلب في JavaScript كجزء من عملية معايير الويب. للحد من الالتباس، نسمي الآن "أولوية جلب واجهة برمجة التطبيقات" هذه.

الخاتمة

من المرجّح أن يهتم المطوّرون بأولوية الجلب مع الإصلاحات في سلوك التحميل المُسبق والتركيز مؤخرًا على "مؤشرات أداء الويب الأساسية" و"سرعة عرض أكبر محتوى مرئي". وتحتوي الآن على مقابض مقابض إضافية متاحة لتحقيق تسلسل التحميل المفضّل.