در این کد لبه، عملکرد صفحه وب زیر با بارگذاری و واکشی اولیه چند منبع بهبود می یابد:
اندازه گرفتن
ابتدا نحوه عملکرد وب سایت را قبل از افزودن هر گونه بهینه سازی اندازه گیری کنید.
- برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید
.
ممیزی عملکرد Lighthouse ( Lighthouse > Options > Performance ) را روی نسخه زنده Glitch خود اجرا کنید (همچنین به کشف فرصت های عملکرد با Lighthouse مراجعه کنید).
Lighthouse ممیزی ناموفق زیر را برای منبعی که دیر واکشی شده است نشان می دهد:
- «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
- روی تب Network کلیک کنید.
فایل main.css توسط یک عنصر Link ( <link> ) که در سند HTML قرار داده شده است واکشی نمی شود، اما یک فایل جاوا اسکریپت جداگانه، fetch-css.js ، عنصر Link را پس از رویداد window.onLoad به DOM متصل می کند. این بدان معناست که فایل فقط پس از پایان تجزیه و اجرای فایل JS توسط مرورگر واکشی می شود. به طور مشابه، یک فونت وب ( K2D.woff2 ) که در main.css مشخص شده است، تنها زمانی واکشی می شود که فایل CSS دانلود شود.
زنجیره درخواست بحرانی نشان دهنده ترتیب منابعی است که اولویت بندی شده و توسط مرورگر واکشی می شوند. برای این صفحه وب، در حال حاضر به شکل زیر است:
├─┬ / (initial HTML file)
└── fetch-css.js
└── main.css
└── K2D.woff2
از آنجایی که فایل CSS در سطح سوم زنجیره درخواست قرار دارد، Lighthouse آن را به عنوان یک منبع دیر کشف شده شناسایی کرده است.
از پیش بارگیری منابع حیاتی
فایل main.css یک دارایی حیاتی است که بلافاصله به محض بارگیری صفحه مورد نیاز است. برای فایل‌های مهمی مانند این منبع که در اواخر برنامه شما واکشی می‌شوند، از یک برچسب پیش‌بارگذاری پیوند استفاده کنید تا با افزودن یک عنصر Link به سر سند، به مرورگر اطلاع دهید که آن را زودتر دانلود کند.
یک برچسب پیش بارگذاری برای این برنامه اضافه کنید:
<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 در مورد پیش بارگیری مراجعه کنید.
منابع آینده را از قبل واکشی کنید
Prefetch یکی دیگر از نکات مرورگر است که می تواند برای درخواست دارایی مورد استفاده برای یک مسیر ناوبری متفاوت اما با اولویت کمتر از سایر دارایی های مهم مورد نیاز برای صفحه فعلی استفاده شود.
در این وب سایت، با کلیک بر روی تصویر، به details/ مسیر جداگانه ای می روید.
یک فایل CSS جداگانه، details.css ، شامل تمام سبک های مورد نیاز برای این صفحه ساده است. برای واکشی اولیه این منبع، یک عنصر پیوند به index.html اضافه کنید.
<head>
<!-- ... -->
<link rel="prefetch" href="details.css">
</head>
برای درک اینکه چگونه این درخواست برای فایل ایجاد می کند، پانل شبکه را در DevTools باز کنید و تیک گزینه Disable cache را بردارید.
برنامه را مجدداً بارگیری کنید و متوجه شوید که چگونه یک درخواست با اولویت بسیار پایین برای details.css پس از واکشی همه فایل های دیگر ایجاد می شود.
با باز بودن DevTools، روی تصویر موجود در وب سایت کلیک کنید تا به صفحه details بروید. از آنجایی که یک عنصر پیوند در details.html برای واکشی details.css استفاده می شود، همانطور که انتظار می رود درخواستی برای منبع ارسال می شود.
روی درخواست شبکه details.css در DevTools کلیک کنید تا جزئیات آن را مشاهده کنید. متوجه خواهید شد که فایل از حافظه پنهان دیسک مرورگر بازیابی شده است.
با استفاده از زمان بیکار مرورگر، واکشی اولیه یک درخواست اولیه برای منبع مورد نیاز برای یک صفحه دیگر ارائه می کند. این امر سرعت درخواست‌های ناوبری آینده را افزایش می‌دهد و به مرورگر اجازه می‌دهد تا دارایی را زودتر ذخیره کند و در صورت نیاز آن را از حافظه پنهان ارائه کند.
بارگیری و واکشی اولیه با بسته وب
پست کاهش بارهای جاوا اسکریپت با تقسیم کد، استفاده از واردات پویا را برای تقسیم یک بسته به چند تکه بررسی می کند. این با یک برنامه ساده نشان داده می شود که به صورت پویا یک ماژول را هنگام ارسال فرم از Lodash وارد می کند.
از اینجا می توانید به Glitch برای این برنامه دسترسی داشته باشید.
بلوک کد زیر که در src/index.js, وظیفه وارد کردن دینامیک متد را با کلیک روی دکمه دارد.
form.addEventListener("submit", e => {
e.preventDefault()
import('lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
تقسیم یک بسته، زمان بارگذاری صفحه را با کاهش اندازه اولیه آن بهبود می بخشد. نسخه 4.6.0 وب پک پشتیبانی از پیش بارگذاری یا واکشی اولیه تکه هایی را که به صورت پویا وارد می شوند را فراهم می کند. با استفاده از این برنامه به عنوان مثال، روش lodash را می توان در زمان بیکار مرورگر واکشی کرد. هنگامی که کاربر دکمه را فشار می دهد، هیچ تاخیری برای واکشی منبع وجود ندارد.
از پارامتر نظر خاص webpackPrefetch در یک ایمپورت پویا برای واکشی اولیه یک قطعه خاص استفاده کنید. در اینجا نحوه ظاهر آن با این برنامه خاص است.
form.addEventListener("submit", e => {
e.preventDefault()
import(/* webpackPrefetch: true */ 'lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
پس از بارگذاری مجدد برنامه، وب پک یک تگ پیش واکشی برای منبع به سر سند تزریق می کند. این را می توان در پنل Elements در DevTools مشاهده کرد.
مشاهده درخواست‌ها در پنل شبکه نیز نشان می‌دهد که پس از درخواست سایر منابع، این قطعه با اولویت پایین واکشی می‌شود.
اگرچه واکشی اولیه برای این مورد کاربردی منطقی‌تر است، وب‌پک همچنین از بارگیری پیش‌بارگیری قطعاتی که به صورت پویا وارد می‌شوند پشتیبانی می‌کند.
import(/* webpackPreload: true */ 'module')
نتیجه
با استفاده از این کد لبه، شما باید درک کاملی از اینکه چگونه بارگذاری یا واکشی اولیه دارایی های خاص می تواند تجربه کاربری سایت شما را بهبود بخشد، داشته باشید. ذکر این نکته ضروری است که این تکنیک ها نباید برای هر منبعی استفاده شوند و استفاده نادرست از آنها می تواند به عملکرد آسیب برساند. بهترین نتایج فقط با بارگذاری اولیه یا پیش واکشی انتخابی مشاهده می شود.
به طور خلاصه:
- برای منابعی که دیر کشف می شوند اما برای صفحه فعلی حیاتی هستند از پیش بارگذاری استفاده کنید.
- از واکشی اولیه برای منابعی که برای مسیر ناوبری آینده یا اقدام کاربر مورد نیاز است استفاده کنید.
همه مرورگرها در حال حاضر از بارگذاری اولیه و واکشی اولیه پشتیبانی نمی کنند. این بدان معنی است که همه کاربران برنامه شما ممکن است متوجه بهبود عملکرد شوند.
اگر می‌خواهید اطلاعات بیشتری در مورد جنبه‌های خاصی از اینکه چگونه بارگذاری و واکشی اولیه می‌تواند بر صفحه وب شما تأثیر بگذارد، به این مقالات مراجعه کنید: