بخش فرصت‌ها در گزارش Lighthouse شما، سطح سوم درخواست‌ها را در زنجیره درخواست حیاتی شما به‌عنوان نامزدهای پیش‌بارگذاری پرچم‌گذاری می‌کند:
چگونه پرچم های Lighthouse نامزدهای پیش بارگذاری را تعیین می کند
فرض کنید زنجیره درخواست بحرانی صفحه شما به شکل زیر است:
index.html |--app.js |--styles.css |--ui.js
فایل index.html شما <script src="app.js"> را اعلام می کند. هنگامی که app.js اجرا می شود، برای دانلود styles.css و ui.js fetch() را فراخوانی می کند. تا زمانی که آن 2 منبع آخر دانلود، تجزیه و اجرا نشوند، صفحه کامل به نظر نمی رسد. با استفاده از مثال بالا، Lighthouse styles.css و ui.js را به عنوان کاندید پرچم گذاری می کند.
صرفه جویی های احتمالی بر این اساس است که اگر شما پیوندهای پیش بارگذاری را اعلام کرده باشید، مرورگر چقدر زودتر می تواند درخواست ها را شروع کند. برای مثال، اگر app.js برای دانلود، تجزیه و اجرا 200 میلی‌ثانیه طول می‌کشد، پس‌انداز بالقوه برای هر منبع 200 میلی‌ثانیه است، زیرا app.js دیگر گلوگاهی برای هر یک از درخواست‌ها نیست.
بارگیری از قبل درخواست‌ها می‌تواند صفحات شما را سریع‌تر بارگذاری کند.
styles.css و ui.js فقط پس از دانلود، تجزیه و اجرا app.js درخواست می‌شوند. مشکل اینجاست که مرورگر تنها پس از دانلود، تجزیه و اجرای app.js از آن 2 منبع آخر آگاه می شود. اما می دانید که این منابع مهم هستند و باید در اسرع وقت دانلود شوند.
لینک های پیش بارگذاری خود را اعلام کنید
پیوندهای پیش بارگذاری را در HTML خود اعلام کنید تا به مرورگر دستور دهید منابع کلیدی را در اسرع وقت دانلود کند.
<head>
...
<link rel="preload" href="styles.css" as="style" />
<link rel="preload" href="ui.js" as="script" />
...
</head>
styles.css و ui.js همزمان با app.js درخواست می‌شوند.برای راهنمایی بیشتر ، برای بهبود سرعت بارگیری، دارایی های حیاتی را پیش بارگیری کنید .
سازگاری با مرورگر
از ژوئن 2020، پیش بارگیری در مرورگرهای مبتنی بر Chromium پشتیبانی می‌شود. برای به روز رسانی به سازگاری مرورگر مراجعه کنید.
ساخت پشتیبانی ابزار برای پیش بارگذاری
صفحه Tooling.Report's Preloading Assets را ببینید.
راهنمایی مخصوص پشته
زاویه ای
برای سرعت بخشیدن به ناوبری ، مسیرها را از قبل بارگیری کنید .
مجنتو
طرح تم های خود را تغییر دهید و تگ های <link rel=preload> را اضافه کنید.