هنگامی که مرورگر یک صفحه وب را تجزیه می کند و شروع به کشف و دانلود منابعی مانند تصاویر، اسکریپت ها یا CSS می کند، به آنها priority واکشی اختصاص می دهد تا بتواند آنها را به ترتیب بهینه دانلود کند. اولویت یک منبع معمولاً به این بستگی دارد که آن منبع چیست و در کجای سند قرار دارد. برای مثال، ممکن است تصاویر درون‌نمای دارای اولویت High باشند، و اولویت برای CSSهای بارگذاری‌شده زودهنگام و مسدودکننده رندر با استفاده از <link> در <head> ممکن است Very High باشد. تخصیص اولویت خودکار معمولاً خوب کار می کند، اما موارد استفاده ای وجود دارد که ترتیب اختصاص داده شده بهینه نیست.
این صفحه درباره Fetch Priority API و ویژگی fetchpriority HTML بحث می کند، که به شما کمک می کند تا Core Web Vitals را با اشاره به اولویت نسبی یک منبع ( high یا low ) بهینه کنید.
خلاصه
چند زمینه کلیدی که واکشی اولویت می تواند به آنها کمک کند:
- افزایش اولویت تصویر LCP با مشخص کردن
fetchpriority="high"در عنصر تصویر، باعث می شود LCP زودتر اتفاق بیفتد. - افزایش اولویت اسکریپت های
async، با استفاده از معنایی بهتر از رایج ترین هک فعلی (درج<link rel="preload">برای اسکریپتasync). - کاهش اولویت اسکریپت‌های بدنه آخر برای توالی بهتر تصاویر.
از لحاظ تاریخی، توسعه‌دهندگان با استفاده از پیش بارگذاری و اتصال اولیه ، تأثیر محدودی بر اولویت منابع داشته‌اند. Preload به شما امکان می دهد قبل از اینکه مرورگر به طور طبیعی آنها را کشف کند، در مورد منابع مهمی که می خواهید زودتر بارگیری کنید به مرورگر بگویید. این به ویژه برای منابعی مفید است که کشف آنها سخت تر است، مانند فونت های موجود در شیوه نامه ها، تصاویر پس زمینه یا منابع بارگذاری شده از یک اسکریپت. Preconnect به گرم کردن اتصالات به سرورهای متقاطع کمک می کند و می تواند به بهبود معیارهایی مانند Time to first byte کمک کند. زمانی مفید است که یک منبع را بدانید اما لزوماً URL دقیق منبعی را که مورد نیاز است نمی‌دانید.
واکشی اولویت مکمل این نکات منابع است . این یک سیگنال مبتنی بر نشانه گذاری است که از طریق ویژگی fetchpriority در دسترس است و توسعه دهندگان می توانند از آن برای نشان دادن اولویت نسبی یک منبع خاص استفاده کنند. همچنین می توانید از این نکات از طریق جاوا اسکریپت و Fetch API با ویژگی priority استفاده کنید تا بر اولویت واکشی منابع ساخته شده برای داده ها تأثیر بگذارید. واکشی اولویت همچنین می تواند تکمیل کننده پیش بارگذاری باشد. بزرگترین تصویر رنگ محتوای محتوا را بگیرید، که وقتی از قبل بارگذاری می‌شود، همچنان اولویت پایینی خواهد داشت. اگر توسط دیگر منابع اولیه با اولویت پایین به عقب برود، استفاده از اولویت واکشی می تواند به بارگذاری سریع تصویر کمک کند.
اولویت منابع
ترتیب دانلود منبع به اولویت اختصاص داده شده مرورگر برای هر منبع در صفحه بستگی دارد. عواملی که می توانند بر منطق محاسبات اولویت تأثیر بگذارند عبارتند از:
- نوع منبع، مانند CSS، فونت ها، اسکریپت ها، تصاویر و منابع شخص ثالث.
- مکان یا سفارش سند به منابع ارجاع می دهد.
- اشاره منبع
preload، که به مرورگر کمک می کند تا یک منبع را سریعتر کشف کند و زودتر بارگذاری کند. - تغییرات محاسبات اولویت برای اسکریپت‌های
asyncیاdefer.
جدول زیر نشان می‌دهد که Chrome چگونه بیشتر منابع را اولویت‌بندی و ترتیب‌بندی می‌کند:
| بارگذاری در مرحله مسدود کردن طرح | بارگذاری یکباره در مرحله مسدود کردن طرح | ||||
|---|---|---|---|---|---|
| پلک زدن اولویت | خیلی بالا | بالا | متوسط | کم | خیلی کم |
| DevTools اولویت | بالاترین | بالا | متوسط | کم | پایین ترین |
| منبع اصلی | |||||
| CSS (اوایل **) | CSS (تأخیر **) | CSS (عدم تطابق رسانه***) | |||
| اسکریپت (اوایل** یا نه از اسکنر پیش بارگیری) | اسکریپت (تأخیر **) | اسکریپت (ناهمگام) | |||
| فونت | قلم (rel=preload) | ||||
| وارد كردن | |||||
| تصویر (در دید) | تصویر (5 تصویر اول > 10000 پیکسل 2) | تصویر | |||
| رسانه (ویدئو/صوت) | |||||
| واکشی از پیش | |||||
| XSL | |||||
| XHR (همگام سازی) | XHR/واکشی* (ناهمگام) | ||||
مرورگر منابع را با همان اولویت محاسبه شده به ترتیبی که کشف می کنند دانلود می کند. می‌توانید اولویت تخصیص داده‌شده به منابع مختلف را هنگام بارگیری صفحه در برگه « شبکه ابزارهای توسعه‌دهنده Chrome» بررسی کنید. (مطمئن شوید که ستون اولویت را با کلیک راست روی عناوین جدول وارد کرده اید).
type = "font" در صفحه جزئیات اخبار بی بی سی 
وقتی اولویت‌ها تغییر می‌کنند، می‌توانید اولویت اولیه و نهایی را در تنظیمات ردیف‌های درخواست بزرگ یا در یک راهنمای ابزار ببینید.
چه زمانی ممکن است به اولویت واکشی نیاز داشته باشید؟
اکنون که منطق اولویت‌بندی مرورگر را درک کرده‌اید، می‌توانید ترتیب دانلود صفحه خود را برای بهینه‌سازی عملکرد و Core Web Vitals تنظیم کنید. در اینجا چند نمونه از مواردی وجود دارد که می توانید بدون استفاده از اولویت واکشی تغییر دهید:
- برچسب‌های منبع مانند
<script>و<link>را به ترتیبی که می‌خواهید مرورگر آنها را دانلود کند، قرار دهید. - از راهنمایی منبع
preloadبرای دانلود زودتر منابع لازم استفاده کنید ، به ویژه منابعی که کشف آنها برای مرورگر سخت تر است. - از
asyncیاdeferبرای دانلود اسکریپت ها بدون مسدود کردن منابع دیگر استفاده کنید. - محتوای پایین‌تر را با تنبلی بارگذاری کنید تا مرورگر بتواند از پهنای باند موجود برای منابع مهم‌تر در بالای صفحه استفاده کند.
در اینجا موارد پیچیده تری وجود دارد که در آنها اولویت واکشی می تواند به شما کمک کند ترتیب اولویت منابع مورد نیاز خود را دریافت کنید:
- شما چندین تصویر بالای صفحه دارید، اما همه آنها نباید اولویت یکسانی داشته باشند. به عنوان مثال، در چرخ فلک تصویر، تنها اولین تصویر قابل مشاهده نیاز به اولویت بیشتری دارد.
- تصاویر قهرمان در داخل نما معمولاً با اولویت
LowیاMediumشروع می شوند. پس از تکمیل طرح‌بندی، Chrome متوجه می‌شود که آنها در ویوپورت هستند و اولویت آنها را افزایش می‌دهد. این معمولاً تاخیر قابل توجهی در بارگذاری تصاویر اضافه می کند. ارائه اولویت واکشی در نشانه‌گذاری به تصویر اجازه می‌دهد با اولویت «بالا» شروع شود و خیلی زودتر بارگذاری شود.
برای کشف اولیه تصاویر LCP که به عنوان پس‌زمینه CSS گنجانده شده‌اند، پیش‌بارگذاری هنوز لازم است. برای افزایش اولویت تصاویر پس‌زمینه،fetchpriority='high'را در پیش‌بارگذاری قرار دهید. - اعلام اسکریپت‌ها به‌عنوان
asyncیاdeferبه مرورگر می‌گوید آنها را به‌صورت ناهمزمان بارگذاری کند. با این حال، همانطور که در جدول اولویت نشان داده شده است، این اسکریپت ها نیز دارای اولویت "کم" هستند. ممکن است بخواهید اولویت آنها را افزایش دهید و از دانلود ناهمزمان اطمینان حاصل کنید، به خصوص برای اسکریپت هایی که برای تجربه کاربر حیاتی هستند. - اگر از API
fetch()جاوا اسکریپت برای واکشی منابع یا داده‌ها به صورت ناهمزمان استفاده می‌کنید، مرورگر به آن اولویتHighاختصاص می‌دهد. ممکن است بخواهید برخی از واکشی‌های شما با اولویت کمتری اجرا شوند، به‌خصوص اگر تماس‌های API پس‌زمینه را با تماس‌های API که به ورودی کاربر پاسخ می‌دهند، ترکیب می‌کنید. تماس‌های API پس‌زمینه را با اولویتLowو تماس‌های API تعاملی را با اولویتHighعلامت‌گذاری کنید. - مرورگر به CSS و فونت‌ها
High" priorityاختصاص می‌دهد، اما برخی از این منابع ممکن است مهم‌تر از سایرین باشند. می‌توانید از Fetch Priority برای کاهش اولویت منابع غیر مهم استفاده کنید.
ویژگی 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" (◉) در هر ردیف اولویت پیش‌فرض آن نوع منبع را مشخص می‌کند.
| بارگذاری در مرحله مسدود کردن طرح | بارگذاری یک به یک در مرحله مسدود کردن طرح | ||||
|---|---|---|---|---|---|
| پلک زدن اولویت | خیلی بالا | بالا | متوسط | کم | خیلی کم |
| DevTools اولویت | بالاترین | بالا | متوسط | کم | پایین ترین |
| منبع اصلی | ◉ | ||||
| CSS (اوایل **) | ⬆◉ | ⬇ | |||
| CSS (تأخیر **) | ⬆ | ◉ | ⬇ | ||
| CSS (عدم تطابق رسانه***) | ⬆*** | ◉⬇ | |||
| اسکریپت (اوایل** یا نه از اسکنر پیش بارگیری) | ⬆◉ | ⬇ | |||
| اسکریپت (تأخیر **) | ⬆ | ◉ | ⬇ | ||
| اسکریپت (ناهمگام/به تعویق انداختن) | ⬆ | ◉⬇ | |||
| فونت | ◉ | ||||
| قلم (rel=preload) | ⬆◉ | ⬇ | |||
| وارد كردن | ◉ | ||||
| تصویر (در دید - بعد از طرح بندی) | ⬆◉ | ⬇ | |||
| تصویر (5 تصویر اول > 10000 پیکسل 2) | ⬆ | ◉ | ⬇ | ||
| تصویر | ⬆ | ◉⬇ | |||
| رسانه (ویدئو/صوت) | ◉ | ||||
| XHR (همگام سازی) - منسوخ شده است | ◉ | ||||
| XHR/واکشی* (ناهمگام) | ⬆◉ | ⬇ | |||
| واکشی از پیش | ◉ | ||||
| XSL | ◉ | ||||
fetchpriority اولویت نسبی را تعیین می کند، به این معنی که به جای اینکه صراحتاً اولویت را روی High یا Low قرار دهد، اولویت پیش فرض را به مقدار مناسب افزایش یا کاهش می دهد. این اغلب منجر به اولویت High یا Low می شود، اما نه همیشه. به عنوان مثال، CSS بحرانی با fetchpriority="high" اولویت "VeryHigh"/"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 بهبود یافت .
اولویت تصاویر بالای صفحه را کاهش دهید
از 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 ثانیه کاهش داد.
اولویت منابع از پیش بارگذاری شده را کاهش دهید
برای جلوگیری از رقابت منابع از پیش بارگذاری شده با سایر منابع حیاتی، می توانید اولویت آنها را کاهش دهید. از این تکنیک با تصاویر، اسکریپت ها و 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'">
اولویت بندی مجدد اسکریپت ها
اسکریپت هایی که صفحه شما باید تعاملی باشد باید به سرعت بارگیری شوند، اما نباید منابع دیگر را مسدود کنند. می‌توانید این موارد را با اولویت بالا به‌عنوان async علامت‌گذاری کنید.
<script src="async_but_important.js" async fetchpriority="high"></script>
اگر اسکریپت به حالت‌های DOM خاصی متکی باشد، نمی‌توانید آن را به‌عنوان async علامت‌گذاری کنید. با این حال، اگر آنها بعداً در صفحه اجرا شوند، می توانید آنها را با اولویت کمتر بارگیری کنید:
<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'});
واکشی یادداشت های پیاده سازی اولویت
در اینجا مواردی وجود دارد که باید هنگام استفاده از Fetch Priority از آنها آگاه باشید:
- ویژگی
fetchpriorityیک اشاره است، نه یک دستورالعمل. مرورگر سعی می‌کند به اولویت توسعه‌دهنده احترام بگذارد، اما همچنین می‌تواند اولویت‌های اولویت منابع خود را برای اولویت منابع برای حل تضادها اعمال کند. اولویت واکشی را با بارگذاری اولیه اشتباه نگیرید:
- پیش بارگذاری یک واکشی اجباری است، نه یک اشاره.
- Preload به مرورگر اجازه می دهد منبعی را زودتر کشف کند، اما همچنان منبع را با اولویت پیش فرض واکشی می کند. در همین حال، اولویت واکشی به قابلیت کشف کمک نمی کند، اما به شما اجازه می دهد اولویت واکشی را افزایش یا کاهش دهید.
- مشاهده و اندازه گیری اثرات یک پیش بارگذاری آسان تر از تأثیرات تغییر اولویت است.
واکشی اولویت می‌تواند بارگذاری‌های اولیه را با افزایش دانه‌بندی اولویت‌بندی تکمیل کند. اگر قبلاً یک پیش بارگذاری را به عنوان یکی از اولین موارد در
<head>برای یک تصویر LCP مشخص کرده اید، ممکن است اولویت واکشیhighLCP را به میزان قابل توجهی بهبود نبخشد. با این حال، اگر پیش بارگذاری پس از بارگیری منابع دیگر اتفاق بیفتد، اولویت واکشیhighمی تواند LCP را بیشتر بهبود بخشد. اگر یک تصویر مهم یک تصویر پس زمینه CSS است، آن را باfetchpriority = "high"از قبل بارگذاری کنید.بهبود زمان بارگذاری از اولویت‌بندی در محیط‌هایی که منابع بیشتری برای پهنای باند شبکه موجود رقابت می‌کنند، مرتبط‌تر است. این برای اتصالات HTTP/1.x که دانلود موازی امکان پذیر نیست یا در اتصالات HTTP/2 با پهنای باند کم رایج است. در این موارد، اولویت بندی می تواند به رفع تنگناها کمک کند.
CDN ها اولویت بندی HTTP/2 را به طور یکسان پیاده سازی نمی کنند. حتی اگر مرورگر اولویت را از Fetch Priority اعلام کند، CDN ممکن است منابع را به ترتیب مشخص شده مجددا اولویت بندی کند. این امر آزمایش اولویت واکشی را دشوار می کند. اولویت ها هم به صورت داخلی در مرورگر اعمال می شوند و هم با پروتکل هایی که از اولویت بندی پشتیبانی می کنند (HTTP/2 و HTTP/3). هنوز هم ارزش دارد که از Fetch Priority فقط برای اولویت بندی مرورگر داخلی مستقل از CDN یا پشتیبانی مبدا استفاده کنید، زیرا اولویت ها اغلب زمانی که مرورگر منابع را درخواست می کند تغییر می کند. به عنوان مثال، منابع با اولویت پایین مانند تصاویر اغلب در زمانی که مرورگر موارد حیاتی
<head>را پردازش می کند، از درخواست خودداری می شود.ممکن است نتوانید اولویت واکشی را به عنوان بهترین روش در طراحی اولیه خود معرفی کنید. بعداً در چرخه توسعه خود، می توانید اولویت ها را به منابع مختلف در صفحه اختصاص دهید و اگر با انتظارات شما مطابقت نداشتند، می توانید Fetch Priority را برای بهینه سازی بیشتر معرفی کنید.
نکاتی برای استفاده از پیش بارگذاری
هنگام استفاده از پیش بارگذاری موارد زیر را در نظر داشته باشید:
- گنجاندن پیش بارگذاری در هدرهای HTTP آن را بر هر چیز دیگری در ترتیب بارگذاری قرار می دهد.
- به طور کلی، بارگیری‌ها به ترتیبی که تجزیه‌کننده برای هر چیزی بالاتر از اولویت «متوسط» به آن می‌رسد، بارگذاری می‌شود. اگر در ابتدای HTML خود بارگذاری‌های پیش‌بارگذاری می‌کنید، مراقب باشید.
- پیش بارگذاری فونت احتمالاً در انتهای سر یا ابتدای بدنه بهترین کار را دارد.
- پیش‌بارگذاری‌های وارداتی (Dynamic
import()یاmodulepreload) باید بعد از تگ اسکریپتی که نیاز به واردات دارد اجرا شود، بنابراین مطمئن شوید که اسکریپت ابتدا بارگیری یا تجزیه می‌شود تا بتوان در حین بارگذاری وابستگی‌های آن ارزیابی شود. - پیش‌بارگذاری‌های تصویر به‌طور پیش‌فرض دارای اولویت «کم» یا «متوسط» هستند. آنها را نسبت به اسکریپت های همگام و سایر برچسب های با اولویت پایین یا پایین تر ترتیب دهید.
تاریخ
واکشی اولویت برای اولین بار در کروم به عنوان یک آزمایش اولیه در سال 2018 و سپس دوباره در سال 2021 با استفاده از ویژگی importance آزمایش شد. در آن زمان به آن نکات اولویتی می گفتند. این رابط از آن زمان به عنوان بخشی از فرآیند استانداردهای وب به fetchpriority برای HTML و priority برای Fetch API جاوا اسکریپت تغییر کرده است. برای کاهش سردرگمی، اکنون این API را اولویت واکشی می نامیم.