بهینه سازی بارگیری منابع با Fetch Priority API

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

آدی عثمانی
آدی عثمانی
ایکس
لینا سوهونی
لینا سوهونی
پاتریک مینان
پاتریک مینان
بری پولارد
بری پولارد

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

  • 102
  • 102
  • ایکس
  • 17.2

منبع

هنگامی که یک مرورگر یک صفحه وب را تجزیه می کند و شروع به کشف و دانلود منابعی مانند تصاویر، اسکریپت ها یا CSS می کند، در تلاش برای دانلود منابع به ترتیب بهینه، priority واکشی به آنها اختصاص می دهد. این اولویت ها می تواند به نوع منبع و محل آن در سند بستگی داشته باشد. به عنوان مثال، تصاویر in-viewport ممکن است اولویت 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 برای تقویت اولویت تصویر قهرمان استفاده می شود که منجر به کاهش 0.7 ثانیه در LCP می شود.
واکشی اولویت برای بهبود بزرگترین رنگ محتوایی از 2.6 ثانیه به 1.9 ثانیه در آزمایش Google Flights

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

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

اولویت واکشی در Chrome 101 یا جدیدتر در دسترس است.

اولویت منابع

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

  • CSS، فونت ها، اسکریپت ها، تصاویر و منابع شخص ثالث اولویت های متفاوتی دارند.
  • مکان یا ترتیبی که منابع را در سند ارجاع می دهید نیز بر اولویت منابع تأثیر می گذارد.
  • اشاره منبع preload به مرورگر کمک می کند تا یک منبع را سریعتر کشف کند و بنابراین آن را قبل از بارگیری سند بارگیری کند و بر اولویت ها تأثیر بگذارد.
  • تغییرات محاسبات اولویت برای اسکریپت‌های async یا defer .

جدول زیر چنین عواملی را در نظر می گیرد تا نشان دهد چگونه اکثر منابع در حال حاضر در کروم اولویت بندی و ترتیب بندی می شوند.

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

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

تصویری از دارایی‌های فهرست شده در برگه شبکه ابزارهای توسعه کروم. ستون ها از چپ به راست خوانده می شوند: نام، وضعیت، نوع، آغازگر، اندازه، زمان و اولویت.
اولویت برای type = "font" در صفحه جزئیات اخبار بی بی سی
تصویری از دارایی‌های فهرست شده در برگه شبکه ابزارهای توسعه کروم. ستون ها از چپ به راست خوانده می شوند: نام، وضعیت، نوع، آغازگر، اندازه، زمان و اولویت.
اولویت برای نوع منبع = "اسکریپت" در صفحه جزئیات اخبار بی بی سی

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

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

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

آگاهی از منطق اولویت‌بندی مرورگر، چند دکمه موجود را در اختیار شما قرار می‌دهد تا ترتیب دانلودها را تغییر دهید. تو می توانی

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

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

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

  1. شما چندین تصویر بالای صفحه دارید، اما لازم نیست همه آنها اولویت یکسانی داشته باشند. به عنوان مثال، در یک چرخ فلک تصویر، تنها اولین تصویر قابل مشاهده به اولویت بالاتری نسبت به بقیه نیاز دارد.
  2. تصاویر قهرمان در داخل درگاه نمایش معمولاً با اولویت «کم» شروع می‌شوند (توجه داشته باشید که تغییر در Chrome 117، پنج تصویر بزرگ اول را روی «متوسط» تنظیم می‌کند، اما ممکن است تصویر قهرمان شما را شامل شود یا نباشد). پس از تکمیل طرح‌بندی، کروم متوجه می‌شود که آن‌ها در ویوپورت هستند و اولویت آن‌ها را افزایش می‌دهد. این معمولاً تاخیر قابل توجهی در بارگذاری تصویر اضافه می کند. ارائه اولویت واکشی در نشانه‌گذاری به تصویر اجازه می‌دهد با اولویت «بالا» شروع شود و خیلی زودتر بارگذاری شود.

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

ویژگی fetchpriority

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

  • 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) ⬆ ◉ ⬇
تصویر ⬆ ◉⬇
رسانه (تصویری/صوتی) ⬆ ◉⬇
سند SVG ⬆ ◉⬇
XHR (همگام سازی) - منسوخ شده است ◉
XHR/واکشی* (ناهمگام) ⬆◉ ⬇
واکشی از پیش ◉
XSL ◉

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

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

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

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

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

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

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

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

اولویت تصاویر بالای صفحه را کاهش دهید

می‌توانید از 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>

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

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

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

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

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

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

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

اسکریپت های مورد نیاز برای تعاملی کردن برخی از قسمت های صفحه ضروری هستند اما نباید سایر منابع را مسدود کنند. می‌توانید این موارد را به‌عنوان ناهمگام با اولویت بالا علامت‌گذاری کنید.

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

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

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

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

مرورگر 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 به سود قابل توجهی منجر نشود. با این حال، اگر پیش بارگذاری پس از منابع دیگر بود، اولویت واکشی high می تواند LCP را بهبود بخشد. اگر یک تصویر مهم یک تصویر پس زمینه CSS است، باید آن را با fetchpriority = "high" قبل بارگذاری کنید.

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

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

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

استفاده از Preload بعد از Chrome 95

ویژگی Fetch Priority برای آزمایشی در Chrome 73 تا 76 در دسترس بود اما به دلیل مشکلات اولویت‌بندی با بارگیری‌های پیش‌فرض رفع‌شده در Chrome 95 منتشر نشد. قبل از Chrome 95، درخواست‌های صادر شده از طریق <link rel=preload> همیشه قبل از مشاهده سایر درخواست‌ها شروع می‌شوند. اسکنر پیش بارگذاری، حتی اگر درخواست های دیگر اولویت بیشتری داشته باشند.

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

  • گنجاندن پیش بارگذاری در هدرهای HTTP باعث می شود که از هر چیز دیگری جلوتر بپرد.
  • به طور کلی، پیش‌بارگذاری‌ها به ترتیبی که تجزیه‌کننده برای هر چیزی بالاتر از اولویت «متوسط» به آن‌ها می‌رسد بارگیری می‌شوند—بنابراین مراقب باشید اگر از پیش‌بارگذاری‌ها در ابتدای HTML استفاده می‌کنید.
  • پیش بارگذاری فونت احتمالاً در انتهای سر یا ابتدای بدنه بهترین عملکرد را دارد.
  • پیش‌بارگذاری‌های وارد کردن (Dynamic import() یا modulepreload ) باید بعد از تگ اسکریپتی که نیاز به وارد کردن دارد انجام شود (بنابراین اسکریپت واقعی ابتدا بارگذاری/تجزیه می‌شود). اساساً، اگر تگ اسکریپت اسکریپتی را بارگیری می کند که بار وابستگی ها را راه اندازی می کند، مطمئن شوید که <link rel=preload> برای وابستگی ها بعد از تگ اسکریپت والد است، در غیر این صورت ممکن است وابستگی ها قبل از اسکریپت اصلی بارگیری شوند. به ترتیب مناسب، اسکریپت اصلی را می توان در حین بارگیری وابستگی ها تجزیه/ ارزیابی کرد.
  • پیش‌بارگذاری‌های تصویر دارای اولویت «کم» یا «متوسط» (بدون اولویت واکشی) هستند و باید نسبت به اسکریپت‌های همگام‌سازی و سایر برچسب‌های با اولویت پایین یا پایین‌تر مرتب شوند.

تاریخ

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

نتیجه

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