همه ما میدونیم که برداشت اول چقدر مهمه. تو همه چی … تو مصاحبه کاری … تو رابطه دوستی و اینجا تو تعامل با یه سایت هم این برداشت اول یا برخورد اول خیلی مهمه. تو محیط وب، اولین برداشت یا تصور خوب باعث میشه که کاربر به یه کاربر وفادار تبدیل بشه و خیلی فرق هست بین یه کاربری که میاد تو صفحه و سریع صفحه رو میبنده و دیگه هیچوقت پیداش نمیشه، با یه کاربری که هی به سایت سر میزنه.
سوال اینجاست که چه چیزی باعث ایجاد یک احساس خوب می شود و چگونه میتونین برداشت و تصور کاربران سایت خودتون رو ارزیابی کنید؟
در وب، برداشت اول میتونه اشکال مختلفی داشته باشد مثل برداشت اول از طراحی سایت و جذابیت بصری یا برداشت های اول از سرعت و پاسخگویی صفحه.
اندازه گیری یه سری چیزا خیلی سخته، مثل اینکه اندازه بگیریم کاربرا چقدر طراحی سایت را با API های وب دوست داشتن. اما اندازه گیری سرعت و پاسخگویی صفحه جزو اون دسته چیزاست که خیلی راحت میشه اندازه گیریش کرد.
اولین تصور کاربرا از میزان سرعت بارگیری سایت شما با First Contentful Paint (FCP) یا اولین ترسیم محتوایی قابل اندازه گیری است. اما اینکه سایت شما چقدر سریع می تواند پیکسل های صفحه را ترسیم کنه، فقط یه قسمته از داستانه! به همان اندازه هم مهمه که ببینین سایت شما هنگام تعامل کاربرا با آن پیکسل ها یا ترسیم ها چقدر پاسخگو هست! معیار اولین تأخیر ورودی یا FID به سنجش اولین برداشت کاربر از تعامل و پاسخگویی سایت شما کمک می کند.
FID یا اولین تاخیر ورودی چیست؟
FID یا اولین تاخیر ورودی، زمان اولین تعامل کاربر با یک صفحه را اندازه گیری می کند. یعنی زمان بین وقتی که کاربر روی یک لینک کلیک می کنه یا روی یه دکمه ضربه می زند یا از یک کنترل سفارشی با JavaScript استفاده می کنه تا زمانی که مرورگر در واقع قادر به پاسخگویی به آن تعامل کاربر باشه.
برای ارائه یک تجربه کاربری خوب، سایت ها باید تلاش کنند تا اولین تأخیر ورودی کمتر از 100 میلی ثانیه باشه. برای اطمینان از دستیابی به این هدف
جزئیات بیشتر در مورد FID
برنامه نویس وقتی یه برنامه می نویسه فک می کنه برنامه اش رو جوری نوشته که موقع اجرا، تا کاربر یه دستوری میده یا یه تعاملی باهاش داره، اون هم سریع اجرا میشه و جواب میده. اما اگه نظر کاربرا رو بپرسین چی؟! کاربرا معمولاً برعکسش رو میگن! میگن ما یه برنامه واسه گوشیمون نصب کردیم اما هرچی زدیم روش باز نشد و دیگه بیخیالش شدیم. این میشه تجربه کاربری بد!
به طور کلی، تأخیر ورودی وقتی اتفاق میفته که مرورگر داره یه کار دیگه انجام میده و کاربر یه تعاملی داره باهاش. مثلاً یهو می زنه رو یه دکمه یا صفحه رو اسکرول می کنه. اما چون مرورگر سرش شلوغه، فعلاً جواب کاربر رو نمیده و کاربر معطل میمونه. یکی از سرشلوغی های مرورگر معمولاً سر و کله زدن و اجرای یه فایل جاوااسکریپت JavaScript بزرگه که قبلاً توسط برنامه شما بارگذاری شده. وقتی مرورگر داره اون فایل رو اجرا میکنه نمیتونه به هیچکدوم از تعامل های دیگه کاربر جواب بده. چون اول باید کارش با اون فایل جاوااسکریپت تموم بشه، شاید وسط اجرای اون فایل، کدهای جاوااسکریپت بهش بگن مثلاً یه کار دیگه هم باید انجام بدی.
جدول زمانی زیر رو برای بارگیری یه صفحه معمولی وب در نظر بگیرین:
عکس بالا داره چندتا درخواست برای منابع رو نشون میده (به احتمال زیاد پرونده های CSS و JS) ، و وقتی همه این منابع بارگیری شدن تازه دستور اصلی پردازش میشه. خب این یعنی چی؟ یعنی یه بازه های زمانی هست که سیستم همش مشغوله (قسمت های نارنجی رنگی که تو تصویر نشون داده شده).
تأخیرهای ورودی طولانی اول معمولاً بین First Contentful Paint (FCP) و Time to Interactive (TTI) اتفاق می افتن. چون صفحه ای که داره باز میشه، یه سری از مطالب رو ارائه داده اما هنوز جا داره که کاملاً تعاملی بشه. برای این که این موضوع رو بهتر درک کنین، به عکس زیر یه نگاهی بندازین. تو عکس زیر، FCP و TTI به جدول زمانی اضافه شده اند:
شاید متوجه شده باشین که بین FCP و TTI مدت زمان نسبتاً زیادی (از جمله سه کار طولانی) وجود داره. اگر یک کاربر در این مدت سعی کنه با صفحه تعامل داشته باشد (مثلاً روی یک لینک کلیک کنه)، یه تاخیری میفته بین زمان کلیک کردن و زمانی که موضوع اصلی پاسخ داده میشه.
حالا فک کنین مرورگر داره تازه یه کار خیلی طولانی رو شروع میکنه، همون موقع هم کاربر یه تعاملی با صفحه داره. مثلاً روی یه لینک کلیک میکنه:
چون کاربر وسط کار مرورگر یه تعاملی داشته و یه دستور جدید داده، باید صبر کنه تا کار مرورگر کامل بشه بعد بیاد سراغ دستور کاربر. این مدت زمانی که باید صبر کنه، میشه FID کاربر برای این صفحه.
تو این مثال، کاربر فقط اول یه کار خیلی زمانبر مرورگر، با صفحه ارتباط برقرار کرده بود. اگر کاربر لحظه ای زودتر (در طی مدت زمان خالی) با صفحه تعامل داشت ، مرورگر میتونست بلافاصله پاسخ دهد.
اگر تعامل Event Listener نداشت؟
FID دلتای بین زمان دریافت یک رویداد ورودی و زمانی که مرورگر بیکاره رو اندازه گیری می کند. این یعنی FID حتی در مواردی که شنونده رویداد یا Event Listener ثبت نشده باشه هم اندازه گیری میشه. دلیل این اندازه گیری هم اینه که خیلی از تعامل‌های کاربر به شنونده رویداد یا Event Listener احتیاج ندارن بلکه فقط لازمه که مرورگر بیکار باشه تا بتونه اون تعامل رو جواب بده.
مثلاً، تمام عناصر HTML ذیل زیر باید صبر کنن تا مرورگر کارش تموم بشه و بعد به درخواست های اونا پاسخ بده:
- قسمت های متنی
- Checkbox
- دکمه های رادیویی Radio Buttons
- انتخاب های دراپ داون Dropdown
- لینک ها
