برای اندازه گیری سرعت پاسخگویی صفحه وب در مقابل تعامل کاربر، المانی به نام First Input Delay (FID) وجود دارد. First Contentful Paint (FCP) و Largest Contentful Paint (LCP)، هر دو معیارهایی برای اندازه گیری زمان رندر یک صفحه هستند. نکته مهمی که در مورد این دو معیار وجود دارد، این است که این دو معیار، سرعت پاسخ یک صفحه نسبت به عمل یک کاربر را اندازه گیری نمی کنند بنابراین برای اندازه گیری این سرعت، از FID استفاده می کنیم.
FID یکی دیگر از معیارهای اندازه گیری در Core Web Vitals می باشد که اولین تعامل و پاسخگویی یک صفحه وب با کاربر را اندازه گیری می کند. FID، بازه زمانی را که یک کاربر برای اولین بار با یک صفحه وب تعامل برقرار می کند تا زمانی که یک مرورگر قادر به پاسخگویی به دستورات کاربر باشد را اندازه گیری می کند. برای اندازه گیری میزان تاخیر در پاسخگویی به دستورات کاربر، به یک تعامل واقعی کاربر نیاز است. برای کسب اطلاعات بیشتر در مورد سه معیار اندازه گیری عملکرد یک صفحه می توانید مطلب LCP و FID و CLS در Web Vitals را مطالعه کنید.
دلیل اصلی یک FID ضعیف، اجرای جاوااسکریپت سنگین می باشد. بهینه سازی نحوه پردازش (Parsing)، کامپایل و اجرای جاوااسکریپت، در کاهش FID، تاثیر مستقیمی دارد.
اجرای جاوااسکریپت های سنگین
زمانیکه مرورگر در حال اجرای جاوااسکریپت های سنگین بر روی thread اصلی باشد، قادر به پاسخگویی به ورودی های کاربران نخواهد بود. به عبارت دیگر، زمانیکه thread اصلی مشغول باشد، مرورگر نمی تواند به تعاملات کاربر پاسخ دهد. برای بهبود این مسئله می توان از روش های زیر استفاده نمود:
- تفکیک نمودن task های طولانی
- بهینه سازی صفحه وب برای interaction readiness
- استفاده از Web Workers
- کاهش زمان اجرای جاوااسکریپت
کاهش میزان جاوااسکریپتی که بر روی یک سینگل پیج لود می شود، از طریق شکستن آن به task های کوچیکتر و غیر همزمان، تاثیر بسزایی در کاهش FID خواهد داشت.
شکستن Long Task ها
Long Task ها، بازه های زمانی اجرای جاوااسکریپت می باشند که ممکن است منجر به غیر پاسخگو بودن یک صفحه از دید کاربر شود. هر قطعه کدی که thread اصلی را به مدت 50 میلی ثانیه یا بیشتر بلاک کند، یک task طولانی محسوب می شود. Long Task ها، نشانه لود و اجرای جاوااسکریپت بیش از نیاز یک کاربر در آن صفحه می باشند. بنابراین قطعه بندی جاوااسکریپت ها می تواند در کاهش delay input موثر باشد.
بهینه سازی صفحه وب برای interaction readiness
دلایل زیادی برای ضعیف بودن امتیاز FID در وب اپ ها وجود دارند که به جاوااسکریپت ها بستگی دارند:
تاثیر اجرای اسکریپت های First-party در تاخیر interaction readiness
اجرای اسکریپت های First-party (اسکریپت های اصلی که با فشردن F12 کیبورد می توانیم آنها را در DevTools مشاهده کنیم) می تواند باعث تاخیر interaction readiness شود.
سایز زیاد جاوااسکریپت و دفعات زیاد اجرای فایل های سنگین جاوااسکریپت می تواند زمان پاسخگویی یک صفحه وب به دستورات (تعاملات) کاربر را کاهش داده و بر روی امتیازات FID، Total Blocking Time (TBT) و Time To Interactive (TTI) تاثیر بگذارد. اجرای تصاعدی کدها می تواند باعث بهبود interaction readiness گردد.
در تصویر زیر، امتیازات TBT، قبل و بعد از اپتیمایز کردن لود اسکریپت های First-party برای یک اپلیکیشن آمده است. همانطور که مشاهده می کنید، با انتقال لود اسکریپت های غیر ضروری به مسیرهای غیر بحرانی، کاربران قادر هستند تا با صفحه، خیلی زودتر تعامل پیدا کنند.
تاثیر اجرای اسکریپت های Third-party در افزایش interaction latency
عواملی چون تگ های Third-party و آنالیتکیس که باعث مشغول شدن شبکه و thread اصلی می گردند، نیز می توانند بر روی زمان تاخیر تعاملات کاربر تاثیر بگذارند.
در برخی از موارد، اسکریپت های Third-party به علت اولویت اجرا و پهنای باند مصرفی در thread اصلی، مانع از اجرای اسکریپت های First-party می شوند و همچنین باعث تاخیر در سرعت پاسخگویی به تعامل (interaction) می گردند. بنابراین سعی کنید تا لود اسکریپت ها را به خوبی اولویت بندی کنید تا میزان تاخیر در پاسخگویی به کاربران را به حداقل برسانید.
استفاده از Web Worker
یکی از دلایل اصلی Input delay، مسدود بودن thread اصلی است. استفاده از Web workers این امکان را به وجود می آورد تا جاوااسکریپت ها در یک thread فرعی یا ثانویه اجرا شوند و اینگونه با انتقال عملیات های غیر مرتبط به UI به یک thread جداگانه، مدت زمان مشغول و مسدود بودن thread اصلی کاهش می یابد و بر روی امتیاز FID تاثیر قابل توجهی خواهد داشت.
کاهش زمان اجرای جاوااسکریپت
کاهش مقدار جاوااسکریپت در یک صفحه، باعث می شود مدت زمانی را که یک مرورگر نیاز دارد تا جاوااسکریپت را اجرا کند نیز کاهش یابد. در نتیجه، با کاهش میزان جاوااسکریپت صفحه، می توان سرعت پاسخگویی به تعاملات کاربر با یک صفحه را افزایش داد.
برای کاهش مقدار جاوااسکریپت در یک صفحه می توان جاوااسکریپت هایی که در Above-the-fold صفحه کاربرد ندارند را Defer نمود.
Defer (به تعویق انداختن اجرا) جاوااسکریپت های بدون استفاده
همواره همه جاوااسکریپت ها render-blocking هستند. زمانیکه یک مرورگر با یک تگ اسکریپت مواجه می شود که به یک فایل جاوااسکریپت اکسترنال لینک شده است، مجبور است تا فعالیت خود را متوقف نموده و آن جاوااسکریپت را دانلود، پردازش، کامپایل و سپس اجرا کند. بنابراین، باید تنها کدی که برای صفحه یا برای پاسخ به دستور کاربر مورد نیاز است، لود گردد و بقیه دیفر شوند.
Defer کردن هرگونه جاوااسکریپت غیر ضروری از جمله اسکریپت های Third-party با استفاده از defer یا استفاده از async برای جلوگیری از بلاک شدن رندر
<script defer src="…"></script>
<script async src="…"></script>همانگونه در ویدیوی زیر مشاهده می کنید، در صورت استفاده از async در تگ <script>، اسکریپت های موجود در صفحه، کاملا مستقل هستند و رندر صفحه برای async scripts ها به تعویق نمی افتد. اسکریپت های که با defer در تگ <script> قرار می گیرند، رندر صفحه را بلاک نمی کنند و هر زمان که DOM آماده بود، اجرا می شوند اما این اتفاق پیش از DOMContentLoaded می افتد.
با فشردن کلید F12 در گوگل کروم به محیط DevTools بروید، سپس با فشردن کلیدهای Ctrl+Shift+P در ویندوز و Command+Shift+P در مک، باکس run command را باز کنید و پس از آن با سرچ Coverage می توانید این گزینه را به کنسول DevTools اضافه نمایید.
سپس با کلیک بر روی آیکون reload، گوگل کروم یک بار صفحه را رفرش خواهد کرد و منابعی که در صفحه لود شده اند را لیست کرده و به صورت رنگی نشان خواهد داد که از چند درصد از هر فایل در صفحه استفاده شده است.
در صورتیکه روی هر فایل دابل کلیک کنید، آن فایل به صورت فرمت شده (از حالت minify خارج شده) در تب Sources به شما نمایش داده خواهد شد و قسمت هایی که در صفحه استفاده شده اند و یا نشده اند به ترتیب با رنگ های آبی و قرمز علامت گذاری می شوند.
تب Coverage در DevTools گوگل کروم، جاوااسکریپت هایی را که در صفحه استفاده نمی شوند، به شما نشان خواهد داد.
جمع بندی
FID یکی از معیارهای Core Web Vitals می باشد که مدت زمان اولین تعامل کاربر با یک صفحه وب و پاسخگویی صفحه به درخواست وی را اندازه گیری می کند. هرچه این مدت زمان کوتاهتر باشد، سرعت پاسخگویی به درخواست کاربر، بیشتر بوده و در نتیجه امتیاز FID، بهتر خواد بود. عدم اجرای جاوااسکریپت های غیر ضروری در یک صفحه و دسته بندی باندل جاوااسکریپت به قطعات کوچکتر، تا حد زیادی در امتیاز FID تاثیرگذار هستند.
