بارگیری منابع را با Fetch Priority API بهینه کنید

Fetch Priority API اولویت نسبی منابع را به مرورگر نشان می دهد. می تواند بارگذاری بهینه را فعال کند و Core Web Vitals را بهبود بخشد.

آدی عثمانی
Addy Osmani
X GitHub
لینا سوهونی
Leena Sohoni
X
پاتریک مینان
Patrick Meenan
X
بری پولارد

پشتیبانی مرورگر

  • کروم: 102.
  • لبه: 102.
  • فایرفاکس: پشت پرچم
  • سافاری: 17.2.

منبع

هنگامی که مرورگر یک صفحه وب را تجزیه می کند و شروع به کشف و دانلود منابعی مانند تصاویر، اسکریپت ها یا CSS می کند، به آنها priority واکشی اختصاص می دهد تا بتواند آنها را به ترتیب بهینه دانلود کند. اولویت یک منبع معمولاً به این بستگی دارد که آن منبع چیست و در کجای سند قرار دارد. برای مثال، ممکن است تصاویر درون‌نمای دارای اولویت High باشند، و اولویت برای CSSهای بارگذاری‌شده زودهنگام و مسدودکننده رندر با استفاده از <link> در <head> ممکن است Very High باشد. مرورگرها در تعیین اولویت هایی که به خوبی کار می کنند بسیار خوب هستند اما ممکن است در همه موارد بهینه نباشند.

این صفحه درباره Fetch Priority API و ویژگی fetchpriority HTML بحث می‌کند، که به شما امکان می‌دهد به اولویت نسبی یک منبع ( high یا low ) اشاره کنید. واکشی اولویت می تواند به بهینه سازی Core Web Vitals کمک کند.

خلاصه

چند زمینه کلیدی که اولویت واکشی می تواند به آنها کمک کند:

  • افزایش اولویت تصویر LCP با مشخص کردن fetchpriority="high" در عنصر تصویر، باعث می شود LCP زودتر اتفاق بیفتد.
  • افزایش اولویت اسکریپت های async ، با استفاده از معنایی بهتر از رایج ترین هک فعلی (درج <link rel="preload"> برای اسکریپت async ).
  • کاهش اولویت اسکریپت‌های بدنه آخر برای امکان توالی بهتر با تصاویر.
نمای فیلمی که دو تست صفحه اصلی Google Flights را مقایسه می کند. در پایین، از Fetch Priority برای تقویت اولویت تصویر قهرمان استفاده می شود که در نتیجه LCP 0.7 ثانیه کاهش می یابد.
در آزمایشی از Google Flights، اولویت را برای بهبود بزرگترین رنگ محتوایی از 2.6 ثانیه به 1.9 ثانیه واکشی کنید.

از لحاظ تاریخی، توسعه‌دهندگان با استفاده از پیش بارگذاری و اتصال اولیه ، تأثیر محدودی بر اولویت منابع داشته‌اند. Preload به شما امکان می دهد قبل از اینکه مرورگر به طور طبیعی آنها را کشف کند، در مورد منابع مهمی که می خواهید زودتر بارگیری کنید به مرورگر بگویید. این به ویژه برای منابعی مفید است که کشف آنها سخت تر است، مانند فونت های موجود در شیوه نامه ها، تصاویر پس زمینه یا منابع بارگذاری شده از یک اسکریپت. Preconnect به گرم کردن اتصالات به سرورهای متقاطع کمک می کند و می تواند به بهبود معیارهایی مانند Time to first byte کمک کند. زمانی مفید است که یک منبع را بدانید اما لزوماً URL دقیق منبعی را که مورد نیاز است نمی‌دانید.

واکشی اولویت مکمل این نکات منابع است. این یک سیگنال مبتنی بر نشانه گذاری است که از طریق ویژگی fetchpriority در دسترس است و توسعه دهندگان می توانند از آن برای نشان دادن اولویت نسبی یک منبع خاص استفاده کنند. همچنین می توانید از این نکات از طریق جاوا اسکریپت و Fetch API با ویژگی priority استفاده کنید تا بر اولویت واکشی منابع ساخته شده برای داده ها تأثیر بگذارید. واکشی اولویت همچنین می تواند تکمیل کننده پیش بارگذاری باشد. بزرگ‌ترین تصویر رنگ محتوای محتوا را بگیرید، که وقتی از قبل بارگذاری می‌شود، همچنان اولویت پایینی خواهد داشت. اگر توسط دیگر منابع اولیه با اولویت پایین به عقب برود، استفاده از اولویت واکشی می تواند به بارگذاری سریع تصویر کمک کند.

اولویت منابع

ترتیب دانلود منبع به اولویت اختصاص داده شده مرورگر برای هر منبع در صفحه بستگی دارد. عواملی که می توانند بر منطق محاسبات اولویت تأثیر بگذارند عبارتند از:

  • نوع منبع، مانند CSS، فونت ها، اسکریپت ها، تصاویر و منابع شخص ثالث.
  • مکان یا سفارش سند به منابع ارجاع می دهد.
  • این که آیا ویژگی‌های async یا defer در اسکریپت‌ها استفاده می‌شوند.

جدول زیر نشان می‌دهد که Chrome چگونه بیشتر منابع را اولویت‌بندی و ترتیب‌بندی می‌کند:

بارگذاری در مرحله مسدود کردن طرح بارگذاری یکباره در مرحله مسدود کردن طرح
پلک زدن
اولویت		 خیلی بالا بالا متوسط کم خیلی کم
DevTools
اولویت		 بالاترین بالا متوسط کم کمترین
منبع اصلی
CSS (اوایل **) CSS (تأخیر **) CSS (عدم تطابق رسانه***)
اسکریپت (اوایل** یا نه از اسکنر پیش بارگیری) اسکریپت (تأخیر **) اسکریپت (ناهمگام)
فونت قلم (rel=preload)
واردات
تصویر (در دید) تصویر (5 تصویر اول > 10000 پیکسل 2) تصویر
رسانه (تصویری/صوتی)
واکشی از پیش
XSL
XHR (همگام سازی) XHR/واکشی* (ناهمگام)

مرورگر منابع را با همان اولویت محاسبه شده به ترتیبی که کشف می کنند دانلود می کند. می‌توانید اولویت تخصیص داده‌شده به منابع مختلف را هنگام بارگیری صفحه در برگه « شبکه ابزارهای توسعه‌دهنده Chrome» بررسی کنید. (مطمئن شوید که ستون اولویت را با کلیک راست روی عناوین جدول و علامت زدن آن درج کرده اید).

برگه شبکه DevTools کروم که تعدادی از منابع فونت را فهرست می کند. همه آنها دارای بالاترین اولویت هستند.
اولویت برای type = "font" در صفحه جزئیات اخبار بی بی سی
برگه شبکه DevTools کروم که تعدادی از منابع فونت را فهرست می کند. آنها ترکیبی از اولویت کم و زیاد هستند.
اولویت برای type = "script" در صفحه جزئیات اخبار بی بی سی.

وقتی اولویت‌ها تغییر می‌کنند، می‌توانید اولویت اولیه و نهایی را در تنظیمات ردیف‌های درخواست بزرگ یا در یک راهنمای ابزار ببینید.

برگه شبکه DevTools کروم. تنظیم "ردیف های درخواست بزرگ" علامت زده می شود و ستون اولویت اولین تصویر را با اولویت High و اولویت اولیه متفاوتی از رسانه در زیر نشان می دهد. همین مورد در راهنمای ابزار نشان داده شده است.
تغییرات اولویت در DevTools.

چه زمانی ممکن است به اولویت واکشی نیاز داشته باشید؟

اکنون که منطق اولویت‌بندی مرورگر را درک کرده‌اید، می‌توانید ترتیب دانلود صفحه خود را برای بهینه‌سازی عملکرد و Core Web Vitals تغییر دهید. در اینجا چند نمونه از مواردی وجود دارد که می توانید برای تأثیرگذاری بر اولویت بارگیری منابع تغییر دهید:

  • برچسب‌های منبع مانند <script> و <link> را به ترتیبی که می‌خواهید مرورگر آنها را دانلود کند، قرار دهید. منابع با اولویت یکسان معمولاً به ترتیبی که کشف می شوند بارگذاری می شوند.
  • از راهنمایی منبع preload برای بارگیری منابع ضروری استفاده کنید ، به ویژه برای منابعی که به راحتی توسط مرورگر کشف نمی شوند.
  • از async یا defer برای دانلود اسکریپت ها بدون مسدود کردن منابع دیگر استفاده کنید.
  • محتوای پایین‌تر را با تنبلی بارگذاری کنید تا مرورگر بتواند از پهنای باند موجود برای منابع مهم‌تر در بالای صفحه استفاده کند.

این تکنیک‌ها به کنترل محاسبات اولویت مرورگر کمک می‌کنند و در نتیجه عملکرد و Core Web Vitals را بهبود می‌بخشند. به عنوان مثال، هنگامی که یک تصویر پس‌زمینه مهم از قبل بارگذاری می‌شود، می‌توان آن را خیلی زودتر کشف کرد و بزرگترین رنگ محتوایی ( LCP ) را بهبود بخشید.

گاهی اوقات ممکن است این دسته ها برای اولویت بندی منابع به طور مطلوب برای برنامه شما کافی نباشند. در اینجا برخی از سناریوهایی که واکشی اولویت می تواند مفید باشد آورده شده است:

  • شما چندین تصویر بالای صفحه دارید، اما همه آنها نباید اولویت یکسانی داشته باشند. به عنوان مثال، در یک چرخ فلک تصویر، تنها اولین تصویر قابل مشاهده نیاز به اولویت بیشتری دارد، و بقیه، معمولاً خارج از صفحه در ابتدا می توانند اولویت کمتری داشته باشند.
  • تصاویر داخل نما معمولاً با اولویت Low شروع می شوند. پس از تکمیل طرح‌بندی، Chrome متوجه می‌شود که آن‌ها در ویوپورت هستند و اولویت آن‌ها را افزایش می‌دهد. این معمولاً تأخیر قابل توجهی را برای بارگذاری تصاویر مهم مانند تصاویر قهرمان اضافه می کند. ارائه اولویت واکشی در نشانه‌گذاری به تصویر اجازه می‌دهد با اولویت High شروع شود و خیلی زودتر بارگذاری شود. در تلاشی برای خودکارسازی این امر، پنج تصویر بزرگ‌تر اول توسط کروم روی اولویت Medium ​​تنظیم شده‌اند که کمک می‌کند، اما یک fetchpriority="high" واضح حتی بهتر خواهد بود.

    برای کشف اولیه تصاویر LCP که به عنوان پس‌زمینه CSS گنجانده شده‌اند، پیش‌بارگذاری هنوز لازم است. برای افزایش اولویت تصاویر پس‌زمینه، fetchpriority='high' را در پیش‌بارگذاری قرار دهید.
  • اعلام اسکریپت‌ها به‌عنوان async یا defer به مرورگر می‌گوید آنها را به‌صورت ناهمزمان بارگذاری کند. با این حال، همانطور که در جدول اولویت نشان داده شده است، این اسکریپت ها نیز دارای اولویت "کم" هستند. ممکن است بخواهید در حین اطمینان از دانلود ناهمزمان، اولویت آنها را افزایش دهید، به ویژه برای اسکریپت هایی که برای تجربه کاربر حیاتی هستند.
  • اگر از API fetch() جاوا اسکریپت برای واکشی منابع یا داده‌ها به صورت ناهمزمان استفاده می‌کنید، مرورگر به آن اولویت High اختصاص می‌دهد. ممکن است بخواهید برخی از واکشی‌های شما با اولویت کمتری اجرا شوند، به‌خصوص اگر تماس‌های API پس‌زمینه را با تماس‌های API که به ورودی کاربر پاسخ می‌دهند، ترکیب می‌کنید. تماس‌های API پس‌زمینه را با اولویت Low و تماس‌های API تعاملی را با اولویت High علامت‌گذاری کنید.
  • مرورگر به CSS و فونت‌ها اولویت High اختصاص می‌دهد، اما برخی از این منابع ممکن است مهم‌تر از سایرین باشند. می توانید از Fetch Priority برای کاهش اولویت منابع غیر بحرانی استفاده کنید (توجه داشته باشید که CSS اولیه مسدود کردن رندر است بنابراین معمولاً باید اولویت High داشته باشد).

ویژگی fetchpriority

از ویژگی fetchpriority HTML برای تعیین اولویت دانلود برای انواع منابع مانند CSS، فونت ها، اسکریپت ها و تصاویر هنگام دانلود با استفاده از برچسب های link ، img یا script استفاده کنید. می تواند مقادیر زیر را بگیرد:

  • high : منبع از اولویت بالاتری برخوردار است و شما می خواهید مرورگر آن را بالاتر از حد معمول اولویت بندی کند، تا زمانی که اکتشافات اکتشافی خود مرورگر از این اتفاق جلوگیری نکند.
  • low : منبع از اولویت پایین تری برخوردار است و شما می خواهید مرورگر آن را از اولویت خارج کند، اگر اکتشافی آن اجازه دهد.
  • auto : مقدار پیش فرض که به مرورگر اجازه می دهد اولویت مناسب را انتخاب کند.

در اینجا چند نمونه از استفاده از ویژگی fetchpriority در نشانه گذاری و همچنین ویژگی priority معادل اسکریپت آورده شده است.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">

<script>
  fetch('https://example.com/', {priority: 'low'})
  .then(data => {
    // Trigger a low priority fetch
  });
</script>

اثرات اولویت مرورگر و fetchpriority

همانطور که در جدول زیر نشان داده شده است می توانید ویژگی fetchpriority را برای منابع مختلف اعمال کنید تا اولویت محاسبه شده آنها را افزایش یا کاهش دهید. fetchpriority="auto" (◉) در هر ردیف اولویت پیش‌فرض آن نوع منبع را مشخص می‌کند. (همچنین به عنوان Google Doc موجود است).

بارگذاری در مرحله مسدود کردن طرح در مرحله مسدود کردن طرح، یک به یک بارگذاری کنید
پلک زدن
اولویت		 خیلی بالا بالا متوسط کم خیلی کم
DevTools
اولویت		 بالاترین بالا متوسط کم کمترین
منبع اصلی ◉
CSS (اوایل **) ⬆◉ ⬇
CSS (تأخیر **) ⬆ ◉ ⬇
CSS (عدم تطابق رسانه***) ⬆*** ◉⬇
اسکریپت (اوایل** یا نه از اسکنر پیش بارگیری) ⬆◉ ⬇
اسکریپت (تأخیر **) ⬆ ◉ ⬇
اسکریپت (ناهمگام/به تعویق انداختن) ⬆ ◉⬇
فونت ◉
قلم (rel=preload) ⬆◉ ⬇
واردات ◉
تصویر (در دید - بعد از طرح بندی) ⬆◉ ⬇
تصویر (5 تصویر اول > 10000 پیکسل 2) ⬆ ◉ ⬇
تصویر ⬆ ◉⬇
رسانه (تصویری/صوتی) ◉
XHR (همگام سازی) - منسوخ شده است ◉
XHR/واکشی* (ناهمگام) ⬆◉ ⬇
واکشی از پیش ◉
XSL ◉

fetchpriority اولویت نسبی را تعیین می کند، به این معنی که به جای اینکه صراحتاً اولویت را روی High یا Low قرار دهد، اولویت پیش فرض را به مقدار مناسب افزایش یا کاهش می دهد. این اغلب منجر به اولویت High یا Low می شود، اما نه همیشه. برای مثال، CSS بحرانی با fetchpriority="high" اولویت "Very High"/"Highest" را حفظ می کند و استفاده از fetchpriority="low" در این عناصر، اولویت "High" را حفظ می کند. هیچ یک از این موارد شامل تنظیم صریح اولویت روی High یا Low نیست.

موارد استفاده کنید

زمانی که می خواهید به مرورگر راهنمایی بیشتری در مورد اولویت واکشی منبع بدهید، از ویژگی fetchpriority استفاده کنید.

اولویت تصویر LCP را افزایش دهید

شما می توانید fetchpriority="high" را برای افزایش اولویت LCP یا سایر تصاویر مهم تعیین کنید.

<img src="lcp-image.jpg" fetchpriority="high">

مقایسه زیر صفحه Google Flights را با تصویر پس‌زمینه LCP بارگیری شده با و بدون اولویت واکشی نشان می‌دهد. با تنظیم اولویت روی بالا، LCP از 2.6 به 1.9s بهبود یافت .

آزمایشی با استفاده از کارگران Cloudflare برای بازنویسی صفحه Google Flights با استفاده از اولویت واکشی انجام شد.

از fetchpriority="low" برای کاهش اولویت تصاویر بالای صفحه که فوراً مهم نیستند، برای مثال تصاویر خارج از صفحه در یک چرخ فلک تصویر، استفاده کنید.

<ul class="carousel">
  <img src="img/carousel-1.jpg" fetchpriority="high">
  <img src="img/carousel-2.jpg" fetchpriority="low">
  <img src="img/carousel-3.jpg" fetchpriority="low">
  <img src="img/carousel-4.jpg" fetchpriority="low">
</ul>

در حالی که تصاویر 2-4 خارج از نما خواهند بود، ممکن است "به اندازه کافی نزدیک" در نظر گرفته شوند تا آنها را به high افزایش دهد و همچنین بارگذاری شود، حتی اگر ویژگی load=lazy اضافه شود. بنابراین fetchpriority="low" راه حل صحیح برای این است.

در آزمایش قبلی با برنامه Oodle ، از این برای کاهش اولویت تصاویری که در بارگذاری ظاهر نمی شوند استفاده کردیم. زمان بارگذاری صفحه را 2 ثانیه کاهش داد.

مقایسه ای کنار هم از واکشی اولویت زمانی که در چرخ فلک تصویر برنامه Oodle استفاده می شود. در سمت چپ، مرورگر اولویت‌های پیش‌فرض را برای تصاویر چرخ فلک تعیین می‌کند، اما آن تصاویر را حدود دو ثانیه کندتر از نمونه سمت راست دانلود و رنگ می‌کند، که اولویت بالاتری را فقط برای اولین تصویر چرخ فلک تعیین می‌کند.
استفاده از اولویت بالا فقط برای اولین تصویر چرخ فلک باعث می شود صفحه سریعتر بارگیری شود.

اولویت منابع از پیش بارگذاری شده را کاهش دهید

برای جلوگیری از رقابت منابع از پیش بارگذاری شده با سایر منابع حیاتی، می توانید اولویت آنها را کاهش دهید. از این تکنیک با تصاویر، اسکریپت ها و CSS استفاده کنید.

<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" as="script" href="non-critical-script.js" fetchpriority="low">

<!-- Preload CSS without blocking render, or other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">

اولویت بندی مجدد اسکریپت ها

اسکریپت هایی که صفحه شما نیاز دارد تا تعاملی باشد باید به سرعت بارگیری شوند، اما نباید سایر منابع مسدود کننده رندر، حیاتی تر را مسدود کنند. می‌توانید این موارد را به‌عنوان async با اولویت بالا علامت‌گذاری کنید.

<script src="async_but_important.js" async fetchpriority="high"></script>

اگر اسکریپت به حالت‌های DOM خاصی متکی باشد، نمی‌توانید آن را به‌عنوان async علامت‌گذاری کنید. با این حال، اگر آنها بعداً در صفحه اجرا شوند، می توانید آنها را با اولویت کمتر بارگیری کنید:

<script src="blocking_but_unimportant.js" fetchpriority="low"></script>

هنگامی که تجزیه کننده به این اسکریپت برسد، این کار همچنان تجزیه کننده را مسدود می کند، اما اجازه می دهد محتوای قبل از این اولویت بندی شود.

یک جایگزین، در صورت نیاز به DOM تکمیل‌شده، استفاده از ویژگی defer (که به ترتیب بعد از DOMContentLoaded اجرا می‌شود) یا حتی در پایین صفحه async .

اولویت واکشی داده های غیر بحرانی را کاهش دهید

مرورگر fetch با اولویت بالا اجرا می کند. اگر چندین واکشی دارید که ممکن است همزمان اجرا شوند، می‌توانید از اولویت پیش‌فرض بالا برای واکشی داده‌های مهم‌تر استفاده کنید و اولویت داده‌های کمتر مهم را کاهش دهید.

// Important validation data (high by default)
let authenticate = await fetch('/user');

// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});

واکشی یادداشت های پیاده سازی اولویت

اولویت واکشی می تواند عملکرد را در موارد استفاده خاص بهبود بخشد، اما مواردی وجود دارد که هنگام استفاده از اولویت واکشی باید از آنها آگاه بود:

  • ویژگی fetchpriority یک اشاره است، نه یک دستورالعمل. مرورگر سعی می‌کند به اولویت توسعه‌دهنده احترام بگذارد، اما همچنین می‌تواند اولویت‌های اولویت منابع خود را برای اولویت منابع برای حل تضادها اعمال کند.

  • اولویت واکشی را با بارگذاری اولیه اشتباه نگیرید:

    • پیش بارگذاری یک واکشی اجباری است، نه یک اشاره.
    • Preload به مرورگر اجازه می دهد منبعی را زودتر کشف کند، اما همچنان منبع را با اولویت پیش فرض واکشی می کند. برعکس، واکشی اولویت به قابلیت کشف کمک نمی کند، اما به شما اجازه می دهد اولویت واکشی را افزایش یا کاهش دهید.
    • مشاهده و اندازه‌گیری اثرات یک پیش‌بارگذاری بسیار ساده‌تر از تأثیرات تغییر اولویت است.

    واکشی اولویت می‌تواند بارگذاری‌های اولیه را با افزایش دانه‌بندی اولویت‌بندی تکمیل کند. اگر قبلاً یک پیش بارگذاری را به عنوان یکی از اولین موارد در <head> برای یک تصویر LCP مشخص کرده اید، ممکن است اولویت واکشی high LCP را به میزان قابل توجهی بهبود نبخشد. با این حال، اگر پیش بارگذاری پس از بارگیری منابع دیگر اتفاق بیفتد، اولویت واکشی high می تواند LCP را بیشتر بهبود بخشد. اگر یک تصویر مهم یک تصویر پس زمینه CSS است، آن را با fetchpriority = "high" از قبل بارگذاری کنید.

  • بهبود زمان بارگذاری از اولویت‌بندی در محیط‌هایی که منابع بیشتری برای پهنای باند شبکه موجود رقابت می‌کنند، مرتبط‌تر است. این برای اتصالات HTTP/1.x که در آن دانلود موازی امکان پذیر نیست، یا در اتصالات HTTP/2 یا HTTP/3 با پهنای باند کم، رایج است. در این موارد، اولویت بندی می تواند به رفع تنگناها کمک کند.

  • CDN ها اولویت بندی HTTP/2 را به طور یکسان و به طور مشابه برای HTTP/3 پیاده سازی نمی کنند. حتی اگر مرورگر اولویت را از Fetch Priority اعلام کند، CDN ممکن است منابع را به ترتیب مشخص شده مجددا اولویت بندی کند. این امر آزمایش اولویت واکشی را دشوار می کند. اولویت ها هم به صورت داخلی در مرورگر اعمال می شوند و هم با پروتکل هایی که از اولویت بندی پشتیبانی می کنند (HTTP/2 و HTTP/3). هنوز هم ارزش دارد که از Fetch Priority فقط برای اولویت بندی مرورگر داخلی مستقل از CDN یا پشتیبانی مبدا استفاده کنید، زیرا اولویت ها اغلب زمانی که مرورگر منابع را درخواست می کند تغییر می کند. به عنوان مثال، منابع با اولویت پایین مانند تصاویر اغلب در زمانی که مرورگر موارد حیاتی <head> را پردازش می کند، از درخواست خودداری می شود.

  • ممکن است نتوانید اولویت واکشی را به عنوان بهترین روش در طراحی اولیه خود معرفی کنید. بعداً در چرخه توسعه خود، می توانید اولویت ها را به منابع مختلف در صفحه اختصاص دهید و اگر با انتظارات شما مطابقت نداشتند، می توانید Fetch Priority را برای بهینه سازی بیشتر معرفی کنید.

توسعه دهندگان باید از پیش بارگذاری برای هدف مورد نظر خود استفاده کنند - برای بارگذاری اولیه منابعی که توسط تجزیه کننده شناسایی نشده اند (فونت ها، واردات، تصاویر پس زمینه LCP). قرار دادن راهنمایی preload بر روی زمانی که منبع از قبل بارگذاری می شود تأثیر می گذارد.

اولویت واکشی در مورد نحوه واکشی منبع هنگام واکشی است.

نکاتی برای استفاده از پیش بارگذاری

هنگام استفاده از پیش بارگذاری موارد زیر را در نظر داشته باشید:

  • گنجاندن پیش بارگذاری در هدرهای HTTP آن را بر هر چیز دیگری در ترتیب بارگذاری قرار می دهد.
  • به طور کلی، برای هر چیزی که اولویت Medium ​​یا بالاتر دارد، به ترتیبی که تجزیه کننده به آنها می رسد، از قبل بارگذاری می شود. اگر در ابتدای HTML خود بارگذاری‌های پیش‌بارگذاری می‌کنید، مراقب باشید.
  • پیش بارگذاری فونت احتمالاً در انتهای سر یا ابتدای بدنه بهترین کار را دارد.
  • پیش‌بارگذاری‌های وارداتی (Dynamic import() یا modulepreload ) باید بعد از تگ اسکریپتی که نیاز به واردات دارد اجرا شود، بنابراین مطمئن شوید که اسکریپت ابتدا بارگیری یا تجزیه می‌شود تا بتوان در حین بارگذاری وابستگی‌های آن ارزیابی شود.
  • پیش بارگیری های تصویر به طور پیش فرض دارای اولویت Low یا Medium ​​هستند. آنها را نسبت به اسکریپت های همگام و سایر برچسب های با اولویت پایین یا پایین تر ترتیب دهید.

تاریخچه

واکشی اولویت برای اولین بار در کروم به عنوان یک آزمایش اولیه در سال 2018 و سپس دوباره در سال 2021 با استفاده از ویژگی importance آزمایش شد. در آن زمان به آن نکات اولویتی می گفتند. این رابط از آن زمان به عنوان بخشی از فرآیند استانداردهای وب به fetchpriority برای HTML و priority برای Fetch API جاوا اسکریپت تغییر کرده است. برای کاهش سردرگمی، اکنون این API را اولویت واکشی می نامیم.

نتیجه گیری

توسعه دهندگان احتمالاً با اصلاح رفتار پیش بارگذاری و تمرکز اخیر بر Core Web Vitals و LCP به اولویت واکشی علاقه مند هستند. آنها اکنون دستگیره های اضافی در دسترس دارند تا به ترتیب بارگذاری مورد نظر خود دست یابند.

،

Fetch Priority API اولویت نسبی منابع را به مرورگر نشان می دهد. می تواند بارگذاری بهینه را فعال کند و Core Web Vitals را بهبود بخشد.

آدی عثمانی
Addy Osmani
X GitHub
لینا سوهونی
Leena Sohoni
X
پاتریک مینان
Patrick Meenan
X
بری پولارد

پشتیبانی مرورگر

  • کروم: 102.
  • لبه: 102.
  • فایرفاکس: پشت پرچم
  • سافاری: 17.2.

منبع

هنگامی که مرورگر یک صفحه وب را تجزیه می کند و شروع به کشف و دانلود منابعی مانند تصاویر، اسکریپت ها یا CSS می کند، به آنها priority واکشی اختصاص می دهد تا بتواند آنها را به ترتیب بهینه دانلود کند. اولویت یک منبع معمولاً به این بستگی دارد که آن منبع چیست و در کجای سند قرار دارد. برای مثال، ممکن است تصاویر درون‌نمای دارای اولویت High باشند، و اولویت برای CSSهای بارگذاری‌شده زودهنگام و مسدودکننده رندر با استفاده از <link> در <head> ممکن است Very High باشد. مرورگرها در تعیین اولویت هایی که به خوبی کار می کنند بسیار خوب هستند اما ممکن است در همه موارد بهینه نباشند.

این صفحه درباره Fetch Priority API و ویژگی fetchpriority HTML بحث می‌کند، که به شما امکان می‌دهد به اولویت نسبی یک منبع ( high یا low ) اشاره کنید. واکشی اولویت می تواند به بهینه سازی Core Web Vitals کمک کند.

خلاصه

چند زمینه کلیدی که اولویت واکشی می تواند به آنها کمک کند:

  • افزایش اولویت تصویر LCP با مشخص کردن fetchpriority="high" در عنصر تصویر، باعث می شود LCP زودتر اتفاق بیفتد.
  • افزایش اولویت اسکریپت های async ، با استفاده از معنایی بهتر از رایج ترین هک فعلی (درج <link rel="preload"> برای اسکریپت async ).
  • کاهش اولویت اسکریپت‌های بدنه آخر برای امکان توالی بهتر با تصاویر.
نمای فیلمی که دو تست صفحه اصلی Google Flights را مقایسه می کند. در پایین، از Fetch Priority برای تقویت اولویت تصویر قهرمان استفاده می شود که در نتیجه LCP 0.7 ثانیه کاهش می یابد.
در آزمایشی از Google Flights، اولویت را برای بهبود بزرگترین رنگ محتوایی از 2.6 ثانیه به 1.9 ثانیه واکشی کنید.

از لحاظ تاریخی، توسعه‌دهندگان با استفاده از پیش بارگذاری و اتصال اولیه ، تأثیر محدودی بر اولویت منابع داشته‌اند. Preload به شما امکان می دهد قبل از اینکه مرورگر به طور طبیعی آنها را کشف کند، در مورد منابع مهمی که می خواهید زودتر بارگیری کنید به مرورگر بگویید. این به ویژه برای منابعی مفید است که کشف آنها سخت تر است، مانند فونت های موجود در شیوه نامه ها، تصاویر پس زمینه یا منابع بارگذاری شده از یک اسکریپت. Preconnect به گرم کردن اتصالات به سرورهای متقاطع کمک می کند و می تواند به بهبود معیارهایی مانند Time to first byte کمک کند. زمانی مفید است که یک منبع را بدانید اما لزوماً URL دقیق منبعی را که مورد نیاز است نمی‌دانید.

واکشی اولویت مکمل این نکات منابع است. این یک سیگنال مبتنی بر نشانه گذاری است که از طریق ویژگی fetchpriority در دسترس است و توسعه دهندگان می توانند از آن برای نشان دادن اولویت نسبی یک منبع خاص استفاده کنند. همچنین می توانید از این نکات از طریق جاوا اسکریپت و Fetch API با ویژگی priority استفاده کنید تا بر اولویت واکشی منابع ساخته شده برای داده ها تأثیر بگذارید. واکشی اولویت همچنین می تواند تکمیل کننده پیش بارگذاری باشد. بزرگ‌ترین تصویر رنگ محتوای محتوا را بگیرید، که وقتی از قبل بارگذاری می‌شود، همچنان اولویت پایینی خواهد داشت. اگر توسط دیگر منابع اولیه با اولویت پایین به عقب برود، استفاده از اولویت واکشی می تواند به بارگذاری سریع تصویر کمک کند.

اولویت منابع

ترتیب دانلود منبع به اولویت اختصاص داده شده مرورگر برای هر منبع در صفحه بستگی دارد. عواملی که می توانند بر منطق محاسبات اولویت تأثیر بگذارند عبارتند از:

  • نوع منبع، مانند CSS، فونت ها، اسکریپت ها، تصاویر و منابع شخص ثالث.
  • مکان یا سفارش سند به منابع ارجاع می دهد.
  • این که آیا ویژگی‌های async یا defer در اسکریپت‌ها استفاده می‌شوند.

جدول زیر نشان می‌دهد که Chrome چگونه بیشتر منابع را اولویت‌بندی و ترتیب‌بندی می‌کند:

بارگذاری در مرحله مسدود کردن طرح بارگذاری یکباره در مرحله مسدود کردن طرح
پلک زدن
اولویت		 خیلی بالا بالا متوسط کم خیلی کم
DevTools
اولویت		 بالاترین بالا متوسط کم کمترین
منبع اصلی
CSS (اوایل **) CSS (تأخیر **) CSS (عدم تطابق رسانه***)
اسکریپت (اوایل** یا نه از اسکنر پیش بارگیری) اسکریپت (تأخیر **) اسکریپت (ناهمگام)
فونت قلم (rel=preload)
واردات
تصویر (در دید) تصویر (5 تصویر اول > 10000 پیکسل 2) تصویر
رسانه (تصویری/صوتی)
واکشی از پیش
XSL
XHR (همگام سازی) XHR/واکشی* (ناهمگام)

مرورگر منابع را با همان اولویت محاسبه شده به ترتیبی که کشف می کنند دانلود می کند. می‌توانید اولویت تخصیص داده‌شده به منابع مختلف را هنگام بارگیری صفحه در برگه « شبکه ابزارهای توسعه‌دهنده Chrome» بررسی کنید. (مطمئن شوید که ستون اولویت را با کلیک راست روی عناوین جدول و علامت زدن آن درج کرده اید).

برگه شبکه DevTools کروم که تعدادی از منابع فونت را فهرست می کند. همه آنها دارای بالاترین اولویت هستند.
اولویت برای type = "font" در صفحه جزئیات اخبار بی بی سی
برگه شبکه DevTools کروم که تعدادی از منابع فونت را فهرست می کند. آنها ترکیبی از اولویت کم و زیاد هستند.
اولویت برای type = "script" در صفحه جزئیات اخبار بی بی سی.

وقتی اولویت‌ها تغییر می‌کنند، می‌توانید اولویت اولیه و نهایی را در تنظیمات ردیف‌های درخواست بزرگ یا در یک راهنمای ابزار ببینید.

برگه شبکه DevTools کروم. تنظیم "ردیف های درخواست بزرگ" علامت زده می شود و ستون اولویت اولین تصویر را با اولویت High و اولویت اولیه متفاوتی از رسانه در زیر نشان می دهد. همین مورد در راهنمای ابزار نشان داده شده است.
تغییرات اولویت در DevTools.

چه زمانی ممکن است به اولویت واکشی نیاز داشته باشید؟

اکنون که منطق اولویت‌بندی مرورگر را درک کرده‌اید، می‌توانید ترتیب دانلود صفحه خود را برای بهینه‌سازی عملکرد و Core Web Vitals تغییر دهید. در اینجا چند نمونه از مواردی وجود دارد که می توانید برای تأثیرگذاری بر اولویت بارگیری منابع تغییر دهید:

  • برچسب‌های منبع مانند <script> و <link> را به ترتیبی که می‌خواهید مرورگر آنها را دانلود کند، قرار دهید. منابع با اولویت یکسان معمولاً به ترتیبی که کشف می شوند بارگذاری می شوند.
  • از راهنمایی منبع preload برای بارگیری منابع ضروری استفاده کنید ، به ویژه برای منابعی که به راحتی توسط مرورگر کشف نمی شوند.
  • از async یا defer برای دانلود اسکریپت ها بدون مسدود کردن منابع دیگر استفاده کنید.
  • محتوای پایین‌تر را با تنبلی بارگذاری کنید تا مرورگر بتواند از پهنای باند موجود برای منابع مهم‌تر در بالای صفحه استفاده کند.

این تکنیک‌ها به کنترل محاسبات اولویت مرورگر کمک می‌کنند و در نتیجه عملکرد و Core Web Vitals را بهبود می‌بخشند. به عنوان مثال، هنگامی که یک تصویر پس‌زمینه مهم از قبل بارگذاری می‌شود، می‌توان آن را خیلی زودتر کشف کرد و بزرگترین رنگ محتوایی ( LCP ) را بهبود بخشید.

گاهی اوقات ممکن است این دسته ها برای اولویت بندی منابع به طور مطلوب برای برنامه شما کافی نباشند. در اینجا برخی از سناریوهایی که واکشی اولویت می تواند مفید باشد آورده شده است:

  • شما چندین تصویر بالای صفحه دارید، اما همه آنها نباید اولویت یکسانی داشته باشند. به عنوان مثال، در یک چرخ فلک تصویر، تنها اولین تصویر قابل مشاهده نیاز به اولویت بیشتری دارد، و بقیه، معمولاً خارج از صفحه در ابتدا می توانند اولویت کمتری داشته باشند.
  • تصاویر داخل نما معمولاً با اولویت Low شروع می شوند. پس از تکمیل طرح‌بندی، Chrome متوجه می‌شود که آن‌ها در ویوپورت هستند و اولویت آن‌ها را افزایش می‌دهد. این معمولاً تأخیر قابل توجهی را برای بارگذاری تصاویر مهم مانند تصاویر قهرمان اضافه می کند. ارائه اولویت واکشی در نشانه‌گذاری به تصویر اجازه می‌دهد با اولویت High شروع شود و خیلی زودتر بارگذاری شود. در تلاشی برای خودکارسازی این امر، پنج تصویر بزرگ‌تر اول توسط کروم روی اولویت Medium ​​تنظیم شده‌اند که کمک می‌کند، اما یک fetchpriority="high" واضح حتی بهتر خواهد بود.

    برای کشف اولیه تصاویر LCP که به عنوان پس‌زمینه CSS گنجانده شده‌اند، پیش‌بارگذاری هنوز لازم است. برای افزایش اولویت تصاویر پس‌زمینه، fetchpriority='high' را در پیش‌بارگذاری قرار دهید.
  • اعلام اسکریپت‌ها به‌عنوان async یا defer به مرورگر می‌گوید آنها را به‌صورت ناهمزمان بارگذاری کند. با این حال، همانطور که در جدول اولویت نشان داده شده است، این اسکریپت ها نیز دارای اولویت "کم" هستند. ممکن است بخواهید در حین اطمینان از دانلود ناهمزمان، اولویت آنها را افزایش دهید، به ویژه برای اسکریپت هایی که برای تجربه کاربر حیاتی هستند.
  • اگر از API fetch() جاوا اسکریپت برای واکشی منابع یا داده‌ها به صورت ناهمزمان استفاده می‌کنید، مرورگر به آن اولویت High اختصاص می‌دهد. ممکن است بخواهید برخی از واکشی‌های شما با اولویت کمتری اجرا شوند، به‌خصوص اگر تماس‌های API پس‌زمینه را با تماس‌های API که به ورودی کاربر پاسخ می‌دهند، ترکیب می‌کنید. تماس‌های API پس‌زمینه را با اولویت Low و تماس‌های API تعاملی را با اولویت High علامت‌گذاری کنید.
  • مرورگر به CSS و فونت‌ها اولویت High اختصاص می‌دهد، اما برخی از این منابع ممکن است مهم‌تر از سایرین باشند. می توانید از Fetch Priority برای کاهش اولویت منابع غیر بحرانی استفاده کنید (توجه داشته باشید که CSS اولیه مسدود کردن رندر است بنابراین معمولاً باید اولویت High داشته باشد).

ویژگی fetchpriority

از ویژگی fetchpriority HTML برای تعیین اولویت دانلود برای انواع منابع مانند CSS، فونت ها، اسکریپت ها و تصاویر هنگام دانلود با استفاده از برچسب های link ، img یا script استفاده کنید. می تواند مقادیر زیر را بگیرد:

  • high : منبع از اولویت بالاتری برخوردار است و شما می خواهید مرورگر آن را بالاتر از حد معمول اولویت بندی کند، تا زمانی که اکتشافات اکتشافی خود مرورگر از این اتفاق جلوگیری نکند.
  • low : منبع از اولویت پایین تری برخوردار است و شما می خواهید مرورگر آن را از اولویت خارج کند، اگر اکتشافی آن اجازه دهد.
  • auto : مقدار پیش فرض که به مرورگر اجازه می دهد اولویت مناسب را انتخاب کند.

در اینجا چند نمونه از استفاده از ویژگی fetchpriority در نشانه گذاری و همچنین ویژگی priority معادل اسکریپت آورده شده است.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">

<script>
  fetch('https://example.com/', {priority: 'low'})
  .then(data => {
    // Trigger a low priority fetch
  });
</script>

اثرات اولویت مرورگر و fetchpriority

همانطور که در جدول زیر نشان داده شده است می توانید ویژگی fetchpriority را برای منابع مختلف اعمال کنید تا اولویت محاسبه شده آنها را افزایش یا کاهش دهید. fetchpriority="auto" (◉) در هر ردیف اولویت پیش‌فرض آن نوع منبع را مشخص می‌کند. (همچنین به عنوان Google Doc موجود است).

بارگذاری در مرحله مسدود کردن طرح در مرحله مسدود کردن طرح، یک به یک بارگذاری کنید
پلک زدن
اولویت		 خیلی بالا بالا متوسط کم خیلی کم
DevTools
اولویت		 بالاترین بالا متوسط کم کمترین
منبع اصلی ◉
CSS (اوایل **) ⬆◉ ⬇
CSS (تأخیر **) ⬆ ◉ ⬇
CSS (عدم تطابق رسانه***) ⬆*** ◉⬇
اسکریپت (اوایل** یا نه از اسکنر پیش بارگیری) ⬆◉ ⬇
اسکریپت (تأخیر **) ⬆ ◉ ⬇
اسکریپت (ناهمگام/به تعویق انداختن) ⬆ ◉⬇
فونت ◉
قلم (rel=preload) ⬆◉ ⬇
واردات ◉
تصویر (در دید - بعد از طرح بندی) ⬆◉ ⬇
تصویر (5 تصویر اول > 10000 پیکسل 2) ⬆ ◉ ⬇
تصویر ⬆ ◉⬇
رسانه (تصویری/صوتی) ◉
XHR (همگام سازی) - منسوخ شده است ◉
XHR/واکشی* (ناهمگام) ⬆◉ ⬇
واکشی از پیش ◉
XSL ◉

fetchpriority اولویت نسبی را تعیین می کند، به این معنی که به جای اینکه صراحتاً اولویت را روی High یا Low قرار دهد، اولویت پیش فرض را به مقدار مناسب افزایش یا کاهش می دهد. این اغلب منجر به اولویت High یا Low می شود، اما نه همیشه. برای مثال، CSS بحرانی با fetchpriority="high" اولویت "Very High"/"Highest" را حفظ می کند و استفاده از fetchpriority="low" در این عناصر، اولویت "High" را حفظ می کند. هیچ یک از این موارد شامل تنظیم صریح اولویت روی High یا Low نیست.

موارد استفاده کنید

زمانی که می خواهید به مرورگر راهنمایی بیشتری در مورد اولویت واکشی منبع بدهید، از ویژگی fetchpriority استفاده کنید.

اولویت تصویر LCP را افزایش دهید

شما می توانید fetchpriority="high" را برای افزایش اولویت LCP یا سایر تصاویر مهم تعیین کنید.

<img src="lcp-image.jpg" fetchpriority="high">

مقایسه زیر صفحه Google Flights را با تصویر پس‌زمینه LCP بارگیری شده با و بدون اولویت واکشی نشان می‌دهد. با تنظیم اولویت روی بالا، LCP از 2.6 به 1.9s بهبود یافت .

آزمایشی با استفاده از کارگران Cloudflare برای بازنویسی صفحه Google Flights با استفاده از اولویت واکشی انجام شد.

از fetchpriority="low" برای کاهش اولویت تصاویر بالای صفحه که فوراً مهم نیستند، برای مثال تصاویر خارج از صفحه در یک چرخ فلک تصویر، استفاده کنید.

<ul class="carousel">
  <img src="img/carousel-1.jpg" fetchpriority="high">
  <img src="img/carousel-2.jpg" fetchpriority="low">
  <img src="img/carousel-3.jpg" fetchpriority="low">
  <img src="img/carousel-4.jpg" fetchpriority="low">
</ul>

در حالی که تصاویر 2-4 خارج از نما خواهند بود، ممکن است "به اندازه کافی نزدیک" در نظر گرفته شوند تا آنها را به high افزایش دهد و همچنین بارگذاری شود، حتی اگر ویژگی load=lazy اضافه شود. بنابراین fetchpriority="low" راه حل صحیح برای این است.

در آزمایش قبلی با برنامه Oodle ، از این برای کاهش اولویت تصاویری که در بارگذاری ظاهر نمی شوند استفاده کردیم. زمان بارگذاری صفحه را 2 ثانیه کاهش داد.

مقایسه ای کنار هم از واکشی اولویت زمانی که در چرخ فلک تصویر برنامه Oodle استفاده می شود. در سمت چپ، مرورگر اولویت‌های پیش‌فرض را برای تصاویر چرخ فلک تعیین می‌کند، اما آن تصاویر را حدود دو ثانیه کندتر از نمونه سمت راست دانلود و رنگ می‌کند، که اولویت بالاتری را فقط برای اولین تصویر چرخ فلک تعیین می‌کند.
استفاده از اولویت بالا فقط برای اولین تصویر چرخ فلک باعث می شود صفحه سریعتر بارگیری شود.

اولویت منابع از پیش بارگذاری شده را کاهش دهید

برای جلوگیری از رقابت منابع از پیش بارگذاری شده با سایر منابع حیاتی، می توانید اولویت آنها را کاهش دهید. از این تکنیک با تصاویر، اسکریپت ها و CSS استفاده کنید.

<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" as="script" href="non-critical-script.js" fetchpriority="low">

<!-- Preload CSS without blocking render, or other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">

اولویت بندی مجدد اسکریپت ها

اسکریپت هایی که صفحه شما نیاز دارد تا تعاملی باشد باید به سرعت بارگیری شوند، اما نباید سایر منابع مسدود کننده رندر، حیاتی تر را مسدود کنند. می‌توانید این موارد را به‌عنوان async با اولویت بالا علامت‌گذاری کنید.

<script src="async_but_important.js" async fetchpriority="high"></script>

اگر اسکریپت به حالت‌های DOM خاصی متکی باشد، نمی‌توانید آن را به‌عنوان async علامت‌گذاری کنید. با این حال، اگر آنها بعداً در صفحه اجرا شوند، می توانید آنها را با اولویت کمتر بارگیری کنید:

<script src="blocking_but_unimportant.js" fetchpriority="low"></script>

هنگامی که تجزیه کننده به این اسکریپت برسد، این کار همچنان تجزیه کننده را مسدود می کند، اما اجازه می دهد محتوای قبل از این اولویت بندی شود.

یک جایگزین، در صورت نیاز به DOM تکمیل‌شده، استفاده از ویژگی defer (که به ترتیب بعد از DOMContentLoaded اجرا می‌شود) یا حتی در پایین صفحه async .

اولویت واکشی داده های غیر بحرانی را کاهش دهید

مرورگر fetch با اولویت بالا اجرا می کند. اگر چندین واکشی دارید که ممکن است همزمان اجرا شوند، می‌توانید از اولویت پیش‌فرض بالا برای واکشی داده‌های مهم‌تر استفاده کنید و اولویت داده‌های کمتر مهم را کاهش دهید.

// Important validation data (high by default)
let authenticate = await fetch('/user');

// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});

واکشی یادداشت های پیاده سازی اولویت

اولویت واکشی می تواند عملکرد را در موارد استفاده خاص بهبود بخشد، اما مواردی وجود دارد که هنگام استفاده از اولویت واکشی باید از آنها آگاه بود:

  • ویژگی fetchpriority یک اشاره است، نه یک دستورالعمل. مرورگر سعی می‌کند به اولویت توسعه‌دهنده احترام بگذارد، اما همچنین می‌تواند اولویت‌های اولویت منابع خود را برای اولویت منابع برای حل تضادها اعمال کند.

  • اولویت واکشی را با بارگذاری اولیه اشتباه نگیرید:

    • پیش بارگذاری یک واکشی اجباری است، نه یک اشاره.
    • Preload به مرورگر اجازه می دهد منبعی را زودتر کشف کند، اما همچنان منبع را با اولویت پیش فرض واکشی می کند. برعکس، واکشی اولویت به قابلیت کشف کمک نمی کند، اما به شما اجازه می دهد اولویت واکشی را افزایش یا کاهش دهید.
    • مشاهده و اندازه‌گیری اثرات یک پیش‌بارگذاری بسیار ساده‌تر از تأثیرات تغییر اولویت است.

    واکشی اولویت می‌تواند بارگذاری‌های اولیه را با افزایش دانه‌بندی اولویت‌بندی تکمیل کند. اگر قبلاً یک پیش بارگذاری را به عنوان یکی از اولین موارد در <head> برای یک تصویر LCP مشخص کرده اید، ممکن است اولویت واکشی high LCP را به میزان قابل توجهی بهبود نبخشد. با این حال، اگر پیش بارگذاری پس از بارگیری منابع دیگر اتفاق بیفتد، اولویت واکشی high می تواند LCP را بیشتر بهبود بخشد. اگر یک تصویر مهم یک تصویر پس زمینه CSS است، آن را با fetchpriority = "high" از قبل بارگذاری کنید.

  • بهبود زمان بارگذاری از اولویت‌بندی در محیط‌هایی که منابع بیشتری برای پهنای باند شبکه موجود رقابت می‌کنند، مرتبط‌تر است. این برای اتصالات HTTP/1.x که در آن دانلود موازی امکان پذیر نیست، یا در اتصالات HTTP/2 یا HTTP/3 با پهنای باند کم، رایج است. در این موارد، اولویت بندی می تواند به رفع تنگناها کمک کند.

  • CDN ها اولویت بندی HTTP/2 را به طور یکسان و به طور مشابه برای HTTP/3 پیاده سازی نمی کنند. حتی اگر مرورگر اولویت را از Fetch Priority اعلام کند، CDN ممکن است منابع را به ترتیب مشخص شده مجددا اولویت بندی کند. این امر آزمایش اولویت واکشی را دشوار می کند. اولویت ها هم به صورت داخلی در مرورگر اعمال می شوند و هم با پروتکل هایی که از اولویت بندی پشتیبانی می کنند (HTTP/2 و HTTP/3). هنوز هم ارزش دارد که از Fetch Priority فقط برای اولویت بندی مرورگر داخلی مستقل از CDN یا پشتیبانی مبدا استفاده کنید، زیرا اولویت ها اغلب زمانی که مرورگر منابع را درخواست می کند تغییر می کند. به عنوان مثال، منابع با اولویت پایین مانند تصاویر اغلب در زمانی که مرورگر موارد حیاتی <head> را پردازش می کند، از درخواست خودداری می شود.

  • ممکن است نتوانید اولویت واکشی را به عنوان بهترین روش در طراحی اولیه خود معرفی کنید. بعداً در چرخه توسعه خود، می توانید اولویت ها را به منابع مختلف در صفحه اختصاص دهید و اگر با انتظارات شما مطابقت نداشتند، می توانید Fetch Priority را برای بهینه سازی بیشتر معرفی کنید.

توسعه دهندگان باید از پیش بارگذاری برای هدف مورد نظر خود استفاده کنند - برای بارگذاری اولیه منابعی که توسط تجزیه کننده شناسایی نشده اند (فونت ها، واردات، تصاویر پس زمینه LCP). قرار دادن راهنمایی preload بر روی زمانی که منبع از قبل بارگذاری می شود تأثیر می گذارد.

اولویت واکشی در مورد نحوه واکشی منبع هنگام واکشی است.

نکاتی برای استفاده از پیش بارگذاری

هنگام استفاده از پیش بارگذاری موارد زیر را در نظر داشته باشید:

  • گنجاندن پیش بارگذاری در هدرهای HTTP آن را بر هر چیز دیگری در ترتیب بارگذاری قرار می دهد.
  • به طور کلی، برای هر چیزی که اولویت Medium ​​یا بالاتر دارد، به ترتیبی که تجزیه کننده به آنها می رسد، از قبل بارگذاری می شود. اگر در ابتدای HTML خود بارگذاری‌های پیش‌بارگذاری می‌کنید، مراقب باشید.
  • پیش بارگذاری فونت احتمالاً در انتهای سر یا ابتدای بدنه بهترین کار را دارد.
  • پیش‌بارگذاری‌های وارداتی (Dynamic import() یا modulepreload ) باید بعد از تگ اسکریپتی که نیاز به واردات دارد اجرا شود، بنابراین مطمئن شوید که اسکریپت ابتدا بارگیری یا تجزیه می‌شود تا بتوان در حین بارگذاری وابستگی‌های آن ارزیابی شود.
  • پیش بارگیری های تصویر به طور پیش فرض دارای اولویت Low یا Medium ​​هستند. آنها را نسبت به اسکریپت های همگام و سایر برچسب های با اولویت پایین یا پایین تر ترتیب دهید.

تاریخچه

واکشی اولویت برای اولین بار در کروم به عنوان یک آزمایش اولیه در سال 2018 و سپس دوباره در سال 2021 با استفاده از ویژگی importance آزمایش شد. در آن زمان به آن نکات اولویتی می گفتند. این رابط از آن زمان به عنوان بخشی از فرآیند استانداردهای وب به fetchpriority برای HTML و priority برای Fetch API جاوا اسکریپت تغییر کرده است. برای کاهش سردرگمی، اکنون این API را اولویت واکشی می نامیم.

نتیجه گیری

توسعه دهندگان احتمالاً با اصلاح رفتار پیش بارگذاری و تمرکز اخیر بر Core Web Vitals و LCP به اولویت واکشی علاقه مند هستند. آنها اکنون دستگیره های اضافی در دسترس دارند تا به ترتیب بارگذاری مورد نظر خود دست یابند.

،

Fetch Priority API اولویت نسبی منابع را به مرورگر نشان می دهد. می تواند بارگذاری بهینه را فعال کند و Core Web Vitals را بهبود بخشد.

آدی عثمانی
Addy Osmani
X GitHub
لینا سوهونی
Leena Sohoni
X
پاتریک مینان
Patrick Meenan
X
بری پولارد

پشتیبانی مرورگر

  • کروم: 102.
  • لبه: 102.
  • فایرفاکس: پشت پرچم
  • سافاری: 17.2.

منبع

هنگامی که مرورگر یک صفحه وب را تجزیه می کند و شروع به کشف و دانلود منابعی مانند تصاویر، اسکریپت ها یا CSS می کند، به آنها priority واکشی اختصاص می دهد تا بتواند آنها را به ترتیب بهینه دانلود کند. اولویت یک منبع معمولاً به این بستگی دارد که آن منبع چیست و در کجای سند قرار دارد. برای مثال، ممکن است تصاویر درون‌نمای دارای اولویت High باشند، و اولویت برای CSSهای بارگذاری‌شده زودهنگام و مسدودکننده رندر با استفاده از <link> در <head> ممکن است Very High باشد. مرورگرها در تعیین اولویت هایی که به خوبی کار می کنند بسیار خوب هستند اما ممکن است در همه موارد بهینه نباشند.

این صفحه درباره Fetch Priority API و ویژگی fetchpriority HTML بحث می‌کند، که به شما امکان می‌دهد به اولویت نسبی یک منبع ( high یا low ) اشاره کنید. واکشی اولویت می تواند به بهینه سازی Core Web Vitals کمک کند.

خلاصه

چند زمینه کلیدی که اولویت واکشی می تواند به آنها کمک کند:

  • افزایش اولویت تصویر LCP با مشخص کردن fetchpriority="high" در عنصر تصویر، باعث می شود LCP زودتر اتفاق بیفتد.
  • افزایش اولویت اسکریپت های async ، با استفاده از معنایی بهتر از رایج ترین هک فعلی (درج <link rel="preload"> برای اسکریپت async ).
  • کاهش اولویت اسکریپت‌های بدنه آخر برای امکان توالی بهتر با تصاویر.
نمای فیلمی که دو تست صفحه اصلی Google Flights را مقایسه می کند. در پایین، از Fetch Priority برای تقویت اولویت تصویر قهرمان استفاده می شود که در نتیجه LCP 0.7 ثانیه کاهش می یابد.
در آزمایشی از Google Flights، اولویت را برای بهبود بزرگترین رنگ محتوایی از 2.6 ثانیه به 1.9 ثانیه واکشی کنید.

از لحاظ تاریخی، توسعه‌دهندگان با استفاده از پیش بارگذاری و اتصال اولیه ، تأثیر محدودی بر اولویت منابع داشته‌اند. Preload به شما امکان می دهد قبل از اینکه مرورگر به طور طبیعی آنها را کشف کند، در مورد منابع مهمی که می خواهید زودتر بارگیری کنید به مرورگر بگویید. این به ویژه برای منابعی مفید است که کشف آنها سخت تر است، مانند فونت های موجود در شیوه نامه ها، تصاویر پس زمینه یا منابع بارگذاری شده از یک اسکریپت. Preconnect به گرم کردن اتصالات به سرورهای متقاطع کمک می کند و می تواند به بهبود معیارهایی مانند Time to first byte کمک کند. زمانی مفید است که یک منبع را بدانید اما لزوماً URL دقیق منبعی را که مورد نیاز است نمی‌دانید.

واکشی اولویت مکمل این نکات منابع است. این یک سیگنال مبتنی بر نشانه گذاری است که از طریق ویژگی fetchpriority در دسترس است و توسعه دهندگان می توانند از آن برای نشان دادن اولویت نسبی یک منبع خاص استفاده کنند. همچنین می توانید از این نکات از طریق جاوا اسکریپت و Fetch API با ویژگی priority استفاده کنید تا بر اولویت واکشی منابع ساخته شده برای داده ها تأثیر بگذارید. واکشی اولویت همچنین می تواند تکمیل کننده پیش بارگذاری باشد. بزرگ‌ترین تصویر رنگ محتوای محتوا را بگیرید، که وقتی از قبل بارگذاری می‌شود، همچنان اولویت پایینی خواهد داشت. اگر توسط دیگر منابع اولیه با اولویت پایین به عقب برود، استفاده از اولویت واکشی می تواند به بارگذاری سریع تصویر کمک کند.

اولویت منابع

ترتیب دانلود منبع به اولویت اختصاص داده شده مرورگر برای هر منبع در صفحه بستگی دارد. عواملی که می توانند بر منطق محاسبات اولویت تأثیر بگذارند عبارتند از:

  • نوع منبع، مانند CSS، فونت ها، اسکریپت ها، تصاویر و منابع شخص ثالث.
  • مکان یا سفارش سند به منابع ارجاع می دهد.
  • این که آیا ویژگی‌های async یا defer در اسکریپت‌ها استفاده می‌شوند.

جدول زیر نشان می‌دهد که Chrome چگونه بیشتر منابع را اولویت‌بندی و ترتیب‌بندی می‌کند:

بارگذاری در مرحله مسدود کردن طرح بارگذاری یکباره در مرحله مسدود کردن طرح
پلک زدن
اولویت		 خیلی بالا بالا متوسط کم خیلی کم
DevTools
اولویت		 بالاترین بالا متوسط کم کمترین
منبع اصلی
CSS (اوایل **) CSS (تأخیر **) CSS (عدم تطابق رسانه***)
اسکریپت (اوایل** یا نه از اسکنر پیش بارگیری) اسکریپت (تأخیر **) اسکریپت (ناهمگام)
فونت قلم (rel=preload)
واردات
تصویر (در دید) تصویر (5 تصویر اول > 10000 پیکسل 2) تصویر
رسانه (تصویری/صوتی)
واکشی از پیش
XSL
XHR (همگام سازی) XHR/واکشی* (ناهمگام)

مرورگر منابع را با همان اولویت محاسبه شده به ترتیبی که کشف می کنند دانلود می کند. می‌توانید اولویت تخصیص داده‌شده به منابع مختلف را هنگام بارگیری صفحه در برگه « شبکه ابزارهای توسعه‌دهنده Chrome» بررسی کنید. (مطمئن شوید که ستون اولویت را با کلیک راست روی عناوین جدول و علامت زدن آن درج کرده اید).

برگه شبکه DevTools کروم که تعدادی از منابع فونت را فهرست می کند. همه آنها دارای بالاترین اولویت هستند.
اولویت برای type = "font" در صفحه جزئیات اخبار بی بی سی
برگه شبکه DevTools کروم که تعدادی از منابع فونت را فهرست می کند. آنها ترکیبی از اولویت کم و زیاد هستند.
اولویت برای type = "script" در صفحه جزئیات اخبار بی بی سی.

وقتی اولویت‌ها تغییر می‌کنند، می‌توانید اولویت اولیه و نهایی را در تنظیمات ردیف‌های درخواست بزرگ یا در یک راهنمای ابزار ببینید.

برگه شبکه DevTools کروم. تنظیم "ردیف های درخواست بزرگ" علامت زده می شود و ستون اولویت اولین تصویر را با اولویت High و اولویت اولیه متفاوتی از رسانه در زیر نشان می دهد. همین مورد در راهنمای ابزار نشان داده شده است.
تغییرات اولویت در DevTools.

چه زمانی ممکن است به اولویت واکشی نیاز داشته باشید؟

اکنون که منطق اولویت‌بندی مرورگر را درک کرده‌اید، می‌توانید ترتیب دانلود صفحه خود را برای بهینه‌سازی عملکرد و Core Web Vitals تغییر دهید. در اینجا چند نمونه از مواردی وجود دارد که می توانید برای تأثیرگذاری بر اولویت بارگیری منابع تغییر دهید:

  • برچسب‌های منبع مانند <script> و <link> را به ترتیبی که می‌خواهید مرورگر آنها را دانلود کند، قرار دهید. منابع با اولویت یکسان معمولاً به ترتیبی که کشف می شوند بارگذاری می شوند.
  • از راهنمایی منبع preload برای بارگیری منابع ضروری استفاده کنید ، به ویژه برای منابعی که به راحتی توسط مرورگر کشف نمی شوند.
  • از async یا defer برای دانلود اسکریپت ها بدون مسدود کردن منابع دیگر استفاده کنید.
  • محتوای پایین‌تر را با تنبلی بارگذاری کنید تا مرورگر بتواند از پهنای باند موجود برای منابع مهم‌تر در بالای صفحه استفاده کند.

این تکنیک‌ها به کنترل محاسبات اولویت مرورگر کمک می‌کنند و در نتیجه عملکرد و Core Web Vitals را بهبود می‌بخشند. به عنوان مثال، هنگامی که یک تصویر پس‌زمینه مهم از قبل بارگذاری می‌شود، می‌توان آن را خیلی زودتر کشف کرد و بزرگترین رنگ محتوایی ( LCP ) را بهبود بخشید.

گاهی اوقات ممکن است این دسته ها برای اولویت بندی منابع به طور مطلوب برای برنامه شما کافی نباشند. در اینجا برخی از سناریوهایی که واکشی اولویت می تواند مفید باشد آورده شده است:

  • شما چندین تصویر بالای صفحه دارید، اما همه آنها نباید اولویت یکسانی داشته باشند. به عنوان مثال، در یک چرخ فلک تصویر، تنها اولین تصویر قابل مشاهده نیاز به اولویت بیشتری دارد، و بقیه، معمولاً خارج از صفحه در ابتدا می توانند اولویت کمتری داشته باشند.
  • تصاویر داخل نما معمولاً با اولویت Low شروع می شوند. پس از تکمیل طرح‌بندی، Chrome متوجه می‌شود که آن‌ها در ویوپورت هستند و اولویت آن‌ها را افزایش می‌دهد. این معمولاً تأخیر قابل توجهی را برای بارگذاری تصاویر مهم مانند تصاویر قهرمان اضافه می کند. ارائه اولویت واکشی در نشانه‌گذاری به تصویر اجازه می‌دهد با اولویت High شروع شود و خیلی زودتر بارگذاری شود. در تلاشی برای خودکارسازی این امر، پنج تصویر بزرگ‌تر اول توسط کروم روی اولویت Medium ​​تنظیم شده‌اند که کمک می‌کند، اما یک fetchpriority="high" واضح حتی بهتر خواهد بود.

    برای کشف اولیه تصاویر LCP که به عنوان پس‌زمینه CSS گنجانده شده‌اند، پیش‌بارگذاری هنوز لازم است. برای افزایش اولویت تصاویر پس‌زمینه، fetchpriority='high' را در پیش‌بارگذاری قرار دهید.
  • اعلام اسکریپت‌ها به‌عنوان async یا defer به مرورگر می‌گوید آنها را به‌صورت ناهمزمان بارگذاری کند. با این حال، همانطور که در جدول اولویت نشان داده شده است، این اسکریپت ها نیز دارای اولویت "کم" هستند. ممکن است بخواهید در حین اطمینان از دانلود ناهمزمان، اولویت آنها را افزایش دهید، به ویژه برای اسکریپت هایی که برای تجربه کاربر حیاتی هستند.
  • اگر از API fetch() جاوا اسکریپت برای واکشی منابع یا داده‌ها به صورت ناهمزمان استفاده می‌کنید، مرورگر به آن اولویت High اختصاص می‌دهد. ممکن است بخواهید برخی از واکشی‌های شما با اولویت کمتری اجرا شوند، به‌خصوص اگر تماس‌های API پس‌زمینه را با تماس‌های API که به ورودی کاربر پاسخ می‌دهند، ترکیب می‌کنید. تماس‌های API پس‌زمینه را با اولویت Low و تماس‌های API تعاملی را با اولویت High علامت‌گذاری کنید.
  • مرورگر به CSS و فونت‌ها اولویت High اختصاص می‌دهد، اما برخی از این منابع ممکن است مهم‌تر از سایرین باشند. می توانید از Fetch Priority برای کاهش اولویت منابع غیر بحرانی استفاده کنید (توجه داشته باشید که CSS اولیه مسدود کردن رندر است بنابراین معمولاً باید اولویت High داشته باشد).

ویژگی fetchpriority

از ویژگی fetchpriority HTML برای تعیین اولویت دانلود برای انواع منابع مانند CSS، فونت ها، اسکریپت ها و تصاویر هنگام دانلود با استفاده از برچسب های link ، img یا script استفاده کنید. می تواند مقادیر زیر را بگیرد:

  • high : منبع از اولویت بالاتری برخوردار است و شما می خواهید مرورگر آن را بالاتر از حد معمول اولویت بندی کند، تا زمانی که اکتشافات اکتشافی خود مرورگر از این اتفاق جلوگیری نکند.
  • low : منبع از اولویت پایین تری برخوردار است و شما می خواهید مرورگر آن را از اولویت خارج کند، اگر اکتشافی آن اجازه دهد.
  • auto : مقدار پیش فرض که به مرورگر اجازه می دهد اولویت مناسب را انتخاب کند.

در اینجا چند نمونه از استفاده از ویژگی fetchpriority در نشانه گذاری و همچنین ویژگی priority معادل اسکریپت آورده شده است.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">

<script>
  fetch('https://example.com/', {priority: 'low'})
  .then(data => {
    // Trigger a low priority fetch
  });
</script>

اثرات اولویت مرورگر و fetchpriority

همانطور که در جدول زیر نشان داده شده است می توانید ویژگی fetchpriority را برای منابع مختلف اعمال کنید تا اولویت محاسبه شده آنها را افزایش یا کاهش دهید. fetchpriority="auto" (◉) در هر ردیف اولویت پیش‌فرض آن نوع منبع را مشخص می‌کند. (همچنین به عنوان Google Doc موجود است).

بارگذاری در مرحله مسدود کردن طرح در مرحله مسدود کردن طرح، یک به یک بارگذاری کنید
پلک زدن
اولویت		 خیلی بالا بالا متوسط کم خیلی کم
DevTools
اولویت		 بالاترین بالا متوسط کم کمترین
منبع اصلی ◉
CSS (اوایل **) ⬆◉ ⬇
CSS (تأخیر **) ⬆ ◉ ⬇
CSS (عدم تطابق رسانه***) ⬆*** ◉⬇
اسکریپت (اوایل** یا نه از اسکنر پیش بارگیری) ⬆◉ ⬇
اسکریپت (تأخیر **) ⬆ ◉ ⬇
اسکریپت (ناهمگام/به تعویق انداختن) ⬆ ◉⬇
فونت ◉
قلم (rel=preload) ⬆◉ ⬇
واردات ◉
تصویر (در دید - بعد از طرح بندی) ⬆◉ ⬇
تصویر (5 تصویر اول > 10000 پیکسل 2) ⬆ ◉ ⬇
تصویر ⬆ ◉⬇
رسانه (تصویری/صوتی) ◉
XHR (همگام سازی) - منسوخ شده است ◉
XHR/واکشی* (ناهمگام) ⬆◉ ⬇
واکشی از پیش ◉
XSL ◉

fetchpriority اولویت نسبی را تعیین می کند، به این معنی که به جای اینکه صراحتاً اولویت را روی High یا Low قرار دهد، اولویت پیش فرض را به مقدار مناسب افزایش یا کاهش می دهد. این اغلب منجر به اولویت High یا Low می شود، اما نه همیشه. برای مثال، CSS بحرانی با fetchpriority="high" اولویت "Very High"/"Highest" را حفظ می کند و استفاده از fetchpriority="low" در این عناصر، اولویت "High" را حفظ می کند. هیچ یک از این موارد شامل تنظیم صریح اولویت روی High یا Low نیست.

موارد استفاده کنید

زمانی که می خواهید به مرورگر راهنمایی بیشتری در مورد اولویت واکشی منبع بدهید، از ویژگی fetchpriority استفاده کنید.

اولویت تصویر LCP را افزایش دهید

شما می توانید fetchpriority="high" را برای افزایش اولویت LCP یا سایر تصاویر مهم تعیین کنید.

<img src="lcp-image.jpg" fetchpriority="high">

مقایسه زیر صفحه Google Flights را با تصویر پس‌زمینه LCP بارگیری شده با و بدون اولویت واکشی نشان می‌دهد. با تنظیم اولویت روی بالا، LCP از 2.6 به 1.9s بهبود یافت .

آزمایشی با استفاده از کارگران Cloudflare برای بازنویسی صفحه Google Flights با استفاده از اولویت واکشی انجام شد.

از fetchpriority="low" برای کاهش اولویت تصاویر بالای صفحه که فوراً مهم نیستند، برای مثال تصاویر خارج از صفحه در یک چرخ فلک تصویر، استفاده کنید.

<ul class="carousel">
  <img src="img/carousel-1.jpg" fetchpriority="high">
  <img src="img/carousel-2.jpg" fetchpriority="low">
  <img src="img/carousel-3.jpg" fetchpriority="low">
  <img src="img/carousel-4.jpg" fetchpriority="low">
</ul>

در حالی که تصاویر 2-4 خارج از نما خواهند بود، ممکن است "به اندازه کافی نزدیک" در نظر گرفته شوند تا آنها را به high افزایش دهد و همچنین بارگذاری شود، حتی اگر ویژگی load=lazy اضافه شود. بنابراین fetchpriority="low" راه حل صحیح برای این است.

در آزمایش قبلی با برنامه Oodle ، از این برای کاهش اولویت تصاویری که در بارگذاری ظاهر نمی شوند استفاده کردیم. زمان بارگذاری صفحه را 2 ثانیه کاهش داد.

مقایسه ای کنار هم از واکشی اولویت زمانی که در چرخ فلک تصویر برنامه Oodle استفاده می شود. در سمت چپ، مرورگر اولویت‌های پیش‌فرض را برای تصاویر چرخ فلک تعیین می‌کند، اما آن تصاویر را حدود دو ثانیه کندتر از نمونه سمت راست دانلود و رنگ می‌کند، که اولویت بالاتری را فقط برای اولین تصویر چرخ فلک تعیین می‌کند.
استفاده از اولویت بالا فقط برای اولین تصویر چرخ فلک باعث می شود صفحه سریعتر بارگیری شود.

اولویت منابع از پیش بارگذاری شده را کاهش دهید

برای جلوگیری از رقابت منابع از پیش بارگذاری شده با سایر منابع حیاتی، می توانید اولویت آنها را کاهش دهید. از این تکنیک با تصاویر، اسکریپت ها و CSS استفاده کنید.

<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" as="script" href="non-critical-script.js" fetchpriority="low">

<!-- Preload CSS without blocking render, or other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">

اولویت بندی مجدد اسکریپت ها

اسکریپت هایی که صفحه شما نیاز دارد تا تعاملی باشد باید به سرعت بارگیری شوند، اما نباید سایر منابع مسدود کننده رندر، حیاتی تر را مسدود کنند. می‌توانید این موارد را به‌عنوان async با اولویت بالا علامت‌گذاری کنید.

<script src="async_but_important.js" async fetchpriority="high"></script>

اگر اسکریپت به حالت‌های DOM خاصی متکی باشد، نمی‌توانید آن را به‌عنوان async علامت‌گذاری کنید. با این حال، اگر آنها بعداً در صفحه اجرا شوند، می توانید آنها را با اولویت کمتر بارگیری کنید:

<script src="blocking_but_unimportant.js" fetchpriority="low"></script>

هنگامی که تجزیه کننده به این اسکریپت برسد، این کار همچنان تجزیه کننده را مسدود می کند، اما اجازه می دهد محتوای قبل از این اولویت بندی شود.

یک جایگزین، در صورت نیاز به DOM تکمیل‌شده، استفاده از ویژگی defer (که به ترتیب بعد از DOMContentLoaded اجرا می‌شود) یا حتی در پایین صفحه async .

اولویت واکشی داده های غیر بحرانی را کاهش دهید

مرورگر fetch با اولویت بالا اجرا می کند. اگر چندین واکشی دارید که ممکن است همزمان اجرا شوند، می‌توانید از اولویت پیش‌فرض بالا برای واکشی داده‌های مهم‌تر استفاده کنید و اولویت داده‌های کمتر مهم را کاهش دهید.

// Important validation data (high by default)
let authenticate = await fetch('/user');

// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});

واکشی یادداشت های پیاده سازی اولویت

اولویت واکشی می تواند عملکرد را در موارد استفاده خاص بهبود بخشد، اما مواردی وجود دارد که هنگام استفاده از اولویت واکشی باید از آنها آگاه بود:

  • ویژگی fetchpriority یک اشاره است، نه یک دستورالعمل. مرورگر سعی می‌کند به اولویت توسعه‌دهنده احترام بگذارد، اما همچنین می‌تواند اولویت‌های اولویت منابع خود را برای اولویت منابع برای حل تضادها اعمال کند.

  • اولویت واکشی را با بارگذاری اولیه اشتباه نگیرید:

    • پیش بارگذاری یک واکشی اجباری است، نه یک اشاره.
    • Preload به مرورگر اجازه می دهد منبعی را زودتر کشف کند، اما همچنان منبع را با اولویت پیش فرض واکشی می کند. برعکس، واکشی اولویت به قابلیت کشف کمک نمی کند، اما به شما اجازه می دهد اولویت واکشی را افزایش یا کاهش دهید.
    • مشاهده و اندازه‌گیری اثرات یک پیش‌بارگذاری بسیار ساده‌تر از تأثیرات تغییر اولویت است.

    واکشی اولویت می‌تواند بارگذاری‌های اولیه را با افزایش دانه‌بندی اولویت‌بندی تکمیل کند. اگر قبلاً یک پیش بارگذاری را به عنوان یکی از اولین موارد در <head> برای یک تصویر LCP مشخص کرده اید، ممکن است اولویت واکشی high LCP را به میزان قابل توجهی بهبود نبخشد. با این حال، اگر پیش بارگذاری پس از بارگیری منابع دیگر اتفاق بیفتد، اولویت واکشی high می تواند LCP را بیشتر بهبود بخشد. اگر یک تصویر مهم یک تصویر پس زمینه CSS است، آن را با fetchpriority = "high" از قبل بارگذاری کنید.

  • بهبود زمان بارگذاری از اولویت‌بندی در محیط‌هایی که منابع بیشتری برای پهنای باند شبکه موجود رقابت می‌کنند، مرتبط‌تر است. این برای اتصالات HTTP/1.x که در آن دانلود موازی امکان پذیر نیست، یا در اتصالات HTTP/2 یا HTTP/3 با پهنای باند کم، رایج است. در این موارد، اولویت بندی می تواند به رفع تنگناها کمک کند.

  • CDN ها اولویت بندی HTTP/2 را به طور یکسان و به طور مشابه برای HTTP/3 پیاده سازی نمی کنند. حتی اگر مرورگر اولویت را از Fetch Priority اعلام کند، CDN ممکن است منابع را به ترتیب مشخص شده مجددا اولویت بندی کند. این امر آزمایش اولویت واکشی را دشوار می کند. اولویت ها هم به صورت داخلی در مرورگر اعمال می شوند و هم با پروتکل هایی که از اولویت بندی پشتیبانی می کنند (HTTP/2 و HTTP/3). هنوز هم ارزش دارد که از Fetch Priority فقط برای اولویت بندی مرورگر داخلی مستقل از CDN یا پشتیبانی مبدا استفاده کنید، زیرا اولویت ها اغلب زمانی که مرورگر منابع را درخواست می کند تغییر می کند. به عنوان مثال، منابع با اولویت پایین مانند تصاویر اغلب در زمانی که مرورگر موارد حیاتی <head> را پردازش می کند، از درخواست خودداری می شود.

  • ممکن است نتوانید اولویت واکشی را به عنوان بهترین روش در طراحی اولیه خود معرفی کنید. بعداً در چرخه توسعه خود، می توانید اولویت ها را به منابع مختلف در صفحه اختصاص دهید و اگر با انتظارات شما مطابقت نداشتند، می توانید Fetch Priority را برای بهینه سازی بیشتر معرفی کنید.

توسعه دهندگان باید از پیش بارگذاری برای هدف مورد نظر خود استفاده کنند - برای بارگذاری اولیه منابعی که توسط تجزیه کننده شناسایی نشده اند (فونت ها، واردات، تصاویر پس زمینه LCP). قرار دادن راهنمایی preload بر روی زمانی که منبع از قبل بارگذاری می شود تأثیر می گذارد.

اولویت واکشی در مورد نحوه واکشی منبع هنگام واکشی است.

نکاتی برای استفاده از پیش بارگذاری

هنگام استفاده از پیش بارگذاری موارد زیر را در نظر داشته باشید:

  • گنجاندن پیش بارگذاری در هدرهای HTTP آن را بر هر چیز دیگری در ترتیب بارگذاری قرار می دهد.
  • به طور کلی، برای هر چیزی که اولویت Medium ​​یا بالاتر دارد، به ترتیبی که تجزیه کننده به آنها می رسد، از قبل بارگذاری می شود. اگر در ابتدای HTML خود بارگذاری‌های پیش‌بارگذاری می‌کنید، مراقب باشید.
  • پیش بارگذاری فونت احتمالاً در انتهای سر یا ابتدای بدنه بهترین کار را دارد.
  • پیش‌بارگذاری‌های وارداتی (Dynamic import() یا modulepreload ) باید بعد از تگ اسکریپتی که نیاز به واردات دارد اجرا شود، بنابراین مطمئن شوید که اسکریپت ابتدا بارگیری یا تجزیه می‌شود تا بتوان در حین بارگذاری وابستگی‌های آن ارزیابی شود.
  • پیش بارگیری های تصویر به طور پیش فرض دارای اولویت Low یا Medium ​​هستند. آنها را نسبت به اسکریپت های همگام و سایر برچسب های با اولویت پایین یا پایین تر ترتیب دهید.

تاریخچه

واکشی اولویت برای اولین بار در کروم به عنوان یک آزمایش اولیه در سال 2018 و سپس دوباره در سال 2021 با استفاده از ویژگی importance آزمایش شد. در آن زمان به آن نکات اولویتی می گفتند. این رابط از آن زمان به عنوان بخشی از فرآیند استانداردهای وب به fetchpriority برای HTML و priority برای Fetch API جاوا اسکریپت تغییر کرده است. برای کاهش سردرگمی، اکنون این API را اولویت واکشی می نامیم.

نتیجه گیری

توسعه دهندگان احتمالاً با اصلاح رفتار پیش بارگذاری و تمرکز اخیر بر Core Web Vitals و LCP به اولویت واکشی علاقه مند هستند. آنها اکنون دستگیره های اضافی در دسترس دارند تا به ترتیب بارگذاری مورد نظر خود دست یابند.

،

Fetch Priority API اولویت نسبی منابع را به مرورگر نشان می دهد. می تواند بارگذاری بهینه را فعال کند و Core Web Vitals را بهبود بخشد.

آدی عثمانی
Addy Osmani
X GitHub
لینا سوهونی
Leena Sohoni
X
پاتریک مینان
Patrick Meenan
X
بری پولارد

پشتیبانی مرورگر

  • کروم: 102.
  • لبه: 102.
  • فایرفاکس: پشت پرچم
  • سافاری: 17.2.

منبع

هنگامی که مرورگر یک صفحه وب را تجزیه می کند و شروع به کشف و دانلود منابعی مانند تصاویر، اسکریپت ها یا CSS می کند، به آنها priority واکشی اختصاص می دهد تا بتواند آنها را به ترتیب بهینه دانلود کند. اولویت یک منبع معمولاً به این بستگی دارد که آن منبع چیست و در کجای سند قرار دارد. برای مثال، ممکن است تصاویر درون‌نمای دارای اولویت High باشند، و اولویت برای CSSهای بارگذاری‌شده زودهنگام و مسدودکننده رندر با استفاده از <link> در <head> ممکن است Very High باشد. مرورگرها در تعیین اولویت هایی که به خوبی کار می کنند بسیار خوب هستند اما ممکن است در همه موارد بهینه نباشند.

این صفحه درباره Fetch Priority API و ویژگی fetchpriority HTML بحث می‌کند، که به شما امکان می‌دهد به اولویت نسبی یک منبع ( high یا low ) اشاره کنید. واکشی اولویت می تواند به بهینه سازی Core Web Vitals کمک کند.

خلاصه

چند زمینه کلیدی که اولویت واکشی می تواند به آنها کمک کند:

  • افزایش اولویت تصویر LCP با مشخص کردن fetchpriority="high" در عنصر تصویر، باعث می شود LCP زودتر اتفاق بیفتد.
  • افزایش اولویت اسکریپت های async ، با استفاده از معنایی بهتر از رایج ترین هک فعلی (درج <link rel="preload"> برای اسکریپت async ).
  • کاهش اولویت اسکریپت‌های بدنه آخر برای امکان توالی بهتر با تصاویر.
نمای فیلمی که دو تست صفحه اصلی Google Flights را مقایسه می کند. در پایین، از Fetch Priority برای تقویت اولویت تصویر قهرمان استفاده می شود که در نتیجه LCP 0.7 ثانیه کاهش می یابد.
در آزمایشی از Google Flights، اولویت را برای بهبود بزرگترین رنگ محتوایی از 2.6 ثانیه به 1.9 ثانیه واکشی کنید.

از لحاظ تاریخی، توسعه‌دهندگان با استفاده از پیش بارگذاری و اتصال اولیه ، تأثیر محدودی بر اولویت منابع داشته‌اند. Preload به شما امکان می دهد قبل از اینکه مرورگر به طور طبیعی آنها را کشف کند، در مورد منابع مهمی که می خواهید زودتر بارگیری کنید به مرورگر بگویید. این به ویژه برای منابعی مفید است که کشف آنها سخت تر است، مانند فونت های موجود در شیوه نامه ها، تصاویر پس زمینه یا منابع بارگذاری شده از یک اسکریپت. Preconnect به گرم کردن اتصالات به سرورهای متقاطع کمک می کند و می تواند به بهبود معیارهایی مانند Time to first byte کمک کند. زمانی مفید است که یک منبع را بدانید اما لزوماً URL دقیق منبعی را که مورد نیاز است نمی‌دانید.

واکشی اولویت مکمل این نکات منابع است. این یک سیگنال مبتنی بر نشانه گذاری است که از طریق ویژگی fetchpriority در دسترس است و توسعه دهندگان می توانند از آن برای نشان دادن اولویت نسبی یک منبع خاص استفاده کنند. همچنین می توانید از این نکات از طریق جاوا اسکریپت و Fetch API با ویژگی priority استفاده کنید تا بر اولویت واکشی منابع ساخته شده برای داده ها تأثیر بگذارید. واکشی اولویت همچنین می تواند تکمیل کننده پیش بارگذاری باشد. بزرگ‌ترین تصویر رنگ محتوای محتوا را بگیرید، که وقتی از قبل بارگذاری می‌شود، همچنان اولویت پایینی خواهد داشت. اگر توسط دیگر منابع اولیه با اولویت پایین به عقب برود، استفاده از اولویت واکشی می تواند به بارگذاری سریع تصویر کمک کند.

اولویت منابع

ترتیب دانلود منبع به اولویت اختصاص داده شده مرورگر برای هر منبع در صفحه بستگی دارد. عواملی که می توانند بر منطق محاسبات اولویت تأثیر بگذارند عبارتند از:

  • نوع منبع، مانند CSS، فونت ها، اسکریپت ها، تصاویر و منابع شخص ثالث.
  • مکان یا سفارش سند به منابع ارجاع می دهد.
  • این که آیا ویژگی‌های async یا defer در اسکریپت‌ها استفاده می‌شوند.

جدول زیر نشان می‌دهد که Chrome چگونه بیشتر منابع را اولویت‌بندی و ترتیب‌بندی می‌کند:

بارگذاری در مرحله مسدود کردن طرح بارگذاری یکباره در مرحله مسدود کردن طرح
پلک زدن
اولویت		 خیلی بالا بالا متوسط کم خیلی کم
DevTools
اولویت		 بالاترین بالا متوسط کم کمترین
منبع اصلی
CSS (اوایل **) CSS (تأخیر **) CSS (عدم تطابق رسانه***)
اسکریپت (اوایل** یا نه از اسکنر پیش بارگیری) اسکریپت (تأخیر **) اسکریپت (ناهمگام)
فونت قلم (rel=preload)
واردات
تصویر (در دید) تصویر (5 تصویر اول > 10000 پیکسل 2) تصویر
رسانه (تصویری/صوتی)
واکشی از پیش
XSL
XHR (همگام سازی) XHR/واکشی* (ناهمگام)

مرورگر منابع را با همان اولویت محاسبه شده به ترتیبی که کشف می کنند دانلود می کند. می‌توانید اولویت تخصیص داده‌شده به منابع مختلف را هنگام بارگیری صفحه در برگه « شبکه ابزارهای توسعه‌دهنده Chrome» بررسی کنید. (مطمئن شوید که ستون اولویت را با کلیک راست روی عناوین جدول و علامت زدن آن درج کرده اید).

برگه شبکه DevTools کروم که تعدادی از منابع فونت را فهرست می کند. همه آنها دارای بالاترین اولویت هستند.
اولویت برای type = "font" در صفحه جزئیات اخبار بی بی سی
برگه شبکه DevTools کروم که تعدادی از منابع فونت را فهرست می کند. آنها ترکیبی از اولویت کم و زیاد هستند.
اولویت برای type = "script" در صفحه جزئیات اخبار بی بی سی.

وقتی اولویت‌ها تغییر می‌کنند، می‌توانید اولویت اولیه و نهایی را در تنظیمات ردیف‌های درخواست بزرگ یا در یک راهنمای ابزار ببینید.

برگه شبکه DevTools کروم. تنظیم "ردیف های درخواست بزرگ" علامت زده می شود و ستون اولویت اولین تصویر را با اولویت High و اولویت اولیه متفاوتی از رسانه در زیر نشان می دهد. همین مورد در راهنمای ابزار نشان داده شده است.
تغییرات اولویت در DevTools.

چه زمانی ممکن است به اولویت واکشی نیاز داشته باشید؟

اکنون که منطق اولویت‌بندی مرورگر را درک کرده‌اید، می‌توانید ترتیب دانلود صفحه خود را برای بهینه‌سازی عملکرد و Core Web Vitals تغییر دهید. در اینجا چند نمونه از مواردی وجود دارد که می توانید برای تأثیرگذاری بر اولویت بارگیری منابع تغییر دهید:

  • برچسب‌های منبع مانند <script> و <link> را به ترتیبی که می‌خواهید مرورگر آنها را دانلود کند، قرار دهید. منابع با اولویت یکسان معمولاً به ترتیبی که کشف می شوند بارگذاری می شوند.
  • از راهنمایی منبع preload برای بارگیری منابع ضروری استفاده کنید ، به ویژه برای منابعی که به راحتی توسط مرورگر کشف نمی شوند.
  • از async یا defer برای دانلود اسکریپت ها بدون مسدود کردن منابع دیگر استفاده کنید.
  • محتوای پایین‌تر را با تنبلی بارگذاری کنید تا مرورگر بتواند از پهنای باند موجود برای منابع مهم‌تر در بالای صفحه استفاده کند.

این تکنیک‌ها به کنترل محاسبات اولویت مرورگر کمک می‌کنند و در نتیجه عملکرد و Core Web Vitals را بهبود می‌بخشند. به عنوان مثال، هنگامی که یک تصویر پس‌زمینه مهم از قبل بارگذاری می‌شود، می‌توان آن را خیلی زودتر کشف کرد و بزرگترین رنگ محتوایی ( LCP ) را بهبود بخشید.

گاهی اوقات ممکن است این دسته ها برای اولویت بندی منابع به طور مطلوب برای برنامه شما کافی نباشند. در اینجا برخی از سناریوهایی که واکشی اولویت می تواند مفید باشد آورده شده است:

  • شما چندین تصویر بالای صفحه دارید، اما همه آنها نباید اولویت یکسانی داشته باشند. به عنوان مثال، در یک چرخ فلک تصویر، تنها اولین تصویر قابل مشاهده نیاز به اولویت بیشتری دارد، و بقیه، معمولاً خارج از صفحه در ابتدا می توانند اولویت کمتری داشته باشند.
  • تصاویر داخل نما معمولاً با اولویت Low شروع می شوند. پس از تکمیل طرح‌بندی، Chrome متوجه می‌شود که آن‌ها در ویوپورت هستند و اولویت آن‌ها را افزایش می‌دهد. این معمولاً تأخیر قابل توجهی را برای بارگذاری تصاویر مهم مانند تصاویر قهرمان اضافه می کند. ارائه اولویت واکشی در نشانه‌گذاری به تصویر اجازه می‌دهد با اولویت High شروع شود و خیلی زودتر بارگذاری شود. در تلاشی برای خودکارسازی این امر، پنج تصویر بزرگ‌تر اول توسط کروم روی اولویت Medium ​​تنظیم شده‌اند که کمک می‌کند، اما یک fetchpriority="high" واضح حتی بهتر خواهد بود.

    برای کشف اولیه تصاویر LCP که به عنوان پس‌زمینه CSS گنجانده شده‌اند، پیش‌بارگذاری هنوز لازم است. برای افزایش اولویت تصاویر پس‌زمینه، fetchpriority='high' را در پیش‌بارگذاری قرار دهید.
  • اعلام اسکریپت‌ها به‌عنوان async یا defer به مرورگر می‌گوید آنها را به‌صورت ناهمزمان بارگذاری کند. با این حال، همانطور که در جدول اولویت نشان داده شده است، این اسکریپت ها نیز دارای اولویت "کم" هستند. ممکن است بخواهید در حین اطمینان از دانلود ناهمزمان، اولویت آنها را افزایش دهید، به ویژه برای اسکریپت هایی که برای تجربه کاربر حیاتی هستند.
  • اگر از API fetch() جاوا اسکریپت برای واکشی منابع یا داده‌ها به صورت ناهمزمان استفاده می‌کنید، مرورگر به آن اولویت High اختصاص می‌دهد. ممکن است بخواهید برخی از واکشی‌های شما با اولویت کمتری اجرا شوند، به‌خصوص اگر تماس‌های API پس‌زمینه را با تماس‌های API که به ورودی کاربر پاسخ می‌دهند، ترکیب می‌کنید. تماس‌های API پس‌زمینه را با اولویت Low و تماس‌های API تعاملی را با اولویت High علامت‌گذاری کنید.
  • مرورگر به CSS و فونت‌ها اولویت High اختصاص می‌دهد، اما برخی از این منابع ممکن است مهم‌تر از سایرین باشند. می توانید از Fetch Priority برای کاهش اولویت منابع غیر بحرانی استفاده کنید (توجه داشته باشید که CSS اولیه مسدود کردن رندر است بنابراین معمولاً باید اولویت High داشته باشد).

ویژگی fetchpriority

از ویژگی fetchpriority HTML برای تعیین اولویت دانلود برای انواع منابع مانند CSS، فونت ها، اسکریپت ها و تصاویر هنگام دانلود با استفاده از برچسب های link ، img یا script استفاده کنید. می تواند مقادیر زیر را بگیرد:

  • high : منبع از اولویت بالاتری برخوردار است و شما می خواهید مرورگر آن را بالاتر از حد معمول اولویت بندی کند، تا زمانی که اکتشافات اکتشافی خود مرورگر از این اتفاق جلوگیری نکند.
  • low : منبع از اولویت پایین تری برخوردار است و شما می خواهید مرورگر آن را از اولویت خارج کند، اگر اکتشافی آن اجازه دهد.
  • auto : مقدار پیش فرض که به مرورگر اجازه می دهد اولویت مناسب را انتخاب کند.

در اینجا چند نمونه از استفاده از ویژگی fetchpriority در نشانه گذاری و همچنین ویژگی priority معادل اسکریپت آورده شده است.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">

<script>
  fetch('https://example.com/', {priority: 'low'})
  .then(data => {
    // Trigger a low priority fetch
  });
</script>

