در ۱۲ مارس ۲۰۲۴، تاخیر اولین ورودی (FID) رسماً با INP (مخفف Interaction to Next Paint) جایگزین و از گزارش های عملکرد حذف شده است. تاخیر اولین ورودی (FID) یکی از معیارهای Core Web Vitals می باشد که تعامل پذیری و واکنش گرایی یک وب سایت را با اندازه گیری تاخیر بین اولین تعامل کاربر و پاسخ مرورگر ارزیابی می کند. جهت بهینه سازی FID، تمرکز بر کاهش زمان اجرای جاوا اسکریپت و تقسیم وظایف طولانی برای پردازش پس زمینه، ضروری است. دستیابی به FID کمتر از ۱۰۰ میلی‌ثانیه، باعث بهبود سرعت پاسخگویی سایت شده و مستقیماً بر رضایت کاربران و امتیازات عملکرد تأثیر می گذارد.
تصویر(۱)
تاخیر اولین ورودی یا First Input Delay چیست؟
همانطور که اشاره شد، FID مدت زمان لازم برای شروع پردازش اولین تعامل کاربر در یک صفحه را دنبال کرده و میزان تاخیر پس از اقداماتی مانند کلیک یا ضربه زدن (Tap) را اندازه گیری می کند اما شامل اسکرول و زوم نمی شود.
جهت قبولی در ارزیابی، مقدار FID باید برای ۷۵ درصد صفحات، کمتر از ۱۰۰ میلی ثانیه باشد. به طور کلی، ۱۰۰ میلی ثانیه یک آستانه مهم برای کاربران محسوب می شود. درک انسان از زمان، تاکنون تغییر چندانی نکرده است و گوگل نیز ۱۰۰ میلی ثانیه را مرز بین FID خوب و بد در نظر می گیرد. در نتیجه می بایست بهینه سازی FID براساس این زمان انجام گردد.
چرا FID فقط اولین ورودی را اندازه گیری می کند؟
تصویر(۲)
در وب، اولین برداشت اهمیت زیادی دارد. اگر کاربران در اولین تلاش برای تعامل با صفحه موفق نباشند، معمولاً صفحه را ترک می کنند. به همین دلیل بهینه سازی FID بسیار مهم می باشد. همچنین جنبه دیگری که FID را منحصر به فرد می کند، رویکرد field-only یا میدانی آن می باشد.
این معیار نیاز به ورودی واقعی کاربر در یک لحظه خاص دارد. اگر ورودی وجود نداشته باشد، هیچ چیز برای اندازه گیری نخواهد بود. همچنین با توجه به اینکه چه وظایفی روی رشته اصلی (Main Thread) در حال اجرا هستند؛ کلیک کاربر روی یک دکمه در زمان های مختلف می تواند نتایج متفاوتی داشته باشد.
FID و سایر معیارهای عملکرد وب
اولین تعامل کاربر معمولاً بین First Contentful Paint (FCP) و Time To Interactive (TTI) اتفاق می افتد اما اگر مطالعه ای در مورد Total Blocking Time (TBT) داشته باشید، متوجه خواهید شد که TBT نیز در همان بازه زمانی قرار دارد.
تصویر(۳)
بنابراین، FID، FCP، TTI و TBT همگی به هم مرتبط هستند. ممکن است این تعداد مخفف گیج کننده باشد اما در ادامه به صورت مجزا بررسی خواهند شد.
تفاوت FID و First Contentful Paint (FCP)
آیا FCP همان FID می باشد؟ این سوال رایج است اما FCP و FID دو معیار کاملاً متفاوت هستند. FCP زمان نمایش اولین محتوای صفحه را اندازه گیری می کند. این محتوا می تواند تصویر، ویدئو، متن، انیمیشن یا هر چیز دیگری باشد که در مدل شی‌گرای سند (DOM) تعریف شده است.
تصویر(۴)
به عبارت دیگر، FID و FCP موارد متفاوتی را ارزیابی می کنند. یکی مربوط به واکنش گرایی بوده و دیگری به زمان بارگذاری مرتبط است. در کنار هم، این دو معیار درک بهتری از اولین برداشت کاربران ارائه می دهند.
همچنین، تعامل کاربر پس از نمایش اولین بخش محتوای صفحه اتفاق می افتد و به همین دلیل، FID و FCP ذاتاً مرتبط هستند. اندازه گیری تنها یکی از آنها، تصویر کاملی از تجربه واقعی کاربر را ارائه نمی دهد. می بایست بررسی و بهینه سازی FID و FCP باهم انجام گردد.
تفاوت FID و TBT(Total Blocking Time)
TBT مدت زمانی است که در آن وظایف طولانی (Long Tasks) مانع از اجرای رشته اصلی (Main Thread) شده و بر قابلیت استفاده صفحه تأثیر می‌گذارند. بین FID و TBT شباهت هایی وجود دارد.
هر دو بین FCP و TTI رخ می دهند و وظایف طولانی روی رشته اصلی می‌توانند روی آنها تاثیرگذار باشند. همچنین هر دو معیار، مدت زمان عدم پاسخگویی صفحه را ارزیابی می کنند. تفاوت این است که TBT بدون نیاز به تعامل کاربر، زمان در دسترس نبودن رشته اصلی را محاسبه می کند، در حالی که FID تاخیر را برای هر مورد خاص اندازه گیری می نماید.
تصویر(۵)
این تفاوت باعث می شود که TBT عمدتاً یک معیار آزمایشگاهی باشد اما FID همیشه در شرایط واقعی (Field) اندازه گیری می شود.
تصویر(۶)
با این حال، بررسی هر دو معیار، درک واضحی از میزان تأثیر پروسه های طولانی بر تعامل پذیری صفحه ارائه می دهد. از آنجا که FID و TBT بسیار مشابه هستند، معمولاً هر دو تحت تأثیر مشکلات مشابه مرتبط با جاوا اسکریپت قرار می‌گیرند.
تفاوت FID و Time To Interactive (TTI)
TTI مدت زمانی را اندازه گیری می کند که یک صفحه به طور کامل تعامل پذیر گردد. صفحه زمانی کاملاً تعاملی در نظر گرفته می شود که در کمتر از ۵۰ میلی ثانیه به واکنش کاربر پاسخ دهد. باید توجه داشت که همانند TBT، معیار TTI نیز عمدتاً یک معیار آزمایشگاهی است.
مجددا در اینجا، FID نقش مکمل مهمی را ایفا می کند. یک صفحه ممکن است در هر لحظه تعاملی شود اما کاربران قبل از آن روی صفحه کلیک کرده یا ضربه بزنند. این همان نقطه‌ای است که TTI عملکرد ضعیفی دارد. کاربران اهمیت نمی دهند که یک صفحه در ۶، ۷ یا ۸ ثانیه تعامل پذیر می شود؛ آنها فقط می خواهند صفحه در لحظه ای که به تعامل نیاز دارند، پاسخگو باشد. به همین دلیل، FID شکاف باقی مانده از TTI را پر می کند.
FID و رشته اصلی (Main Thread)
FID مدت زمانی را اندازه گیری می کند که مرورگر امکان پاسخگویی به تعامل کاربر را ندارد. به محض اینکه مرورگر توانایی پاسخگویی پیدا کند، تاخیر ورودی پایان می یابد. در نتیجه، برای بهینه سازی FID، ابتدا باید متوجه شد که چرا مرورگر گاهی نمی تواند به موقع تعامل کاربر را پاسخ دهد. پاسخ ساده می باشد:
رشته اصلی مرورگر ممکن است مسدود شود
می‌توانید رشته اصلی (main thread) را مانند یک قهرمان در نظر بگیرید که بسیاری از وظایف سنگین وب را انجام می دهد. این رشته مسئول وظایف مهمی مانند رندر صفحه و پاسخ به تعاملات کاربر است. متأسفانه، رشته اصلی بیش از حد تحت فشار است. پیچیدگی روز افزون وب باعث شده تا سایت ها از منابع بیشتری مانند CSS و جاوا اسکریپت که هر دو روی رشته اصلی اجرا می شوند، استفاده کنند.
در حال حاضر، نکته مهم این است که وقتی رشته اصلی مرورگر مشغول می باشد، نمی‌تواند به تعاملات کاربر پاسخ دهد. این مسئله منجر به تاخیر ورودی طولانی و در نتیجه امتیاز ضعیف FID می شود. برای بهینه سازی FID می بایست وضعیت رشته اصلی بررسی گردد.
اندازه‌گیری تاخیر اولین ورودی
شما می توانید FID را به سرعت با ابزار PageSpeed Insights گوگل بررسی کنید. این معیار یکی از اولین مواردی بود که در گزارش “Field Data” نمایش داده می شد.
تصویر(۷)
از آنجایی که داده‌های میدانی نشان می‌دهند کاربران واقعی چگونه سایت شما را تجربه می‌کنند، بهتر است در بلندمدت روی بهبود آن تمرکز کنید.
همچنین می توانید از گزارش Core Web Vitals در Google Search Console استفاده کنید. برای این کار، کافی بود GSC را باز کرده و از منوی “Experience” روی “Core Web Vitals” کلیک نمایید. سپس از بین گزارش های “Mobile” یا “Desktop” انتخاب کنید.
تصویر(۸)
در این بخش، گزارش به شما تمام صفحاتی را که دارای مشکلات مشابه، مانند FID طولانی، بودند نمایش می داد.
اگر با جاوا اسکریپت آشنایی دارید، می توانید از دو ابزار دیگر نیز استفاده کنید:
- کتابخانه JavaScript وب وایتالز (Web Vitals JavaScript Library)
- گزارش تجربه کاربری کروم (CrUX)
در نهایت، مهم نیست که از کدام ابزار استفاده می کنید. آنچه اهمیت دارد، آگاهی همیشگی از مشکلات احتمالی FID در سایت شما است.
رفع مشکلات FID و یافتن وظایف طولانی جاوا اسکریپت (Long JavaScript Tasks)
پس از شناسایی صفحات نیازمند بهبود، باید به دنبال وظایف خاصی باشید که باعث ایجاد تاخیر می شوند. وظایف طولانی جاوا اسکریپت می توانند رشته اصلی (Main Thread) را مسدود کنند و مانع از پاسخگویی سریع آن به تعاملات کاربر شوند. برای یافتن این وظایف، می توانید از PageSpeed Insights استفاده کرده و روی گزارش “Avoid long main-thread tasks” کلیک کنید.
پنل “Performance” در DevTools نیز می تواند به شما کمک کند. در قسمت “Main” به دنبال وظایف خاکستری با پوشش قرمز کوچک بگردید. این ها همان وظایف طولانی (Long Tasks) هستند که باید به بخش های کوچک‌تر تقسیم شوند.
تصویر(۹)
همچنین می توانید منابع را بر اساس URL و کل زمان اجرا گروه بندی کنید تا تحلیل شما آسان تر شود.
در برخی موارد، شاید متوجه شوید که چند تابع طولانی بیشترین تاخیر را ایجاد می کنند. در موارد دیگر، ممکن است توابع سریع اجرا شوند اما تعداد بالای آنها در یک وظیفه واحد، منجر به ایجاد وظیفه ای طولانی شود. در هر دو حالت، تقسیم وظایف طولانی به بهبود تمامی معیارهای تعاملی کمک می‌کند.
روش های دیگر برای بهبود FID
در لیست زیر چند راهکار دیگر جهت بهینه سازی FID آورده شده است:
- به تعویق انداختن یا حذف اسکریپت های شخص ثالث غیرضروری: اسکریپت های شخص ثالث می توانند اجرای اسکریپت های شما را به تاخیر بیندازند. بنابراین، اولویت بندی اسکریپت های ضروری برای بهبود تجربه کاربر و بهینه سازی FID اهمیت دارد. معمولاً، اسکریپت های تبلیغات و پاپ آپ ها در اولویت نیستند.
- استفاده از Web Workers: وب ورکِرها اجازه می دهند تا اسکریپت ها بدون اینکه بر رشته اصلی تأثیر بگذارند، در پس زمینه اجرا شوند. در واقع انتقال عملیات non-UI به یک رشته پس زمینه روشی بهینه است.
- استراتژی “Idle Until Urgent”: این روش، کد را در دوره های بیکار سیستم یا هنگام درخواست منبع اجرا می کند و باعث بهینه سازی FID می شود.
- فشرده سازی (Minification) و کاهش حجم فایل ها: Minification شامل حذف بخش های غیرضروری از کد مانند کامنت‌ها، فاصله ها و خطوط خالی است. Compression نیز کد باینری را بازنویسی می کند تا حجم فایل کاهش یابد. این تکنیک ها باعث اجرای سریع تر کد می شوند. ابزارهایی مانند NitroPack این کار را به صورت خودکار انجام می دهند.
- کاهش CSS غیرضروری (Reduce unused CSS): جاوا اسکریپت معمولاً عامل اصلی مشکلات است اما CSS نیز می تواند رشته اصلی را مسدود کند. حذف CSS بلااستفاده نه تنها تعداد بایت های دانلودی را کاهش می دهد بلکه باعث می شود مرورگر سریع تر صفحه را رندر کند زیرا در این حالت مرورگر عملیات کمتری برای انجام دادن خواهد داشت.
بسیاری از این بهینه سازی ها نیاز به تغییر دستی در کد جاوا اسکریپت دارند. طبیعتاً این کار نیازمند تخصص و زمان بیشتر است اما بهبود عملکرد چشمگیری خواهد داشت. علاوه بر بهینه سازی کد جاوا اسکریپت، می توانید نحوه بارگذاری منابع را تغییر دهید تا فشار روی رشته اصلی کاهش یابد.
جمع بندی: آینده معیار First Input Delay چیست؟
در این مقاله تلاش شد تا بررسی گردد که آیا صرفا بهینه سازی FID کافی است؟ اگرچه FID مهم است اما یک معیار کامل نیست. گوگل اعلام کرده که معیار بهتری برای اندازه گیری واکنش پذیری (Responsiveness) در حال توسعه است.
برخی از مشکلات اصلی FID شامل موارد زیر می باشند:
- FID صرفا تاخیر رویداد را اندازه گیری کرده و کل مدت زمان آن را اندازه گیری نمی کند. معیار جدید احتمالاً از لحظه ای که کاربر تعامل را انجام می دهد تا زمانی که نتیجه پردازش روی صفحه نمایش داده می شود را دنبال می کند.
- FID فقط تاخیر اولین ورودی را ردیابی می کند که این موضوع تصویری کامل از تجربه کاربر ارائه نمی‌دهد. گوگل در حال توسعه یک معیار جدید است که گروهی از رویدادها را تحت عنوان “Interactions” بررسی می کند. این معیار جدید، کل مدت زمانی که کاربر باید برای دریافت پاسخ منتظر بماند را محاسبه خواهد کرد.