در این codelab، عملکرد صفحه وب زیر با پیش‌بارگیری و واکشی اولیه چند منبع بهبود می‌یابد:
اندازه گرفتن
ابتدا عملکرد وب‌سایت را قبل‌از افزودن هرگونه بهینه‌سازی بسنجید.
- برای پیش‌دید کردن سایت، مشاهده برنامه را فشار دهید. سپس
تمام‌صفحه
را فشار دهید.
ممیزی عملکرد Lighthouse (Lighthouse > گزینه‌ها > عملکرد) را در نسخه زنده Glitch خود اجرا کنید (همچنین به کشف فرصت‌های عملکرد با Lighthouse مراجعه کنید).
Lighthouse ممیزی ناموفق زیر را برای منبعی که دیر واکشی شده است نشان می‌دهد:
- کلیدهای `Control+Shift+J` (یا `Command+Option+J` در Mac) را فشار دهید تا DevTools باز شود.
- روی برگه شبکه کلیک کنید.
فایل main.css توسط عنصر پیوند (<link>) که در سند HTML قرار دارد واکشی نمی‌شود، بلکه فایل جاوا اسکریپت جداگانه‌ای (fetch-css.js) عنصر پیوند را پس‌از رویداد window.onLoad به DOM پیوست می‌کند. این یعنی فایل فقط پس‌از اینکه مرورگر تجزیه و اجرای فایل JS را به‌پایان رساند واکشی می‌شود. به‌طور مشابه، قلم وب (K2D.woff2) مشخص‌شده در main.css فقط
پس‌از اتمام بارگیری فایل CSS واکشی می‌شود.
زنجیره درخواست‌های ضروری نشان‌دهنده ترتیب منابعی است که مرورگر آن‌ها را اولویت‌بندی و واکشی می‌کند. برای این صفحه وب، درحال‌حاضر این‌گونه به‌نظر می‌رسد:
├─┬ / (initial HTML file)
└── fetch-css.js
└── main.css
└── K2D.woff2
ازآنجایی‌که فایل CSS در سطح سوم زنجیره درخواست قرار دارد، Lighthouse آن را به‌عنوان منبعی که دیر شناسایی شده است تشخیص داده است.
پیش‌بارگیری منابع حیاتی
فایل main.css دارایی مهمی است که به‌محض بار شدن صفحه فوراً به آن نیاز است. برای فایل‌های مهمی مثل این منبع که دیر در برنامه‌تان واکشی می‌شوند، از برچسب پیش‌بارگیری پیوند استفاده کنید تا با افزودن عنصر «پیوند» به سر سند، به مرورگر اطلاع دهید که آن را زودتر بارگیری کند.
برچسب پیش‌بارگیری برای این برنامه اضافه کنید:
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
</head>
از مشخصه as برای شناسایی نوع منبعی که واکشی می‌شود استفاده می‌شود، و از as="style" برای پیش‌بارگذاری فایل‌های برگه سبک نگارش استفاده می‌شود.
برنامه را مجدداً بار کنید و به پانل شبکه در DevTools نگاهی بیندازید.
توجه کنید که چگونه مرورگر فایل CSS را قبل‌از اینکه جاوا اسکریپت مسئول واکشی آن حتی تجزیه را تمام کرده باشد، واکشی می‌کند. با پیش‌بارگیری، مرورگر می‌داند که باید واکشی پیش‌دستانه‌ای برای منبع انجام دهد، با این فرض که این منبع برای صفحه وب حیاتی است.
اگر از پیش‌بارگیری به‌درستی استفاده نشود، می‌تواند با ایجاد درخواست‌های غیرضروری برای منابعی که استفاده نمی‌شوند، به عملکرد آسیب برساند. در این برنامه، details.css
فایل CSS دیگری است که در ریشه پروژه قرار دارد اما برای
/details route جداگانه‌ای استفاده می‌شود. برای نشان دادن نمونه‌ای از نحوه استفاده نادرست از پیش‌بارگیری،
یک راهنمایی پیش‌بارگیری نیز برای این منبع اضافه کنید.
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
<link rel="preload" href="details.css" as="style">
</head>
برنامه را مجدداً بار کنید و به پانل شبکه نگاهی بیندازید.
درخواستی برای بازیابی details.css ارسال شده است، هرچند صفحه وب از آن استفاده نمی‌کند.
وقتی منبع پیش‌بارشده‌ای ظرف چند ثانیه پس‌از بار شدن توسط صفحه استفاده نشود، Chrome هشداری در پانل کنسول نمایش می‌دهد.
از این هشدار به‌عنوان نشانگری برای شناسایی منابع پیش‌بارگیری‌شده‌ای استفاده کنید که بلافاصله توسط صفحه وب شما استفاده نمی‌شوند. اکنون می‌توانید پیوند پیش‌بارگیری غیرضروری را برای این صفحه بردارید.
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
<link rel="preload" href="details.css" as="style">
</head>
برای مشاهده فهرست همه انواع منابعی که می‌توانند به‌همراه مقادیر صحیح موردنیاز برای مشخصه as واکشی شوند، به مقاله MDN درباره پیش‌بارگیری مراجعه کنید.
پیش‌واکشی منابع آینده
پیش‌واکشی اشاره دیگری از مرورگر است که می‌تواند برای درخواست دارایی استفاده‌شده برای مسیر پیمایش متفاوت استفاده شود، اما با اولویت پایین‌تر نسبت‌به سایر دارایی‌های مهم موردنیاز برای صفحه فعلی.
در این وب‌سایت، کلیک کردن روی تصویر شما را به مسیر details/
جداگانه‌ای می‌برد.
یک فایل CSS جداگانه، details.css، حاوی تمام سبک‌های موردنیاز برای این
صفحه ساده است. برای واکشی اولیه این منبع، عنصر پیوند را به index.html اضافه کنید.
<head>
<!-- ... -->
<link rel="prefetch" href="details.css">
</head>
برای درک اینکه چگونه این کار باعث درخواست فایل می‌شود، پانل شبکه را در DevTools باز کنید و علامت گزینه غیرفعال کردن حافظه نهان را بردارید.
برنامه را مجدداً بار کنید و ببینید که چگونه پس‌از واکشی همه فایل‌های دیگر، درخواستی با اولویت بسیار پایین برای
details.css ایجاد می‌شود.
وقتی DevTools باز است، روی تصویر در وب‌سایت کلیک کنید تا به صفحه details بروید.
ازآنجایی‌که از عنصر پیوند در details.html برای واکشی details.css استفاده می‌شود، درخواستی برای منبع طبق انتظار ایجاد می‌شود.
روی درخواست شبکه details.css در DevTools کلیک کنید تا جزئیات آن را مشاهده کنید. متوجه خواهید شد
که فایل از حافظه نهان دیسک مرورگر بازیابی می‌شود.
با بهره‌گیری از زمان بیکاری مرورگر، پیش‌واکشی درخواست زودهنگامی برای منبع موردنیاز برای صفحه‌ای دیگر ارسال می‌کند. این کار درخواست‌های پیمایش آینده را تسریع می‌کند زیرا به مرورگر اجازه می‌دهد دارایی را زودتر در حافظه نهان ذخیره کند و درصورت نیاز آن را از حافظه نهان ارائه دهد.
پیش‌بارگذاری و واکشی اولیه با webpack
پست کاهش بار داده‌های جاوا اسکریپت با تقسیم کد استفاده از واردات پویا را برای تقسیم یک بسته به چند بخش بررسی می‌کند. این موضوع با برنامه ساده‌ای نشان داده می‌شود که هنگام ارسال فرم، به‌طور پویا ماژولی را از Lodash وارد می‌کند.
می‌توانید در اینجا به Glitch برای این برنامه دسترسی پیدا کنید.
بلوک کد زیر که در src/index.js, قرار دارد، مسئول وارد کردن پویا روش هنگام کلیک روی دکمه است.
form.addEventListener("submit", e => {
e.preventDefault()
import('lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
تقسیم کردن بسته با کاهش اندازه اولیه آن، زمان بار کردن صفحه را بهبود می‌بخشد. نسخه ۴.۶.۰ از webpack پشتیبانی برای پیش‌بارگیری یا
پیش‌واکشی تکه‌هایی که به‌طور پویا وارد شده‌اند را ارائه می‌دهد. بااستفاده از این برنامه به‌عنوان
نمونه، روش lodash را می‌توان در زمان بیکاری مرورگر پیش‌واکشی کرد؛ وقتی کاربر
دکمه را فشار می‌دهد، هیچ تأخیری برای واکشی منبع وجود ندارد.
از پارامتر نظر خاص webpackPrefetch در وارد کردن پویا برای پیش‌واکشی یک قطعه خاص استفاده کنید.
در اینجا نحوه نمایش آن با این برنامه خاص آورده شده است.
form.addEventListener("submit", e => {
e.preventDefault()
import(/* webpackPrefetch: true */ 'lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
وقتی برنامه دوباره بار می‌شود، webpack برچسب پیش‌واکشی را برای منبع به سر سند تزریق می‌کند. این را می‌توانید در پانل عناصر در DevTools ببینید.
مشاهده درخواست‌ها در پانل شبکه نیز نشان می‌دهد که این قطعه پس‌از درخواست همه منابع دیگر، با اولویت پایین واکشی می‌شود.
اگرچه پیش‌واکشی برای این مورد استفاده منطقی‌تر است، webpack همچنین از پیش‌بارگذاری تکه‌هایی که به‌صورت پویا وارد می‌شوند پشتیبانی می‌کند.
import(/* webpackPreload: true */ 'module')
نتیجه‌گیری
با این codelab، باید درک کاملی از نحوه پیش‌بارگیری یا پیش‌واکشی دارایی‌های خاص برای بهبود تجربه کاربری سایت خود داشته باشید. ذکر این نکته مهم است که نباید از این تکنیک‌ها برای هر منبعی استفاده کرد و استفاده نادرست از آن‌ها می‌تواند به عملکرد آسیب برساند. بهترین نتایج فقط با پیش‌بارگیری یا واکشی پیشاپیش انتخابی مشاهده می‌شود.
به‌طور خلاصه:
- از preload برای منابعی استفاده کنید که دیر کشف می‌شوند اما برای صفحه فعلی حیاتی هستند.
- از prefetch برای منابعی استفاده کنید که برای مسیر پیمایش آینده یا کنش کاربر موردنیاز است.
درحال‌حاضر همه مرورگرها از پیش‌بارگیری و پیش‌واکشی پشتیبانی نمی‌کنند. این یعنی ممکن است همه کاربران برنامه‌تان متوجه بهبود عملکرد نشوند.
اگر می‌خواهید اطلاعات بیشتری درباره جنبه‌های خاصی از نحوه تأثیر پیش‌بارگیری و پیش‌واکشی بر صفحه وب خود داشته باشید، به این مقاله‌ها مراجعه کنید: