تشير واجهة برمجة تطبيقات أولوية الجلب إلى الأولوية النسبية للموارد إلى المتصفّح. ويمكن أن يتيح لك ذلك تحميل البيانات بشكل مثالي وتحسين "مؤشرات أداء الويب الأساسية".
عندما يحلّل المتصفّح صفحة ويب ويبدأ في اكتشاف الموارد وتنزيلها، مثل الصور أو النصوص البرمجية أو CSS، يعيّن أمر استرجاع priority له لمحاولة تنزيل الموارد بالترتيب الأمثل. يمكن أن تعتمد هذه الأولويات على نوع المورد ومكانه في المستند. على سبيل المثال، قد تكون للصور في إطار العرض أولوية High، بينما قد تكون أولوية تحميل CSS التي تم تحميلها مبكرًا وحظر العرض عبر <link> في <head> هي Very High. المتصفّحات جيدة إلى حدّ كبير في تحديد الأولويات التي تعمل بشكل جيد، ولكنها قد لا تكون الأفضل في جميع الحالات.
في هذه المقالة، سنناقش واجهة برمجة تطبيقات أولوية الجلب وسمة HTML fetchpriority، والتي تتيح لك إضافة تلميح إلى الأولوية النسبية لأحد الموارد (high أو low). ويمكن أن تساعد أولوية الجلب في تحسين "مؤشرات أداء الويب الأساسية".
ملخّص
في ما يلي بعض المجالات الرئيسية التي تساعد فيها أولوية الجلب:
- يمكنك تعزيز أولوية صورة LCP من خلال تحديد
fetchpriority="high"على عنصر الصورة، ما يؤدي إلى حدوث سرعة LCP في وقت أقرب. - يمكنك زيادة أولوية
asyncنصوص برمجية باستخدام دلالات أفضل من الاختراق الحالي المستخدَم بشكل شائع (إدراج<link rel="preload">للنص البرمجيasync). - يمكنك تقليل أولوية النصوص البرمجية الأخيرة من أجل توفير تسلسل أفضل للصور.
في السابق، كان للمطوّرين بعض التأثير، غير أنّه محدود، على أولوية الموارد باستخدام التحميل المُسبَق والاتصال المُسبَق. تكمل أولوية الاسترجاع تلميحات الموارد هذه، ولكن من الضروري معرفة المكان المناسب لها جميعًا. من خلال التحميل المُسبق، يمكنك إعلام المتصفّح بالموارد المهمة التي تريد تحميلها في وقت مبكر قبل أن يتم اكتشافها بشكل طبيعي. وهذا مفيد بشكل خاص للموارد التي لا يمكن اكتشافها بسهولة، مثل الخطوط المضمّنة في أوراق الأنماط أو صور الخلفية أو الموارد التي تم تحميلها من نص برمجي. يساعد الاتصال المُسبَق في إعداد الاتصالات بالخوادم المشتركة المصدر ويمكن أن يساعد في تحسين المقاييس، مثل Time-to-first-byte، وهو مفيد إذا كنت تعرف مصدرًا ولكن ليس بالضرورة عنوان URL الدقيق لمورد المطلوب.
"أولوية الاسترجاع" هي إشارة مستندة إلى الترميز (متوفّرة من خلال السمة fetchpriority) يمكن للمطوّرين استخدامها للإشارة إلى الأولوية النسبية لمورد معيّن. يمكنك أيضًا استخدام هذه التلميحات عبر JavaScript وجلب واجهة برمجة التطبيقات باستخدام السمة priority للتأثير في أولوية عمليات استرجاع الموارد المخصّصة للبيانات. ويمكن لأولوية الاسترجاع أيضًا أن تكمل التحميل المُسبق. التقِط صورة "سرعة عرض أكبر محتوى مرئي" على الصورة، وسيتم منحها أولوية منخفضة عند تحميلها مُسبقًا. وإذا تم التراجع عن هذا الإجراء بسبب موارد أخرى ذات أولوية منخفضة، قد يساعد استخدام "أولوية الاسترجاع" في زيادة سرعة تحميل الصورة.
أولوية الجلب متاحة في الإصدار 101 من Chrome أو الإصدارات الأحدث.
أولوية الموارد
يعتمد تسلسل تنزيل الموارد على الأولوية المعيّنة في المتصفّح لكل مورد على الصفحة. يمكن أن تؤثر العوامل المختلفة في منطق حساب الأولوية. على سبيل المثال:
- يتم تحديد أولويات مختلفة لكل من 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لتنزيل النصوص البرمجية بدون حظر موارد أخرى. - يمكنك التحميل الكسول للمحتوى في الجزء السفلي غير المرئي من الصفحة حتى يتمكّن المتصفِّح من استخدام معدل نقل البيانات المتاح لنقل الموارد الأكثر أهمية في الجزء المرئي من الصفحة.
وتساعد هذه الأساليب في التحكّم في طريقة احتساب أولوية المتصفّح، ما يؤدّي إلى تحسين الأداء ومؤشرات أداء الويب الأساسية. على سبيل المثال، عند تحميل صورة خلفية مهمة مسبقًا، يمكن اكتشافها في وقت أبكر من السابق، ما يؤدي إلى تحسين سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP).
وفي بعض الأحيان، قد لا تكون هذه الأسماء المعرِّفة كافية لتحديد أولوية الموارد بشكل مثالي لتطبيقك. في ما يلي بعض السيناريوهات التي قد تكون فيها أولوية الجلب مفيدة:
- لديك العديد من الصور في الجزء المرئي من الصفحة، ولكن جميعها ليس بالضرورة نفس الأولوية. على سبيل المثال، في لوحة العرض الدوّارة للصور، تحتاج أول صورة مرئية فقط إلى أولوية أعلى مقارنةً بالصور الأخرى.
- عادةً ما تبدأ الصور الرئيسية داخل إطار العرض بأولوية "منخفضة" (لاحظ أن التغيير في Chrome 117 يضبط أول خمس صور كبيرة على "متوسطة" ولكن هذا قد يتضمن أو لا يتضمن صورة الجزء الرئيسي). بعد اكتمال التنسيق، يكتشف Chrome أنّها تظهر في إطار العرض ويعزّز أولويتها. ويؤدي ذلك عادةً إلى تأخير كبير في تحميل الصورة. يتيح توفير أولوية الجلب في الترميز إمكانية بدء الصورة بأولوية "عالية" وبدء تحميلها قبل ذلك بكثير.
يُرجى العلم أن التحميل المسبق لا يزال مطلوبًا لاكتشاف صور LCP المضمّنة كخلفيات CSS قبل إطلاقها، ويمكن دمجها مع أولوية الاسترجاع من خلال تضمينfetchpriority='high'في التحميل المسبق، وإلا فإنها ستظل تبدأ بأولوية "منخفضة" أو "متوسطة" للصور. - في حال تعريف النصوص البرمجية بالرمز
asyncأوdefer، يجب أن يحمِّلها المتصفِّح بشكل غير متزامن. ومع ذلك، وكما هو موضَّح في الجدول السابق، يتم أيضًا ضبط أولوية "منخفضة" لهذه النصوص البرمجية. قد تحتاج إلى زيادة مستوى أولويتها مع ضمان التنزيل غير المتزامن، خاصةً بالنسبة إلى أي نصوص برمجية ضرورية لتجربة المستخدم. - يمكنك استخدام واجهة برمجة تطبيقات
fetch()JavaScript لجلب الموارد أو البيانات بشكل غير متزامن. يعيّن المتصفح أولوية "عالية" لأداة الجلب. قد تكون هناك مواقف لا تريد فيها تنفيذ جميع عمليات الجلب بأولوية "عالية" وتفضل استخدام أولوية استرجاع مختلفة بدلاً من ذلك. ويمكن أن يكون ذلك مفيدًا عند تنفيذ طلبات البيانات من واجهة برمجة التطبيقات في الخلفية ومزجها مع طلبات البيانات من واجهة برمجة التطبيقات التي تستجيب للبيانات التي أدخلها المستخدم، مثل ميزة الإكمال التلقائي. ويمكن وضع علامة على طلبات البيانات من واجهة برمجة التطبيقات للخلفية على أنّها ذات أولوية "منخفضة"، بينما يتم وضع علامة "عالية" على طلبات البيانات من واجهة برمجة التطبيقات التفاعلية على أنّها ذات أولوية "عالية". - ويحدّد المتصفّح أولوية "عالية" لصفحات CSS والخطوط، ولكن قد لا تكون جميع هذه الموارد مطلوبة بنفس القدر من الأهمية أو المطلوبة لمقياس LCP. يمكنك استخدام أولوية الجلب لخفض أولوية بعض هذه الموارد.
السمة fetchpriority
يمكنك تقديم أولوية الجلب باستخدام سمة HTML fetchpriority. يمكنك استخدام السمة مع العلامات link وimg وscript. تتيح لك السمة تحديد أولوية أنواع الموارد، مثل CSS والخطوط والنصوص البرمجية والصور عند تنزيلها باستخدام العلامات المتوافقة.
تقبل السمة fetchpriority إحدى القيم الثلاث التالية:
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) في كل صف إلى الأولوية التلقائية لهذا النوع من الموارد (متاح أيضًا كمستند Google).
| التحميل في مرحلة حظر التنسيق | تحميل مرة واحدة في كل مرة في مرحلة حظر التنسيق | ||||
|---|---|---|---|---|---|
| أولوية الوميض |
VeryHigh | مرتفعة | متوسطة | منخفضة | VeryLow |
| أولوية أدوات مطوّري البرامج |
الأعلى | مرتفعة | متوسطة | منخفضة | الأدنى |
| المورد الرئيسي | ◉ | ||||
| CSS (مبكر**) | ⬆◉ | ⬇ | |||
| CSS (متأخرة**) | ⬆ | ◉ | ⬇ | ||
| CSS (عدم تطابق الوسائط***) | ⬆*** | ◉⬇ | |||
| نص برمجي (مبكر** أو ليس من الماسح الضوئي للتحميل المُسبق) | ⬆◉ | ⬇ | |||
| النص البرمجي (متأخرًا**) | ⬆ | ◉ | ⬇ | ||
| النص البرمجي (غير متزامن/تأجيل) | ⬆ | ◉⬇ | |||
| الخط | ◉ | ||||
| الخط (rel=preload) | ⬆◉ | ⬇ | |||
| استيراد | ◉ | ||||
| صورة (في إطار العرض - بعد التنسيق) | ⬆◉ | ⬇ | |||
| الصورة (أول 5 صور > 10,000 بكسل2) | ⬆ | ◉ | ⬇ | ||
| صورة | ⬆ | ◉⬇ | |||
| الوسائط (فيديو/صوت) | ◉ | ||||
| XHR (مزامنة) - متوقّف نهائيًا | ◉ | ||||
| XHR/fetch* (غير متزامن) | ⬆◉ | ⬇ | |||
| الجلب المُسبَق | ◉ | ||||
| ملفات XSL | ◉ | ||||
تجدر الإشارة إلى أنّ fetchpriority يضبط الأولوية النسبية، أي أنّها ترفع الأولوية التلقائية أو تخفضها بمقدار مناسب، بدلاً من ضبطها بشكلٍ صريح على "عالية" أو "منخفضة"، ويحدِّد المتصفِّح الأولوية النسبية. وغالبًا ما يكون ذلك "مرتفعًا" أو "منخفضًا"، ولكن ليس دائمًا. على سبيل المثال، سوف تحتفظ خدمة مقارنة الأسعار (CSS) المهمة التي تستخدم fetchpriority="high" بالأولوية "عالية جدًا"/"أعلى" وسيظل استخدام fetchpriority="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'">
إعادة ترتيب أولوية النصوص البرمجية
النصوص البرمجية المطلوبة لجعل بعض أجزاء الصفحة تفاعلية ضرورية ولكن يجب ألا تحظر الموارد الأخرى. يمكنك وضع علامة على هذه العناصر كغير متزامنة ذات أولوية عالية.
<script src="async_but_important.js" async fetchpriority="high"></script>
لا يمكن وضع علامة على النصوص البرمجية على أنها غير متزامنة إذا كانت تعتمد على حالات 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إلى تحقيق مكاسب كبيرة. ومع ذلك، إذا كان التحميل المُسبق بعد موارد أخرى، يمكن أن تحسّن أولوية الجلبhighمن سرعة LCP. إذا كانت إحدى الصور المهمة هي صورة خلفية CSS، يجب تحميلها مسبقًا باستخدامfetchpriority = "high".ستكون المكاسب الملحوظة الناتجة عن تحديد الأولويات أكثر صلة بالبيئات التي تتطلب فيها المزيد من الموارد معدل نقل بيانات الشبكة المتاح. هذا أمر شائع لاتصالات HTTP/1.x حيث لا يكون من الممكن إجراء عمليات تنزيل متوازية أو في اتصالات HTTP/2 بمعدل نقل بيانات منخفض. يمكن أن يؤدي تحديد الأولويات إلى حل المؤثِّرات السلبية في هذه الظروف.
لا تنفّذ شبكات توصيل المحتوى (CDN) تحديد أولوية HTTP/2 بشكل موحّد. حتى إذا كان المتصفح ينقل الأولوية المقترحة باستخدام أولوية الجلب، فقد لا تعطي شبكة توصيل المحتوى (CDN) الأولوية للموارد بالترتيب المطلوب. وهذا يجعل اختبار أولوية الجلب أمرًا صعبًا. يتم تطبيق الأولويات داخليًا في المتصفِّح وباستخدام البروتوكولات التي تتيح تحديد الأولويات (HTTP/2 وHTTP/3). ننصحك باستخدامها حتى لو لمجرد تحديد أولوية المتصفّح الداخلي بشكل مستقل عن شبكة توصيل المحتوى (CDN) أو دعم المصدر، لأنّ ذلك سيتغير غالبًا عندما يطلب المتصفّح الموارد. على سبيل المثال، غالبًا ما يتم منع طلب الموارد ذات الأولوية المنخفضة، مثل الصور، أثناء معالجة المتصفِّح لعناصر
<head>المهمة.قد لا يكون من الممكن تقديم أولوية الجلب كأفضل ممارسة في تصميمك الأولي. وهو تحسين يمكنك تطبيقه لاحقًا في دورة التطوير. يمكنك التحقق من الأولويات التي تم تعيينها لموارد مختلفة في الصفحة، وإذا لم تتطابق مع توقعاتك، فيمكنك إدخال أولوية الجلب لإجراء مزيد من التحسين.
استخدام ميزة "التحميل المُسبق" بعد Chrome 95
كانت ميزة "أولوية الاسترجاع" متاحة للفترة التجريبية في إصدارات Chrome من 73 إلى 76، ولكن لم يتم إصدارها بسبب مشاكل تحديد الأولويات المتعلّقة بعمليات التحميل المُسبق التي تم إصلاحها في الإصدار 95 من Chrome. قبل الإصدار 95 من Chrome، كانت الطلبات الصادرة عبر <link rel=preload> تبدأ دائمًا قبل الطلبات الأخرى التي يطّلع عليها فاحص التحميل المُسبق، حتى إذا كانت الطلبات الأخرى لها أولوية أعلى.
بعد إصلاح المشكلة في Chrome 95 وتحسين أولوية الجلب، نأمل أن يبدأ المطوّرون في استخدام التحميل المُسبق للغرض المحدَّد له، وهو تحميل الموارد التي لم يرصدها المحلل اللغوي مسبقًا (الخطوط وعمليات الاستيراد وصور LCP في الخلفية). سيتأثر موضع التلميح preload عند تحميل المورد مُسبقًا. وفي ما يلي بعض النقاط الرئيسية لاستخدام التحميل المُسبق:
- سيؤدي تضمين التحميل المسبق في عناوين HTTP إلى التقدُّم في جميع الأشياء الأخرى.
- بشكل عام، سيتم تحميل عمليات التحميل المسبق بالترتيب الذي يصل إليها المحلل اللغوي لأي شيء أعلى من الأولوية "متوسطة"، لذا كن حذرًا إذا كنت تضمّن عمليات تحميل مسبقة في بداية HTML.
- ومن المرجح أن تعمل عمليات التحميل المُسبق للخط بشكل أفضل باتجاه نهاية الرأس أو بداية النص.
- يجب أن يتم استيراد عمليات التحميل المُسبَقة (
import()أوmodulepreloadالديناميكية) بعد علامة النص البرمجي التي تحتاج إلى الاستيراد (حتى يتم تحميل/تحليل النص البرمجي الفعلي أولاً). بشكل أساسي، إذا حمّلت علامة النص البرمجي نصًا برمجيًا سيؤدي إلى تحميل التبعيات، تأكَّد من أن علامة<link rel=preload>للتبعيات تأتي بعد علامة النص البرمجي الرئيسية، وإلا قد ينتهي تحميل التبعيات قبل النص البرمجي الرئيسي. وبالترتيب الصحيح، يمكن تحليل/تقييم النص البرمجي الرئيسي أثناء تحميل التبعيات. - تكون لعمليات التحميل المُسبق للصور أولوية "منخفضة" أو "متوسطة" (بدون أولوية الجلب) ويجب ترتيبها حسب النصوص البرمجية غير المتزامنة وغيرها من العلامات ذات الأولوية المنخفضة أو المنخفضة.
السجلّ
تم تجربة "أولوية الجلب" لأول مرة في Chrome كتجربة أصلية في عام 2018، ثم مجددًا في عام 2021 باستخدام السمة importance. وكانت تُعرف باسم تلميحات الأولوية في ذلك الوقت. تم تغيير الواجهة إلى fetchpriority لـ HTML وpriority لـ Fetch API لـ JavaScript كجزء من عملية معايير الويب. ولتقليل الالتباس، نشير الآن إلى واجهة برمجة التطبيقات هذه باسم "أولوية الاسترجاع".
الخلاصة
من المرجح أن يهتم المطوّرون بأولوية الجلب من خلال الإصلاحات في سلوك التحميل المُسبق والتركيز الأخير على "مؤشرات أداء الويب الأساسية" وسرعة عرض أكبر جزء من المحتوى على الصفحة (LCP). وتتوفّر الآن مقابض إضافية لتحقيق تسلسل التحميل المطلوب.