درخواست های کلیدی را از قبل بارگیری کنید

بخش فرصت‌ها در گزارش 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 درخواست می‌شوند.
بدون پیوندهای پیش بارگذاری، 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 درخواست می شود.
با پیوندهای پیش بارگذاری، styles.css و ui.js همزمان با app.js درخواست می‌شوند.

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

سازگاری مرورگر

از ژوئن 2020، پیش بارگیری در مرورگرهای مبتنی بر Chromium پشتیبانی می‌شود. برای به روز رسانی به سازگاری مرورگر مراجعه کنید.

ساخت پشتیبانی ابزار برای پیش بارگذاری

صفحه Tooling.Report's Preloading Assets را ببینید.

راهنمایی مخصوص پشته

زاویه ای

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

مجنتو

طرح تم های خود را تغییر دهید و تگ های <link rel=preload> را اضافه کنید.

منابع