Fetch Priority API اولویت نسبی منابع را به مرورگر نشان می دهد. می تواند بارگذاری بهینه را فعال کند و Core Web Vitals را بهبود بخشد.
هنگامی که مرورگر یک صفحه وب را تجزیه می کند و شروع به کشف و دانلود منابعی مانند تصاویر، اسکریپت ها یا 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
). - کاهش اولویت اسکریپتهای بدنه آخر برای امکان توالی بهتر با تصاویر.
از لحاظ تاریخی، توسعهدهندگان با استفاده از پیش بارگذاری و اتصال اولیه ، تأثیر محدودی بر اولویت منابع داشتهاند. 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» بررسی کنید. (مطمئن شوید که ستون اولویت را با کلیک راست روی عناوین جدول و علامت زدن آن درج کرده اید).
وقتی اولویتها تغییر میکنند، میتوانید اولویت اولیه و نهایی را در تنظیمات ردیفهای درخواست بزرگ یا در یک راهنمای ابزار ببینید.
چه زمانی ممکن است به اولویت واکشی نیاز داشته باشید؟
اکنون که منطق اولویتبندی مرورگر را درک کردهاید، میتوانید ترتیب دانلود صفحه خود را برای بهینهسازی عملکرد و 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 بهبود یافت .
اولویت تصاویر بالای صفحه را کاهش دهید
از 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 ثانیه کاهش داد.
اولویت منابع از پیش بارگذاری شده را کاهش دهید
برای جلوگیری از رقابت منابع از پیش بارگذاری شده با سایر منابع حیاتی، می توانید اولویت آنها را کاهش دهید. از این تکنیک با تصاویر، اسکریپت ها و 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 به اولویت واکشی علاقه مند هستند. آنها اکنون دستگیره های اضافی در دسترس دارند تا به ترتیب بارگذاری مورد نظر خود دست یابند.