تحسين أولوية التحميل المُسبَق

يؤدي التحميل المُسبق للموارد باستخدام <link rel="preload"> إلى إرسال إشارة إلى المتصفّح بأنّ هناك موردًا سيكون مطلوبًا قريبًا. ومع ذلك، تكتسب عمليات التحميل المُسبق الأولوية التلقائية لنوع المورد، وتكون هذه الأولوية منخفضة للصور على وجه الخصوص. يتيح لك استخدام fetchpriority تحسين هذه الأولوية النسبية، لا سيما ضمان تحميل الصور مسبقًا بأولوية عالية، ما يسمح لها بالبدء في وقت مبكر واستخدام المزيد من موارد معدل نقل البيانات.

كيفية الإعداد

1. تحديد الموارد المرشّحة للتحميل المُسبق: ابحث عن الموارد التي لا يكتشفها المتصفّح مبكرًا (مثل صور ملصقات الفيديوهات أو صور الخلفية في CSS) ولكنّها ضرورية لمظهر الصفحة.
2. رفع مستوى عمليات التحميل المُسبق للصور المهمة: بالنسبة إلى صورة LCP أو الصور المهمة الأخرى التي لا يتم منحها الأولوية تلقائيًا، استخدِم <link rel="preload" fetchpriority="high"> لضمان منحها الأولوية على عمليات التحميل المُسبق الأخرى. يُرجى العِلم أنّ الخطوط تكون ذات أولوية عالية تلقائيًا.
3. إلغاء أولوية عمليات التحميل المُسبق غير الضرورية: بالنسبة إلى الموارد غير الضرورية للعرض الأولي (مثل فيديو في الخلفية أو خطوط ثانوية)، استخدِم <link rel="preload" fetchpriority="low">.
4. التنسيق مع أنواع الموارد: يُرجى العِلم أنّ أنواع as المختلفة لها أولويات تلقائية مختلفة، لذا استخدِم fetchpriority لتجاوز هذه الإعدادات التلقائية عند الضرورة.

مثال على الرمز

<!-- Elevate priority for a video poster image that acts as the LCP candidate -->
<link rel="preload" href="/images/video-poster.jpg" as="image" fetchpriority="high">

<!-- Elevate priority for a critical LCP image that is hidden in CSS -->
<link rel="preload" href="/images/hero-background.jpg" as="image" fetchpriority="high">

<!-- Deprioritize a secondary font to avoid network contention -->
<link rel="preload" href="/fonts/secondary-font.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin>

أفضل الممارسات

• إلزامي: استخدِم fetchpriority="high" فقط في عملية أو عمليتَي تحميل مُسبق للصور المهمة كحد أقصى لتجنُّب ازدحام الشبكة وتقليل تعزيز الأولوية.
• إلزامي: استخدِم السمة fetchpriority="high" في صور "سرعة عرض أكبر محتوى مرئي" (LCP).
• ما يجب فعله: يجب ألا يتجاوز إجمالي عدد عمليات التحميل المُسبق على الصفحة صورتَين وخطَّين أو ثلاثة خطوط أساسية، وذلك لتجنُّب التنافس على معدل نقل البيانات.
• يُرجى استخدام fetchpriority="low" لعمليات التحميل المُسبق التي تريد أن يبدأها المتصفّح مبكرًا ولكن ليس على حساب الموارد المهمة (خاصةً الخطوط غير المهمة).
• يجب تحديد السمة as بشكل صحيح لضمان استخدام التحميل المُسبَق.
• يُفضَّل جعل الموارد المهمة (مثل صور LCP) قابلة للاكتشاف بشكل ثابت في HTML من خلال علامات <img> بدلاً من الاعتماد على عمليات التحميل المُسبق لصور الخلفية.
• يجب التأكّد من أنّ عمليات التحميل المُسبق للخطوط تتضمّن دائمًا السمة crossorigin (حتى إذا كانت من المصدر نفسه).
• لا تستخدِم السمة importance المتوقّفة نهائيًا. وتم استبداله بـ fetchpriority.

استراتيجية احتياطية

السمة fetchpriority في <link rel="preload"> هي تحسين تدريجي. أما المتصفحات التي لا تتيح هذه السمة، فستواصل تحميل المورد مسبقًا باستخدام الأولوية التلقائية لنوع المورد هذا. لضمان التوافق، قدِّم دائمًا سمتَي as وtype الصحيحتَين.