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

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

	التحميل في مرحلة حظر التنسيق		تحميل كل عنصر على حدة في مرحلة حظر التنسيق
Blink الأولوية	VeryHigh	مرتفعة	الوسيط	منخفضة	VeryLow
DevTools الأولوية	أعلى	مرتفعة	الوسيط	منخفضة	الأدنى
	المرجع الرئيسي
	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.
يمنح المتصفّح الأولوية High لتنسيق CSS والخطوط، ولكن قد تكون بعض هذه الموارد أكثر أهمية من غيرها. يمكنك استخدام أولوية الجلب لتقليل أولوية الموارد غير المهمة (تجدر الإشارة إلى أن 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 الأولوية	أعلى	مرتفعة	الوسيط	منخفضة	الأدنى
المورد الرئيسي	◉
CSS (مبكر**)	⬆◉	⬇
CSS (متأخر**)		⬆	◉	⬇
CSS (عدم تطابق الوسائط***)		⬆***			◉⬇
النص البرمجي (مبكر** أو ليس من الماسح الضوئي للتحميل المسبق)		⬆◉		⬇
النص البرمجي (وقت متأخر**)		⬆	◉	⬇
نص برمجي (غير متزامن/مُؤجَّل)		⬆		◉⬇
الخط	◉
الخط (rel=preload)		⬆◉		⬇
استيراد		◉
الصورة (في إطار العرض - بعد التنسيق)		⬆◉		⬇
صورة (أول 5 صور > 10,000 بكسل 2)		⬆	◉	⬇
صورة		⬆		◉⬇
الوسائط (فيديو/صوت)				◉
XHR (المزامنة) - متوقف	◉
XHR/fetch* (غير متزامن)		⬆◉		⬇
الجلب المُسبَق					◉
XSL		◉

ملاحظات:
* عند استخدام "as" أو fetch مع "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 لواجهة برمجة التطبيقات Fetch API في JavaScript كجزء من عملية معايير الويب. للحد من الالتباس، نسمي الآن "أولوية جلب واجهة برمجة التطبيقات" هذه.

الخاتمة

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