پیش‌بارگیری منابع با <link rel="preload"> به مرورگر اطلاع می‌دهد که به‌زودی به منبعی نیاز خواهد بود. بااین‌حال، پیش‌بارگیری‌ها اولویت پیش‌فرض را برای نوع منبع به ارث می‌برند و به‌ویژه برای تصاویر، این اولویت پایین است. استفاده از fetchpriority به شما امکان می‌دهد این اولویت نسبی را اصلاح کنید، به‌ویژه اطمینان حاصل کنید که پیش‌بارگذاری‌های تصویر با اولویت بالا پیش‌بارگذاری می‌شوند و به آن‌ها اجازه می‌دهد زودتر شروع کنند و از منابع پهنای باند بیشتری استفاده کنند.
نحوه پیاده‌سازی
- شناسایی نامزدهای پیش‌بارگیری: منابعی را که مرورگر در ابتدا کشف نمی‌کند (مانند تصاویر پوستر ویدیو یا تصاویر پس‌زمینه در CSS) اما برای ظاهر صفحه ضروری هستند، پیدا کنید.
- پیش‌بارگیری تصاویر مهم را ارتقا دهید: برای تصویر LCP یا سایر تصاویر مهمی که به‌طور پیش‌فرض اولویت‌بندی نشده‌اند، از
<link rel="preload" fetchpriority="high">استفاده کنید تا مطمئن شوید که نسبت‌به سایر پیش‌بارگیری‌ها اولویت دارند. توجه داشته باشید که قلم‌ها به‌طور پیش‌فرض اولویت بالایی دارند. - اولویت پیش‌بارگذاری‌های غیربحرانی را کاهش دهید: برای منابعی که برای رندر اولیه حیاتی نیستند (مثلاً ویدیو پس‌زمینه یا قلم‌های ثانویه)، از
<link rel="preload" fetchpriority="low">استفاده کنید. - هماهنگی با انواع منابع: توجه داشته باشید که انواع مختلف
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) را به‌جای تکیه بر پیش‌بارگیری برای تصاویر پس‌زمینه، ازطریق برچسب‌های
<img>به‌صورت ایستا در HTML قابل‌یافتن کنید. - حتماً مطمئن شوید که پیش‌بارگذاری‌های قلم همیشه دارای مشخصه
crossoriginباشند (حتی اگر از یک مبدأ باشند). - از مشخصه منسوخ‌شده
importanceاستفاده نکنید.fetchpriorityجایگزین آن شده است.
راهبرد جایگزین
مشخصه fetchpriority در <link rel="preload"> یک ارتقای پیش‌رو است. مرورگرهایی که از آن پشتیبانی نمی‌کنند، همچنان منبع را بااستفاده از اولویت پیش‌فرض خود برای آن نوع منبع پیش‌بارگیری می‌کنند. برای اطمینان از سازگاری، همیشه مشخصه‌های as و type صحیح را ارائه دهید.