اثرات اولویت مرورگر و fetchpriority

همانطور که در جدول زیر نشان داده شده است می توانید ویژگی fetchpriority را برای منابع مختلف اعمال کنید تا اولویت محاسبه شده آنها را افزایش یا کاهش دهید. fetchpriority="auto" (◉) در هر ردیف اولویت پیش‌فرض آن نوع منبع را مشخص می‌کند. (همچنین به عنوان Google Doc موجود است).

بارگذاری در مرحله مسدود کردن طرح در مرحله مسدود کردن طرح، یک به یک بارگذاری کنید
پلک زدن
اولویت		 خیلی بالا بالا متوسط کم خیلی کم
DevTools
اولویت		 بالاترین بالا متوسط کم کمترین
منبع اصلی ◉
CSS (اوایل **) ⬆◉ ⬇
CSS (تأخیر **) ⬆ ◉ ⬇
CSS (عدم تطابق رسانه***) ⬆*** ◉⬇
اسکریپت (اوایل** یا نه از اسکنر پیش بارگیری) ⬆◉ ⬇
اسکریپت (تأخیر **) ⬆ ◉ ⬇
اسکریپت (ناهمگام/به تعویق انداختن) ⬆ ◉⬇
فونت ◉
قلم (rel=preload) ⬆◉ ⬇
واردات ◉
تصویر (در دید - بعد از طرح بندی) ⬆◉ ⬇
تصویر (5 تصویر اول > 10000 پیکسل 2) ⬆ ◉ ⬇
تصویر ⬆ ◉⬇
رسانه (تصویری/صوتی) ◉
XHR (همگام سازی) - منسوخ شده است ◉
XHR/واکشی* (ناهمگام) ⬆◉ ⬇
واکشی از پیش ◉
XSL ◉

fetchpriority اولویت نسبی را تعیین می کند، به این معنی که به جای اینکه صراحتاً اولویت را روی High یا Low قرار دهد، اولویت پیش فرض را به مقدار مناسب افزایش یا کاهش می دهد. این اغلب منجر به اولویت High یا Low می شود، اما نه همیشه. برای مثال، CSS بحرانی با fetchpriority="high" اولویت "Very High"/"Highest" را حفظ می کند و استفاده از fetchpriority="low" در این عناصر، اولویت "High" را حفظ می کند. هیچ یک از این موارد شامل تنظیم صریح اولویت روی High یا Low نیست.

موارد استفاده کنید

زمانی که می خواهید به مرورگر راهنمایی بیشتری در مورد اولویت واکشی منبع بدهید، از ویژگی fetchpriority استفاده کنید.

اولویت تصویر LCP را افزایش دهید

شما می توانید fetchpriority="high" را برای افزایش اولویت LCP یا سایر تصاویر مهم تعیین کنید.

<img src="lcp-image.jpg" fetchpriority="high">

مقایسه زیر صفحه Google Flights را با تصویر پس‌زمینه LCP بارگیری شده با و بدون اولویت واکشی نشان می‌دهد. با تنظیم اولویت روی بالا، LCP از 2.6 به 1.9s بهبود یافت .

آزمایشی با استفاده از کارگران Cloudflare برای بازنویسی صفحه Google Flights با استفاده از اولویت واکشی انجام شد.

از fetchpriority="low" برای کاهش اولویت تصاویر بالای صفحه که فوراً مهم نیستند، برای مثال تصاویر خارج از صفحه در یک چرخ فلک تصویر، استفاده کنید.

<ul class="carousel">
  <img src="img/carousel-1.jpg" fetchpriority="high">
  <img src="img/carousel-2.jpg" fetchpriority="low">
  <img src="img/carousel-3.jpg" fetchpriority="low">
  <img src="img/carousel-4.jpg" fetchpriority="low">
</ul>

در حالی که تصاویر 2-4 خارج از نما خواهند بود، ممکن است "به اندازه کافی نزدیک" در نظر گرفته شوند تا آنها را به high افزایش دهد و همچنین بارگذاری شود، حتی اگر ویژگی load=lazy اضافه شود. بنابراین fetchpriority="low" راه حل صحیح برای این است.

در آزمایش قبلی با برنامه Oodle ، از این برای کاهش اولویت تصاویری که در بارگذاری ظاهر نمی شوند استفاده کردیم. زمان بارگذاری صفحه را 2 ثانیه کاهش داد.

مقایسه ای کنار هم از واکشی اولویت زمانی که در چرخ فلک تصویر برنامه Oodle استفاده می شود. در سمت چپ، مرورگر اولویت‌های پیش‌فرض را برای تصاویر چرخ فلک تعیین می‌کند، اما آن تصاویر را حدود دو ثانیه کندتر از نمونه سمت راست دانلود و رنگ می‌کند، که اولویت بالاتری را فقط برای اولین تصویر چرخ فلک تعیین می‌کند.
استفاده از اولویت بالا فقط برای اولین تصویر چرخ فلک باعث می شود صفحه سریعتر بارگیری شود.

اولویت منابع از پیش بارگذاری شده را کاهش دهید

برای جلوگیری از رقابت منابع از پیش بارگذاری شده با سایر منابع حیاتی، می توانید اولویت آنها را کاهش دهید. از این تکنیک با تصاویر، اسکریپت ها و CSS استفاده کنید.

<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" as="script" href="non-critical-script.js" fetchpriority="low">

<!-- Preload CSS without blocking render, or other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">

اولویت بندی مجدد اسکریپت ها

اسکریپت هایی که صفحه شما نیاز دارد تا تعاملی باشد باید به سرعت بارگیری شوند، اما نباید سایر منابع مسدود کننده رندر، حیاتی تر را مسدود کنند. می‌توانید این موارد را به‌عنوان async با اولویت بالا علامت‌گذاری کنید.

<script src="async_but_important.js" async fetchpriority="high"></script>

اگر اسکریپت به حالت‌های DOM خاصی متکی باشد، نمی‌توانید آن را به‌عنوان async علامت‌گذاری کنید. با این حال، اگر آنها بعداً در صفحه اجرا شوند، می توانید آنها را با اولویت کمتر بارگیری کنید:

<script src="blocking_but_unimportant.js" fetchpriority="low"></script>

هنگامی که تجزیه کننده به این اسکریپت برسد، این کار همچنان تجزیه کننده را مسدود می کند، اما اجازه می دهد محتوای قبل از این اولویت بندی شود.

یک جایگزین، در صورت نیاز به DOM تکمیل‌شده، استفاده از ویژگی defer (که به ترتیب بعد از DOMContentLoaded اجرا می‌شود) یا حتی در پایین صفحه async .

اولویت واکشی داده های غیر بحرانی را کاهش دهید

مرورگر fetch با اولویت بالا اجرا می کند. اگر چندین واکشی دارید که ممکن است همزمان اجرا شوند، می‌توانید از اولویت پیش‌فرض بالا برای واکشی داده‌های مهم‌تر استفاده کنید و اولویت داده‌های کمتر مهم را کاهش دهید.

// Important validation data (high by default)
let authenticate = await fetch('/user');

// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});

واکشی یادداشت های پیاده سازی اولویت

اولویت واکشی می تواند عملکرد را در موارد استفاده خاص بهبود بخشد، اما مواردی وجود دارد که هنگام استفاده از اولویت واکشی باید از آنها آگاه بود:

  • ویژگی fetchpriority یک اشاره است، نه یک دستورالعمل. مرورگر سعی می‌کند به اولویت توسعه‌دهنده احترام بگذارد، اما همچنین می‌تواند اولویت‌های اولویت منابع خود را برای اولویت منابع برای حل تضادها اعمال کند.

  • اولویت واکشی را با بارگذاری اولیه اشتباه نگیرید:

    • پیش بارگذاری یک واکشی اجباری است، نه یک اشاره.
    • Preload به مرورگر اجازه می دهد منبعی را زودتر کشف کند، اما همچنان منبع را با اولویت پیش فرض واکشی می کند. برعکس، واکشی اولویت به قابلیت کشف کمک نمی کند، اما به شما اجازه می دهد اولویت واکشی را افزایش یا کاهش دهید.
    • مشاهده و اندازه‌گیری اثرات یک پیش‌بارگذاری بسیار ساده‌تر از تأثیرات تغییر اولویت است.

    واکشی اولویت می‌تواند بارگذاری‌های اولیه را با افزایش دانه‌بندی اولویت‌بندی تکمیل کند. اگر قبلاً یک پیش بارگذاری را به عنوان یکی از اولین موارد در <head> برای یک تصویر LCP مشخص کرده اید، ممکن است اولویت واکشی high LCP را به میزان قابل توجهی بهبود نبخشد. با این حال، اگر پیش بارگذاری پس از بارگیری منابع دیگر اتفاق بیفتد، اولویت واکشی high می تواند LCP را بیشتر بهبود بخشد. اگر یک تصویر مهم یک تصویر پس زمینه CSS است، آن را با fetchpriority = "high" از قبل بارگذاری کنید.

  • بهبود زمان بارگذاری از اولویت‌بندی در محیط‌هایی که منابع بیشتری برای پهنای باند شبکه موجود رقابت می‌کنند، مرتبط‌تر است. این برای اتصالات HTTP/1.x که در آن دانلود موازی امکان پذیر نیست، یا در اتصالات HTTP/2 یا HTTP/3 با پهنای باند کم، رایج است. در این موارد، اولویت بندی می تواند به رفع تنگناها کمک کند.

  • CDN ها اولویت بندی HTTP/2 را به طور یکسان و به طور مشابه برای HTTP/3 پیاده سازی نمی کنند. حتی اگر مرورگر اولویت را از Fetch Priority اعلام کند، CDN ممکن است منابع را به ترتیب مشخص شده مجددا اولویت بندی کند. این امر آزمایش اولویت واکشی را دشوار می کند. اولویت ها هم به صورت داخلی در مرورگر اعمال می شوند و هم با پروتکل هایی که از اولویت بندی پشتیبانی می کنند (HTTP/2 و HTTP/3). هنوز هم ارزش دارد که از Fetch Priority فقط برای اولویت بندی مرورگر داخلی مستقل از CDN یا پشتیبانی مبدا استفاده کنید، زیرا اولویت ها اغلب زمانی که مرورگر منابع را درخواست می کند تغییر می کند. به عنوان مثال، منابع با اولویت پایین مانند تصاویر اغلب در زمانی که مرورگر موارد حیاتی <head> را پردازش می کند، از درخواست خودداری می شود.

  • ممکن است نتوانید اولویت واکشی را به عنوان بهترین روش در طراحی اولیه خود معرفی کنید. بعداً در چرخه توسعه خود، می توانید اولویت ها را به منابع مختلف در صفحه اختصاص دهید و اگر با انتظارات شما مطابقت نداشتند، می توانید Fetch Priority را برای بهینه سازی بیشتر معرفی کنید.

توسعه دهندگان باید از پیش بارگذاری برای هدف مورد نظر خود استفاده کنند - برای بارگذاری اولیه منابعی که توسط تجزیه کننده شناسایی نشده اند (فونت ها، واردات، تصاویر پس زمینه LCP). قرار دادن راهنمایی preload بر روی زمانی که منبع از قبل بارگذاری می شود تأثیر می گذارد.

اولویت واکشی در مورد نحوه واکشی منبع هنگام واکشی است.

نکاتی برای استفاده از پیش بارگذاری

هنگام استفاده از پیش بارگذاری موارد زیر را در نظر داشته باشید:

  • گنجاندن پیش بارگذاری در هدرهای HTTP آن را بر هر چیز دیگری در ترتیب بارگذاری قرار می دهد.
  • به طور کلی، برای هر چیزی که اولویت Medium ​​یا بالاتر دارد، به ترتیبی که تجزیه کننده به آنها می رسد، از قبل بارگذاری می شود. اگر در ابتدای HTML خود بارگذاری‌های پیش‌بارگذاری می‌کنید، مراقب باشید.
  • پیش بارگذاری فونت احتمالاً در انتهای سر یا ابتدای بدنه بهترین کار را دارد.
  • پیش‌بارگذاری‌های وارداتی (Dynamic import() یا modulepreload ) باید بعد از تگ اسکریپتی که نیاز به واردات دارد اجرا شود، بنابراین مطمئن شوید که اسکریپت ابتدا بارگیری یا تجزیه می‌شود تا بتوان در حین بارگذاری وابستگی‌های آن ارزیابی شود.
  • پیش بارگیری های تصویر به طور پیش فرض دارای اولویت Low یا Medium ​​هستند. آنها را نسبت به اسکریپت های همگام و سایر برچسب های با اولویت پایین یا پایین تر ترتیب دهید.

تاریخچه

واکشی اولویت برای اولین بار در کروم به عنوان یک آزمایش اولیه در سال 2018 و سپس دوباره در سال 2021 با استفاده از ویژگی importance آزمایش شد. در آن زمان به آن نکات اولویتی می گفتند. این رابط از آن زمان به عنوان بخشی از فرآیند استانداردهای وب به fetchpriority برای HTML و priority برای Fetch API جاوا اسکریپت تغییر کرده است. برای کاهش سردرگمی، اکنون این API را اولویت واکشی می نامیم.

نتیجه گیری

توسعه دهندگان احتمالاً با اصلاح رفتار پیش بارگذاری و تمرکز اخیر بر Core Web Vitals و LCP به اولویت واکشی علاقه مند هستند. آنها اکنون دستگیره های اضافی در دسترس دارند تا به ترتیب بارگذاری مورد نظر خود دست یابند.