TTI چیست؟ چرا سرعت بالای سایت میتواند برای تجربه کاربری بد باشد؟

0

وب‌سایت‎های سریع گاهی ممکن است عملکرد بدتری نسبت به وب‎سایت های کند داشته باشند. بله! درست متوجه شدید. البته این جمله به این معنی نیست که سرعت صفحه اهمیتی ندارد. اتفاقا این موضوع خیلی هم مهم است. اما سرعت صفحه فقط مربوط به ارائه محتوا نیست. سرعت، در مواقعی به معنی ارائه یک وب‎سایت بصری کامل و قابل استفاده است .

در واقع اگر شما همه تمرکزتان را روی موارد بصری بگذارید و از قابلیت استفاده درست از سایت غافل شوید، این موضوع می‎‌تواند تجربه کاربری بدی برای کاربران سایت شما ایجاد کند.

در این مقاله از تریبون، در مورد چرایی این موضوع کمی صحبت خواهیم کرد اما ابتدا بیایید با Time To Interactive (TTI) آشنا شویم.

Time to Interactive (TTI) چیست؟

Time To Interactive (TTI) زمانی است که طول می‎کشد تا یک صفحه توسط کاربر قابل تعامل یا Interactive شود. این تعامل‌پذیری شامل موارد زیر است:

  • صفحه محتوای ارزشمندی را نمایش دهد.
  • Event Handlerها برای بیشتر المان‌های قابل مشاهده صفحه ثبت شوند.
  • صفحه در ۵۰ میلی ثانیه به تعاملات کاربران پاسخ دهد.

در اینجا باید چند مورد را شفاف‌سازی کنیم:

در ابتدا باید بگوییم FCP یا First Contentful Paint یک متریک برای اندازه‌گیری زمانی است که یک صفحه، نمایش محتوا را شروع می‌کند. TTI پس از FCP ایجاد می‌شود و وجود فاصله بسیار زیاد بین این دو معیار، می‌تواند به ایجاد مشکلات جدی منجر شود.

نکته دوم این که، کنترل کننده‌های رویداد یا همان Event Handlerها، اسکریپت‎هایی هستند که در صورت وقوع یک رویداد، به طور خودکار اجرا می‎شوند. به عنوان مثال، کلیک کاربر روی یک دکمه در وب‌سایت، یک رویداد است. Event Handlerهای سایت شما با تولید نتایج مورد نیاز به این رویداد پاسخ می‎دهند.

اگر Event Handlerها در سایت شما (مخصوصا برای المان‌های زیاد) ثبت نشده باشند، وب‌سایت شما به ورودی کاربر پاسخ نخواهد داد.

پاسخ به تعاملات کاربر در زمان ۵۰ میلی ثانیه، برای ارائه یک تجربه کاربری یکپارچه بسیار مهم است. انجام این کار اغلب دشوار است، زیرا Long Tasks می‌تواند موضوع اصلی را مسدود کند و باعث ایجاد تاخیر بین ورودی کاربر و پاسخ برنامه شود.


در بلاگ تریبون بخوانید: TTFB چیست و معرفی راه‌های بهبود آن


آستانه TTI

همان‌طور که گفتیم، معیار TTI یک زمان‌بندی ترکیبی است و مدت زمانی که طول می‌کشد تا صفحه شما بتواند با کاربر تعامل ایجاد کند را بررسی می‌کند.

آستانه TTI به شرح زیر است:

  • میزان TTI برابر با ۲۴۶۸ میلی ثانیه یا کمتر باشد: این زمان استاندارد است و نیازی نیست کاری برای بهبود آن انجام دهید.
  • میزان TTI بین ۲۴۶۸ تا ۳۲۸۰ میلی ثانیه باشد: این زمان خوب است اما نیاز به بهبود دارد.
  • میزان TTI بین ۳۲۸۰ تا ۴۵۰۰ میلی ثانیه باشد: این زمان طولانی‌تر از اندازه توصیه شده است.
  • میزان TTI بالاتر از ۴۵۰۰ میلی ثانیه باشد: این زمان خیلی طولانی‌تر از اندازه توصیه شده است.

تاثیر TTI روی امتیاز عملکرد یک وب‌سایت

معیار TTI حدود ۱۵ درصد از کل امتیاز عملکرد را به خود اختصاص می‌دهد. این موضوع نشان‌دهنده آن است که TTI اهمیت نسبتا زیادی دارد.

بهینه‌سازی این معیار می‌تواند به بازدیدکنندگان شما کمک کند تا بهبود قابل ملاحظه‎ای را در سرعت تعامل کامل و استفاده از صفحه شما درک کنند. توجه داشته باشید که TTI معیار همراهی با زمان مسدود کردن کل (TBT) است و این دو معیار در کنار هم، بینش عمیق‌تری در مورد پاسخ صفحه شما به ورودی کاربر ارائه می‎دهند.

