بهینه‌سازی تاخیر ورودی اول (FID)
کلیک کردم اما اتفاقی نیفتاد! چرا نمی توانم با این صفحه ارتباط برقرار کنم؟ دلیل آن تاخیر ورودی اول (FID) است. می‌باست با بهینه‌سازی تاخیر ورودی اول (FID) تجربه کاربری بهتری را برای کاربران خود به ارمغان آوریم.
First Contentful Paint (FCP) و Largest Contentful Paint (LCP) هر دو معیارهایی هستند که مدت زمان ارائه بصری محتوای صفحه را اندازه‌گیری می‌کنند. اگرچه این معیارها مهم هستند، اما مشخص نمی‌کنند صفحه با چه سرعتی به تعامل کاربر پاسخ می‌دهد.
First Input Delay(FID) یکی از معیارهای اصلی Core Web Vital است که اولین تاثیر کاربر از تعامل و پاسخگویی سایت را به تصویر می‌کشد. این زمان از زمانی که کاربر برای اولین بار با یک صفحه ارتباط برقرار می‌کند تا زمانی که مرورگر در واقع قادر به پاسخگویی به آن تعامل است را اندازه‌گیری می‌کند. FID یک معیار عملیاتی است و نمی‌تواند در محیط آزمایشگاه شبیه‌سازی شود. برای اندازه‌گیری تأخیر پاسخ، به تعامل واقعی کاربر نیاز است.
برای کمک به پیش‌بینی FID در آزمایشگاه، محاسبه زمان مسدود کردن کل (TBT) را توصیه می‌کنیم. اگرچه آنها موارد مختلفی را اندازه‌گیری می‌کنند، اما بهبود TBT معمولاً با ارتقای FID مطابقت دارد.
علت اصلی ضعف FID، اجرای JavaScript سنگین است. بهینه‌سازی نحوه تجزیه، کامپایل و اجرای JavaScript در صفحه وب شما به طور مستقیم باعث بهینه‌سازی تاخیر ورودی اول (FID) می‌شود.
اجرای جاوااسکریپت سنگین
هنگام اجرای جاوا اسکریپت در ترد (thread) اصلی، مرورگر نمی‌تواند به بیشتر ورودی‌های کاربر پاسخ دهد. به عبارت دیگر، در حالی که ترد اصلی مشغول است، مرورگر نمی‌تواند به تعاملات کاربر پاسخ دهد. برای بهبود می‌توان موارد زیر را در نظر گرفت:
-
تسک‌های طولانی را از هم جدا کنید.
-
صفحه خود را برای آمادگی برای تعامل بهینه کنید.
-
از یک وب ورکر استفاده کنید.
-
زمان اجرای جاوا اسکریپت را کاهش دهید.
جداسازی تسک‌های طولانی از هم
اگر قبلاً سعی کرده‌اید مقدار JavaScript بارگیری شده در یک صفحه را کاهش دهید، تجزیه کدی که در زمان بیشتری اجرا می‌شود به کارهای ناهمگام کوچکتر می‌تواند مفید باشد.
تسک‌های طولانی، دوره‌های اجرای JavaScript است که در آن کاربران ممکن است UI شما را بی پاسخ ببینند. هر قطعه کد که ترد اصلی را برای 50 میلی‌ثانیه یا بیشتر مسدود کند، می‌تواند به عنوان یک تسک طولانی توصیف شود. تسک‌های طولانی نشانه انسداد بیش از حد احتمالی جاوا اسکریپت است (بارگذاری و اجرا بیشتر از آنچه ممکن است کاربر در حال حاضر به آن نیاز داشته باشد). تقسیم کارهای طولانی می‌تواند تأخیر ورودی را در سایت شما کاهش دهد.
با اتخاذ بهترین روش‌ها مانند تقسیم کد و شکستن کارهای طولانی، بهینه‌سازی تاخیر ورودی اول (FID) بهطور چشمگیری اتفاق می‌افتد. اگرچه TBT یک معیار عملیاتی نیست، اما برای بررسی پیشرفت در جهت بهبود هر دو معیار TTI و FID مفید است.
آمادگی صفحه برای تعامل
تعدادی از دلایل عمده برای ضعف FID و TBT در اپلیکیشن‌های وب وجود دارند که به شدت به دلیل نحوه بارگیری و اجرای JavaScript است:
افزایش سرعت جاوا اسکریپت، زمان اجرای سنگین و تجزیه ناکارآمد می‌تواند سرعت پاسخ یک صفحه به ورودی کاربر و تأثیر برFID ، TBT و TTI را کاهش دهد. بارگذاری تدریجی کد و ویژگی‌ها می‌تواند به بهبود آمادگی تعامل کمک کند. به نظر می‌رسد اپلیکیشن‌های رندر شده از سمت سرور به سرعت در حال نمایش عناصر روی صفحه هستند، اما مراقب باشید که تعاملات کاربر توسط اجرای اسکریپت‌های بزرگ مسدود نشود. در صورت استفاده از تجزیه کد مبتنی بر مسیر (routing)، این کار می تواند چند صد میلی ثانیه، حتی گاهی چند ثانیه طول بکشد. در نظر داشته باشید که بیشتر در سمت سرور جابجا شوید یا به طور ایستا محتوای بیشتری در زمان ساخت ایجاد کنید.
انتظار برای زنجیره دریافت داده از سرور، می‌تواند تأخیر در تعامل را تحت تأثیر قرار دهد. ذخیره داده‌های بزرگ درون‌خطی می‌تواند زمان تجزیه HTML را تحت تاثیر قرار داده و بر روی معیارهای نمایش محتوا و تعامل تأثیر بگذارد.
بسیاری از سایت‌ها دارای برچسب‌ها و تجزیه‌وتحلیل‌های شخص ثالث هستند که می‌توانند شبکه را مشغول کنند به طوری که ترد اصلی به صورت دوره‌ای پاسخ ندهد، و همین عامل باعث تأخیر در تعامل می‌شود. بارگیری درخواستی کد شخص ثالث را بررسی کنید. در بعضی موارد، اسکریپت‌های شخص ثالث می‌توانند از نظر اولویت و پهنای باند در ترد اصلی تاثیرگذار باشند که همین عامل می‌تواند در آماده‌شدن یک صفحه برای تعامل تأخیر ایجاد کند. سعی کنید اولویت‌بندی بارگیری با مواردی باشد که فکر می کنید بیشترین ارزش را برای کاربران دارا می‌باشد.
استفاده از وب ورکر
ترد اصلی مسدودشده یکی از دلایل اصلی تأخیر ورودی است. وب ورکرها امکان اجرای جاوا اسکریپت را بر روی یک ترد پس زمینه فراهم می‌کنند. انتقال عملیات غیر UI به تعدادی وب ورکر جداگانه می‌تواند زمان مسدود کردن ترد اصلی را کاهش داده و در نتیجه باعث بهینه‌سازی تاخیر ورودی اول (FID) می‌شود.
کاهش زمان اجرای جاوااسکریپت
محدود کردن مقدار جاوا اسکریپت در صفحه، مدت زمانی که مرورگر برای اجرای کد جاوا اسکریپت نیاز دارد را کاهش می‌دهد. این مساله باعث می‌شود مرورگر با سرعت بالاتری به تعامل کاربر پاسخ دهد.
برای کاهش مقدار جاوا اسکریپت اجرا شده در صفحه خود:
-
جاوا اسکریپت استفاده‌نشده را به تعویق بیندازید.
-
polyfill های استفاده‌نشده را به حداقل برسانید.
به تعویق انداختن جاوااسکریپت‌های استفاده‌نشده
به طور پیش فرض تمام JavaScript رندر–بلاکینگ است. وقتی مرورگر با یک برچسب اسکریپت روبرو می‌شود که به یک فایل JavaScript خارجی پیوند دارد، باید کاری را که انجام می‌دهد متوقف کرده سپس آن JavaScript را بارگیری، تجزیه، کامپایل و اجرا کند. بنابراین شما فقط باید کدی را که برای صفحه یا پاسخ دادن به ورودی کاربر لازم است بارگیری کنید.
تب Coverage در Chrome DevTools می‌تواند به شما بگوید که چه مقدار از JavaScript در صفحه وب شما استفاده نمی‌شود.
برای کاهش جاوا اسکریپت استفاده نشده:
-
باندل کد خود را به چند بخش تقسیم کنید.
-
با استفاده از async یا defer هر JavaScript غیر مهم، از جمله اسکریپت‌های شخص ثالث را به تعویق بیندازید.
Code-splitting مفهوم تقسیم یک بسته بزرگ جاوا اسکریپت به قطعات کوچکتر است که می‌توانند به صورت مشروط بارگیری شوند (همچنین به عنوان lazy-loading شناخته می‌شود). بیشتر مرورگرهای جدید از ایمورت پویا پشتیبانی می‌کنند که به شما امکان می‌دهد ماژول را بر اساس تقاضا فراخوان کنید:
|
1 2 3 |
<span style="font-size: 16px;">import('module.js').then((module) => { // Do something with the module. });</span> |
با ایمپورت کردن پویا جاوا اسکریپت در برخی از تعاملات کاربر (مانند تغییر مسیر(routing) یا نمایش مدال)، اطمینان حاصل می‌شود که کدی که برای بارگذاری صفحه اولیه استفاده نشده است فقط در صورت لزوم فراخوانی می‌شود.
علاوه بر تقسیم کد، همیشه از async یا defer برای اسکریپت‌های مورد استفاده در محتوای غیرمهم یا محتوایی که در ابتدا در نمایشگر ظاهر نمی‌شوند، استفاده کنید.
|
1 2 |
<span style="font-size: 16px;"><script defer src="…"></script> <script async src="…"></script></span> |
در صورت عدم وجود دلیل خاصی، همه اسکریپت‌های شخص ثالث باید به طور پیش‌فرض با defer یا async بارگذاری شوند.
کاهش polyfillهای استفاده‌نشده
اگر کد خود را با استفاده از سینتکس مدرن جاوا اسکریپت و مرجع API های مرورگرهای مدرن کدنویسی کرده‌اید، برای کار در مرورگرهای قدیمی‌تر، باید از polyfillها استفاده کرد.
یکی از مهم‌ترین نگرانی‌های مربوط به عملکرد polyfillها و کد قابل انتقال در سایت شما این است که اگر مرورگرهای جدید به آنها نیازی ندارند، نباید مجبور به بارگیری آن باشند. برای کاهش اندازه جاوا اسکریپت برنامه خود، تا حد ممکن polyfill های استفاده‌نشده را به حداقل برسانید و استفاده از آنها را به محیط‌هایی که مورد نیاز است محدود کنید.
برای بهینه‌سازی استفاده از plyfill در سایت خود:
-
اگر از Babel به عنوان مبدل استفاده می‌کنید، از @ babel / preset-env استفاده کنید تا فقط شامل polyfillهای مورد نیاز برای مرورگرهایی باشد که قصد دارید آنها را هدف قرار دهید.
-
برای ارائه دو بسته جداگانه از الگوی module / nomodule استفاده کنید.
|
1 2 3 |
<span style="font-size: 16px;"><script type="module" src="modern.js"></script> <script nomodule src="legacy.js" defer></script> </span> |
منبع: