المستوى المطلوب: متوسط
fetchpriority: ازاي تنزّل LCP بسطر HTML واحد
المتصفح بيقرر أولوية تحميل الصور بناءً على مكانها في الـ DOM، وساعات بيغلط في القرار. بسطر HTML واحد بـ fetchpriority="high" بتقوله "الصورة دي أهم من اللي قبلها"، فالـ LCP بينزل من 2.4 ثانية لـ 1.6 ثانية بدون لمس CSS أو JavaScript. اللي هتقراه هنا شغّال على Chrome وEdge وSafari 17.2+ وFirefox 132+، وموثّق من web.dev و WHATWG.
المشكلة باختصار
عندك صفحة هبوط فيها صورة بطل (hero image) في الأعلى وصور كثيرة في الفوتر والشريط الجانبي. المتصفح بيشوف الصور كلها مرة واحدة وبيحدد أولوياتها بـ heuristics داخلية. النتيجة: صورة البطل بتتحمل في الموجة الثانية مع باقي الصور غير المهمة، فالـ LCP بياخد 2.4 ثانية في حين إنها لو اتحملت أول حاجة كانت هتجي في 1.6 ثانية.
الـ heuristic بتاع Chrome بيدّي أولوية Low لأي صورة لسه مش ظاهرة في الـ viewport. بس اللي بيحصل فعلًا إنه بيقرر ده قبل ما الـ layout يخلص، فأحيانًا بيغلط في تحديد إيه اللي ظاهر وإيه اللي مخفي. لمّا تستخدم fetchpriority أنت بتدّيله إشارة صريحة بدل ما يخمّن.
المثال البسيط: طابور الكاشير في السوبر ماركت
تخيل إنك في طابور كاشير عند 5 ناس. واحد منهم عنده عربية مليانة، والباقي معاهم حاجة واحدة بس. الكاشير الذكي ممكن يقول للي معاه حاجات كتير "تفضل قدّامي أنت الأول" لأن الـ throughput الكلي بيتحسن، أو العكس. fetchpriority بيعمل نفس الفكرة: بيقول للمتصفح "خد المورد ده وقدّمه على الباقي حتى لو كنت بحسب ترتيب الـ DOM رح تأخّره".
المتصفح، زي الكاشير، بياخد الإشارة دي بس مش لازم يطبّقها 100%. هي hint مش command. لو الشبكة محتقنة جدًا أو فيه مورد أهم من نوع تاني، الـ network stack بياخد القرار النهائي.
التعريف العلمي بدقة
طبقًا لـ HTML Living Standard (WHATWG)، الخاصية fetchpriority هي إشارة بتبلّغ المتصفح بالأولوية النسبية لمورد بالنسبة لموارد من نفس النوع. القيم المسموح بها:
- high: ارفع أولوية المورد فوق المعتاد لنوعه (صورة فوق الصور، script فوق الـ scripts).
- low: انزّل الأولوية تحت المعتاد.
- auto (الافتراضي): سيب المتصفح يقرر بالـ heuristics.
الإشارة دي بتأثر على الـ priority اللي بيخصّصها network stack بتاع المتصفح للطلب، مش على ترتيب البايتات في الـ TCP connection. يعني هي تعديل على request.priority في Fetch API، مش على الشبكة نفسها. الفرق ده مهم لأن المتصفحات بتستخدم HTTP/2 priority frames أو HTTP/3 dependency tree لتطبيق الإشارة، والسيرفر ممكن يحترمها أو لا.
الكود التنفيذي
الاستخدام الأشهر: على صورة LCP candidate.