زمان لود (Load Time) و تعامل

برای بیشتر افراد، عملکرد یک وب‌سایت با سرعت آن، مخصوصا سرعت ارائه محتوا به بازدید کنندگان سنجیده می‌شود. در واقع یک سایت باید بتواند در سریع‌ترین زمان ممکن به کاربران ارائه شود. اما چه اتفاقی می‌افتد وقتی فقط روی ارائه محتوا تمرکز کنید و از قابلیت امکان استفاده غافل شوید؟

مردم شروع به کلیک‌های خشمگین می‌کنند! کلیک خشمگین زمانی اتفاق می‌افتد که کاربران به دلیل ناامید شدن، به طور مداوم روی یک وب‌سایت، اپلیکیشن تلفن همراه یا هر دستگاه دیجیتالی دیگر کلیک، کلیک، کلیک می‌کنند. تق تق تق! حتما برای شما هم اتفاق افتاده، درست است؟

کلیک خشمگین، روش ما برای ابراز ناامیدی به صورت آنلاین است. هنگامی که یک دکمه کار نمی‌کند، ما این‌قدر روی آن کلیک می‌کنیم تا کار کند! چرا ما این کار را انجام می‌دهیم؟

چون وقتی یک صفحه بصری کامل را مشاهده می‌کنیم، انتظار داریم بتوانیم با آن تعامل داشته باشیم. این کلیک‌های غضب‌آلود (!) یک تجربه کاربری بسیار بد برای کاربر ایجاد می‌کند.

دلیل اول این اتفاق، تأخیر قابلیت استفاده از صفحه است.

اگر شما به امکان استفاده از سایت توجهی نداشته باشید و تمرکزتان منحصر به سرعت لود شود، این موضوع می‌تواند به وب‌سایت شما آسیب برساند.

به همین دلیل برخی از وب‌سایت‌های سریع، عملکرد بدتری نسبت به وب‌سایت‎های کند دارند. آنها خیلی زود محتوا را ارائه می‌دهند اما برای مدت طولانی غیر قابل استفاده می‌مانند و کاربر نمی‌تواند با آن تعامل داشته باشد.

در واقع کاربران این سایت‌ها، رابط کاربری آماده بصری را مشاهده و شروع به کلیک روی دکمه‌ها می‌کنند. اما دکمه‌ها کاری انجام نمی‌دهند و بازدیدکنندگان سایت با ناامیدی شروع به کلیک‌های متوالی می‌کنند. تق تق تق!

در نتیجه، فاصله کوتاه بین داشتن یک صفحه کامل بصری و یک صفحه قابل استفاده می‎تواند تجربه کاربری خوبی ایجاد کند.

زمان لود و تعامل کاربر در TTI

قبل از اینکه به چگونگی انجام این کار بپردازیم، باید یاد بدانیم چه چیزهایی باعث کند شدن TTI می‌شود.

چه عواملی باعث کندی TTI می‌شود؟

بزرگترین دلیل کندی TTI  این است که وب‌سایت‌های مدرن مقدار زیادی JavaScript  دارند. به طور خاص تسک‌های طولانیJavaScript (همه کارهایی که بیش از ۵۰ میلی ثانیه زمان می‌برند) می‏‌توانند TTI شما را به تاخیر بیندازند.

به همین دلیل است که هنگام ارائه یک صفحه، مرورگرهای مدرن برای انجام تعداد زیادی تسک به نخ اصلی (main thread) متکی هستند.

تسک‌های طولانی، زمان قابل توجهی را روی main thread صرف می‌کنند و در حالی که آنها در حال انجام هستند، مرورگرها نمی‎توانند قطع‌شان کنند.

اگر کاربر در طول یکی از این تسک‌ها روی دکمه‌ای کلیک کند، مرورگر نمی‌تواند به ورودی او پاسخ بدهد. بنابراین، با پیدا کردن و بهینه‌سازی تسک‌های طولانی، می‌توانید TTI خود را به طور قابل توجهی بهبود ببخشید. اما چطور باید تسک‌های طولانی را پیدا کنیم؟

چه عواملی باعث کندی TTI می‌شود

چگونه تسک‌های طولانی را پیدا کنیم؟

حسابرسی عملکرد Chrome Dev Tools می‌تواند اطلاعاتی را درباره تسک‌های طولانی روی main thread  به شما ارائه دهد.

به صفحه‌‏ای که قصد تجزیه و تحلیل آن را دارید بروید. روی صفحه کلیک راست کرده و با انتخاب گزینه «Inspect » روی «Performance» ​​کلیک کنید. حالا روی دکمه «Reload » کلیک کرده و منتظر بمانید تا کروم کار خود را انجام دهد.

