تحسين أولوية الصور

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

يتيح لك استخدام السمة fetchpriority في عنصر <img> الإشارة بوضوح إلى أهمية الصورة للمتصفّح، ما يضمن تحميل الصور المهمة بشكل أسرع وعدم تنافس الصور غير الأساسية على معدل نقل البيانات.

تمنع السمة loading=lazy تنزيل الصور على الإطلاق عندما تكون خارج الشاشة بشكل كافٍ، ما يساعد في تحديد أولوية الصور بشكل أكبر.

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

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

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

<!-- Elevate priority for the LCP image -->
<img src="/images/hero-lcp.jpg"
     alt="Main Banner"
     fetchpriority="high"
     width="800" height="400">

<!-- Deprioritize initially hidden images above the fold -->
<!-- Additionally use `loading="lazy"` if there are likely to be many images-->
 <div class="carousel">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 1"
          width="400" height="300">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 2"
          fetchpriority="low"
          loading="lazy"
          width="400" height="300">
<div>

<!-- Deprioritize images revealed only after user interaction -->
<img src="/images/mega-menu-promo.jpg"
     alt="Special Offer"
     fetchpriority="low"
     width="300" height="150">

<!-- Use lazy loading ALONE for standard below-the-fold images -->
<img src="/images/footer-logo.png"
     alt="Footer Logo"
     loading="lazy"
     width="120" height="60">

<!-- Omit fetchpriority for images with standard priority -->
<img src="/images/standard-image.jpg"
     alt="Standard Image"
     width="400" height="300">

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

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

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

السمة fetchpriority هي تحسين تدريجي للعنصر <img>. إذا كان المتصفّح لا يتيح استخدام هذه السمة، يتم تجاهلها ويستخدم المتصفّح الأساليب الإرشادية التلقائية لتحديد الأولوية.