بهینه‌سازی اولویت تصویر

مرورگرها از روش‌های اکتشافی برای اختصاص دادن اولویت‌های بار کردن به تصاویر استفاده می‌کنند، اما این پیش‌فرض‌ها ممکن است همیشه با «بزرگ‌ترین نقاشی دارای محتوا» (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> است. اگر مرورگری از آن پشتیبانی نکند، این مشخصه نادیده گرفته می‌شود و مرورگر از اکتشافات اولویت پیش‌فرض خود استفاده می‌کند.