چگونه تسک‌های طولانی را پیدا کنیم

با این کار، شما یک تحلیل دقیق از نحوه عملکرد صفحه خواهید داشت.

در بخش «Main» وظایفی را می‌بینید که با رنگ‏های مختلف رنگ‎‌آمیزی شده‌‎اند. اگر یک تسک خاکستری با یک پوشش قرمز کوچک مشاهده کردید، یعنی توانسته‌اید یکی از تسک‌های طولانی را پیدا کنید.

بخش main در chrome dev tools

وقتی روی آن حرکت کنید، خواهید دید که این زمان برای main thread چقدر طول می‌کشد. همچنین می‌توانید روی «Bottom-Up » کلیک کنید تا شرح دقیق هر کار را ببینید.

مشاهده TTI در chrome dev tools

از آن بخش می‎توانید هر فعالیتی را به شکل مجزا تجزیه و تحلیل کنید تا ببینید چه چیزی باعث تاخیر می‌شود.

همان‌طور که در حال بررسی هر فعالیت هستید، ممکن است به این نتیجه برسید که برخی عملکردهای طولانی، بیشترین تاخیر را تشکیل می‌دهند. در موارد دیگر، توابع ممکن است به سرعت اجرا شوند اما اضافه کردن تعداد زیادی از آن‌ها با هم در یک تسک واحد، منجر به یک ایجاد تسک طولانی می شود.

جدا از دلیل این اتفاق، تقسیم کردن کارهای طولانی به بهبود کلیه معیارهای تعامل، از جمله TTI کمک می‌کند. همچنین می‌توانید از چند تکنیک برای بهبود TTI استفاده کنید.

راه‌کارهایی برای بهبود TTI وب سایت شما

بهینه سازی برای معیارهای تعاملی (TTI، TBT و FID) دشوارتر از بهینه‌سازی برای معیارهای رنگ است. این موضوع بیشتر به خاطر میزان جاوا اسکریپت (JS) در این فرآیند است. در واقع اگر بخواهیم JS را بهینه‌سازی کنیم، نتایج بهتری می‌گیریم. در ادامه راه‌هایی را برای بهینه‌سازی JS بررسی می‌کنیم:

تقسیم کردن کد: این کار به وب‌سایت شما این امکان را می‌دهد تا به جای اینکه همه  JSرا همزمان روی مرورگر بارگذاری کند، فقط کدی که بازدیدکنندگان شما به آن نیاز دارند را ارسال کند.

کوچک و فشرده‌سازی: این روش‌، اندازه فایل کد را کاهش می‌دهد. استفاده از این روش به شما امکان می‌دهد تا با صرف وقت و انرژی کم، نتیجه خیلی مطلوبی دریافت کنید. حتی اگر با JS وب‌سایت خود مشکلی ندارید، باید کدتان را کوچک و فشرده کنید.

تاخیر یا حذف اسکریپت‌های شخص ثالث غیر مهم: اسکریپت‎های شخص ثالث می‌توانند از اجرای به موقع اسکریپت‌های شخصی شما جلوگیری کنند. در نظر بگیرید که کدام اسکریپت‌ها بیشترین ارزش را برای کاربر دارند و آن‌ها را اولویت‌بندی کنید. در بیشتر موارد، اسکریپت‌های تبلیغاتی و پاپ آپ اهمیت خیلی زیادی ندارند و می‌توانید آن‌ها را حذف کرده یا به تاخیر بیاندازید.

دارایی‌های مهم را پیش‌بارگیری (Preload) کنید: با پیش‌بارگیری، به مرورگر می‌گویید که کدام منابع را ابتدا پیدا کرده و بارگیری کند. این کار را می‌توانید با افزودن عنصر “link rel=”preload انجام دهید .

استفاده از وب ورکرها (Web Worker): وب ورکرها به شما امکان می‎دهند بدون تاثیر گذاشتن بر Main Thread ، اسکریپت‌ها را در پس زمینه اجرا کنید.

ارائه حداقل درخواست‌ها: اطمینان حاصل کنید که تعداد درخواست‌ها را برای برنامه مورد نظر، در کمترین حد ممکن نگه داشته‌اید. به همین ترتیب، برای سرعت بخشیدن به بارگذاری منابع کلیدی، از ایجاد زنجیره درخواست‌های مهم خودداری کنید.

استفاده از resource hintها برای ایجاد ارتباطات اولیه: برای برقراری ارتباط اولیه با سرورهای شخص ثالث و دریافت سریع‌تر منابع، از preconnect و dns-prefetch استفاده کنید .

منبع: https://nitropack.io/blog/post/time-to-interactive-tti

دیدگاه خود را ثبت کنید

آدرس ایمیل شما منتشر نخواهد شد.