آموزش جی تی متریکس | قسمت ۴- TTI چیست؟

آموزش جی تی متریکس

چهارشنبه 17 دی 1399

 
 
 

زمان تعامل یا Time to Interactive چیست؟

زمان تعامل که به آن Time to Interactive یا به اختصار TTI می‌گویند، یکی از معیارهای جی‌تی‌متریکس در سنجش عملکرد سایت شماست. این معیار، میزان پاسخگویی صفحه هنگام بارگذاری را می‌سنجد و به شما کمک می‌کند صفحاتی را که به نظر می‌آید پاسخگویی مناسبی دارند اما در واقع این طور نیستند، شناسایی کنید. شاید در نگاه اول این تعریف گنگ و مبهم به نظر برسد، اما در واقع یک پروسه بسیار ساده را اندازه‌گیری می‌کند.
 

معیار TTI  در جی تی متریکس چیست؟

 TTI  مدت زمانی را که طول می‌کشد تا یک صفحه کاملا به وضعیت تعامل برسد، می‌سنجد. سوال اینجاست که منظور از وضعیت تعامل چیست؟ منظور از تعامل توانایی کاربر برای ارتباط برقرار کردن با اجزای صفحه از طریق کلیک کردن، نوشتن، انتخاب کردن و فعالیت‌های مشابه است.
برای اینکه درک بهتری از مفهوم TTI  داشته باشید، باید مختصراً شما را با چند مفهوم دیگر آشنا کنیم.
 
TTI GTmetrix
  • اولین مفهوم FCP یا اولین نمایش محتوا است که در مقالات قبل درباره آن صحبت کردیم و زمان صرف شده تا بارگذاری اولین محتوا در صفحه را نشان می‌دهد.
  • دومین مفهوم، مجموعۀ اصلی (Main Thread) است و منظور از آن بخشی است که مرورگر اکثر کارهای مرتبط با صفحه را پردازش می‌کند. این کارها می‌تواند شامل بارگذاری‌ها، فراخوانی‌ها یا مدیریت تعامل با کاربران باشد، مثل تجزیه و تحلیل HTML و CSS صفحه، ایجاد ساختارهای DOM و اجرای تمام کدهای Javascript. به زبان ساده، می‌توانید این مجموعه اصلی را مانند گارسون یک رستوران در نظر بگیرید که باید سفارش بگیرد، غذا را سر میز ببرد و پرداخت هزینه را مدیریت کند.
  • سومین مفهوم، Long Task یا عملکرد طولانی است. عملکرد طولانی یک کد جاوااسکریپت است که مجموعه اصلی را برای مدتی طولانی درگیر خود می‌کند و درنتیجه رابط کاربری را متوقف می‌سازد. اگر بخواهیم مطابق با مثال بالا پیش برویم، زمانی را فرض کنید که گارسونِ رستوان مدت زمانی طولانی درگیر سفارش گرفتن از یک مشتری است.
حال که با این مفاهیم آشنا شدید، باید تعریفمان از TTI را کامل‌تر کنیم.

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

 
 

TTI  چه چیزی را می‌سنجد؟ Bottom of Form

 
گوگل می‌گوید:

زمانی صفحه‌ای دارای تعامل است که محتوای مفید و قابل استفاده نشان دهد، اکثر عناصر صفحه هندلرها یا مجریان جاوااسکریپت داشته باشند و صفحه در کمتر از 50 میلی ثانیه، به درخواست کاربر پاسخ دهد.

 
TTI  یکی از معیارهای مرتبط با تجربه کاربری است و از آنجایی که مدت زمانِ رسیدنِ کاربر به خواسته‌اش و رسیدن به تعامل با صفحه را می‌سنجد، بسیار اهمیت دارد. اگر TTI صفحه شما کند باشد، کاربر ممکن است احساس کند صفحه مشکل دارد یا کار نمی‌کند. احتمالا برای همه پیش آمده که هنگام بارگذاری صفحه، تمام عناصر نشان داده می‌شود اما وقتی روی لینک‌ها یا دکمه‌ها کلیک می‌کنید، هیچ اتفاقی نمی‌افتد.
 
احتمالا دلیل این اتفاق اسکریپت‌های فراخوانی شده از منابع خارجی هستند که مجموعه اصلی را مسدود می‌کنند و مدت زمان TTI  را بالا می‌برند. در نهایت ممکن است کاربر از این وضعیت کلافه شود و صفحه را ترک کند. کاهش مدت زمان ‌ TTIدر عملکرد وبسایت شما به شدت تأثیر دارد، به خصوص اگر کاربر از موبایل استفاده کند که تأثیر مشکلات ناشی از TTI  در آن مشهودتر است.
 

تأثیر TTI  بر امتیاز سایت شما در جی تی متریکس

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

TTI  چگونه سنجیده می‌شود؟

TTI  بخشی از Lighthouse است و در لحظه‌‌ای سنجیده می‌شود که آخرین عملکرد طولانی اجرا و به اتمام می‌رسد. این عملکرد یا long task زمانی تعیین می‌شود که:
  1. اولین نمایش محتوا انجام شده.
  2. سی‌پی‌یو و شبکه، بدون هیچ وقفه‌ای، بیش از 5 ثانیه بیکار مانده‌اند.
این دو رویداد، به لایت‌هاوس نشان می‌دهد که محتوا کامل بارگذاری شده و مرورگر دیگر اطلاعات، اسکریپت یا درخواست‌های بیشتری را بررسی نمی‌کند. اگر سی‌پی‌یو و شبکه، قبل از تمام شدن این 5 ثانیه، مجددا به کار بیفتند، یعنی درخواست‌ها و دانلود‌های بیشتری انجام می‌شود. این اتفاق، زمان TTI  را  تا پایان یافتن long task بعدی و گذشتن 5 ثانیه زمانِ بیکاری بالا می‌برد.
 
 
زمان تعامل در جی تی متریکس
 

زمانبندیِ سنجش TTI  در لایت‌هاوس

لایت‌هاوس  بر اساس زمانبندی زیر سایت شما را می‌سنجد و به آن امتیاز می‌دهد.
  • TTI  کمتر از 2468 میلی‌ثانیه = وضعیت سایت عالی است و نیازی به بهبود وضعیت سایت ندارید.
  • TTI  بین 2468 میلی‌ثانیه و 3280 میلی‌ثانیه = وضعیت خوب است اما بهبود وضعیت را در نظر بگیرید.
  • TTI  بین 3280 میلی‌ثانیه و 4500 میلی‌ثانیه = مدت زمان از حد مناسب بیشتر است و نیاز به بهبود وضعیت دارد.
  • TTI  بیشتر از 4500 میلی‌ثانیه = مدت زمان از حد مناسب به شدت فراتر رفته و حتما به بهبود وضعیت نیاز است.

 

چطور مدت زمان تعامل سایت یا TTI  را بهبود بخشیم؟

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

۱- بهبود اجرای کدهای جاوااسکریپت

با بهبود و ویرایش کدهای جاوااسکریپت، می‌توانید آنچه را که مجموعه اصلی یا main-thread را متوقف می‌کند و به تأخیر می‌اندازد شناسایی و اصلاح کنید تا پاسخگوییِ سریع‌تری به درخواست کاربر داشته باشید. برای این کار می‌توانید:
  1. زمان اجرای جاوااسکریپت را کوتاه کنید.
  2. حجم عملکرد و کارهای مجموعه اصلی صفحه را کاهش دهید.
  3. جاوااسکریپت‌هایی را که استفاده نمی‌شوند حذف کنید.
  4. تأثیر کدهایی که از منابع خارجی فراخوانی می‌شوند را کاهش دهید.
  5. فایل‌های جاوااسکریپتی بزرگ را با نمونۀ سبک‌تری جایگزین کنید.

۲- بهبود و به حداقل رساندن درخواست‌ها

  • مطمئن شوید که درخواست‌ها را تا جایی که می‌توانید کم می‌کنید.
  • درخواست‌های مهم را به هم متصل نکنید تا سرعت بارگذاری منابع اصلی و مهم بالا رود.

۳- کانکشن سریع‌تر بسازید

از پری‌کانکت (preconnect) و فراخوانی زودهنگام DNS استفاده کنید تا تأثیر تاخیرات ناشی از عناصری را که از منابع خارجی فراخوانی می‌شوند، به حداقل برسانید. در این مورد، فراخوانی زودهنگام عناصر اصلی و کلیدی صفحه هم می‌تواند به شما کمک کند و باعث شود که کاربر در مدت زمان کوتاه‌تری به سایت دسترسی داشته باشد.

 

در این قسمت از ویدیوی آموزشی جی تی متریکس به بررسی اعداد مربوط به TTI در سایت‌هایی مثل کاربوم و کاربانک پرداخته شده است. برای مشاهده تجزیه و تحلیل عملکرد سایت‌های ذکر شده به ویدیوی قسمت ۴ آموزش جی تی متریکس سئولب مراجعه کنید.
 
 

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

 

 

نحوه اندازه گیری TTI چگونه است؟

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

TTI مدت زمانی را که یک صفحه طول می‌کشد تا کاملاً تعاملی شود را اندازه گیری می‌کند. یک صفحه زمانی کاملاً تعاملی در نظر گرفته می‌شود که شرایط زیر را داشته باشد:

  1. صفحه محتوای مفید را نشان می‌دهد که با اولین رنگ محتوا اندازه گیری می‌شود.
  2. کنترل کننده‌های رویداد (Event Handlers) برای بیشتر عناصر قابل مشاهده در صفحه ثبت می‌شوند.
  3. صفحه به تعاملات کاربران در عرض 50 میلی‌ثانیه پاسخ می‌دهد.

 

نکته: هر دوی First CPU Idle و TTI آمادگی صفحه برای ورود کاربر را اندازه گیری می‌کنند. First CPU Idle زمانی رخ می‌دهد که کاربر بتواند شروع به تعامل با صفحه کند. TTI زمانی رخ می‌دهد که کاربر به طور کامل قادر به تعامل با صفحه باشد.

 

چه عواملی بر TTI تأثیر می‌گذارند؟

چهار عامل به نمره بد TTI کمک می‌کنند که عبارتند از:

  • کد جاوا اسکریپت و JS استفاده نشده
  • زمان اجرای جاوا اسکریپت
  • کار Main Thread
  • کد شخص ثالث (Third-Party Code)

حل همۀ این عوامل به طرز چشمگیری TTI و تجربه کاربری شما را بهبود می‌بخشد. برای این مهم توصیه‌های زیر را در نظر بگیرید:

  • منابع مسدود کننده رندر حذف کنید.
  • کار Main Thread را به حداقل برسانید.
  • زمان اجرای جاوا اسکریپت کاهش دهید.
  • JS بلااستفاده را حذف کنید.
  • تأثیر کد شخص ثالث را کاهش دهید.
  • از زنجیره کردن درخواست های ضروری (Chaining Critical Requests) خودداری کنید.
  • درخواست‌های کلیدی پیش بارگذاری کنید.
  • تعداد درخواست‌ها را کم نگه دارید و اندازه‌ها کوچک منتقل کنید.
  • زمان پاسخگویی سرور را کاهش دهید.

 

چگونه می‌توان TTI را برای عملکرد بهتر UX و SEO بهینه کرد؟

مدت زمان تعامل، زمانی تعیین می‌شود که محتوای اصلی وبسایت بارگیری شده و کاربر بتواند بدون مانع با مابقی نمایش صفحه ارتباط برقرار کند. در این زمینه، مدت زمان تعامل یک معیار کاربر محور است و همچنین مستقیماً با درصد اضافه بار Main Thread ارتباط دارد. 

به دلیل این وضعیت، یک سئو جامع یا یک توسعه دهنده باید فعالیت  Main Thread را در طول فرآیند بارگذاری صفحه بخواند. برای انجام تجزیه و تحلیل Main Thread مرورگر، می‌توانید از برگه عملکرد Chrome Web Tools استفاده کنید:

 

برای بهبود TTI، بارگیری Main Thread و همچنین عدم کارکرد CPU پس از زمان بارگیری محتوای اصلی مهم هستند. در مثال ما، پس از اولین عنصر محتوایی (FCP) و بزرگ‌ترین عنصر محتوایی (LCP)، یک مسدود کننده تعاملی واحد Long Task وجود دارد. 

در چنین شرایطی، سئو جامع (Holistic SEO) یا توسعه دهنده باید بلوک کد خاصی که باعث این وضعیت می‌شود را تشخیص دهد و آن را بهینه کند. برای بهبود زمان تعامل، چندین روش وجود دارند که برای سایر معیارهای سرعت صفحه مفید هستند که در ادامه توضیح خواهیم داد.

 

ارتباط Quiet Window با TTI چیست؟

اصطلاح Quiet Window به طور مستقیم به زمان تعامل مربوط می‌شود. این مهم زمان مسدود کردن CPU را پس از اولین عنصر محتوایی اندازه گیری می‌کند. اگر بعد از اولین عنصر محتواییی به مدت پنج ثانیه Long Task  وجود نداشته باشد، این بدان معناست که کاربر می‌تواند محتوا را مشاهده کرده و به طور مداوم پس از بارگیری محتوای اصلی با آن ارتباط برقرار کند.

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

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

 

ارتباط تعامل پذیری سازگار و TTI چیست؟

برای درک علم Pagespeed، دانستن اصطلاحات مربوط به معیارهای مختلف سرعت صفحه مهم هستند. در این زمینه، تعامل پذیری سازگار یا تعامل پذیری مداوم به این معناست که صفحه وب برای مدت طولانی بدون هیچ گونه وقفه تعاملی است. 

تعامل پذیری سازگار و Quiet Window  اصطلاحات مرتبط با یکدیگر از نظر زمان اندازه گیری تعاملی هستند. معیارهای عملکرد کاربر محور به طور مستقیم با تجربه کاربران در طول فرآیند بارگذاری صفحه وب مرتبط هستند، پاسخگویی به طور مستقیم با تعامل کاربران با روند بارگذاری صفحه ارتباط دارد.

 

Javascript Assets را برای بهبود TTI بهینه کنید

دلایل متعددی وجود دارند که جاوا اسکریپت یکی از مهم‌ترین عناصر برای مدت زمان تعامل پذیری است. اول، فایل‌های جاوا اسکریپت تجزیه کننده هستند و همچنین Main Thread در مرورگر به دلیل انجام کارهای طولانی جاوا اسکریپت مسدود می‌شود. برای جلوگیری از این وضعیت، بهینه سازی javascript Assets  مهم است.

روش‌های بهینه سازی جاوا اسکریپت

  • مهم‌ترین Javascript Assets را پیش بارگذاری کنید.
  • از Caching برای فایل‌های مهم جاوا اسکریپت استفاده کنید.
  • از کد CSS  استفاده کنید و بارهای جاوا اسکریپت را برای Main Thread کاهش دهید.
  • برای کاهش حجم فایل جاوا اسکریپت از ECMAScript 6  استفاده کنید.
  • کدهای استفاده نشده و مرده را از فایل‌های جاوا اسکریپت حذف کنید.
  • با حذف نظرات و فاصله‌ها، فایل‌های جاوا اسکریپت را کوچک و فشرده کنید.
  • از زنجیره‌های متغیر بلند (Long Variable Chains) و از محدوده جهانی به جای محدوده محلی استفاده نکنید.
  • اندازه و تعداد جاوا اسکریپت‌های Third-Party را کاهش دهید.
  • زمان اجرای جاوا اسکریپت را با ساختار کد بهتر کاهش دهید.
  • با توجه به وضعیت Main Thread از defer و async استفاده کنید.
  • جاوا اسکریپت را Inline کنید و مراقب باشید که هر یک از کدهای جاوا اسکریپت Inline بیش از 1500 نویسه نباشند.
  • از بسته‌های جاوا اسکریپت استفاده کنید اما مراقب اندازه کلی فایل‌های جاوا اسکریپت باشید تا از اندازه لازم بزرگ‌تر نشوند.

 

بهینه سازی فایل‌ها و تصاویر CSS برای بهبود TTI انجام دهید

برای بهبود معیار عملکرد مدت زمان تعاملی، فایل‌های CSS و همچنین تصاویر مهم هستند. برای بهبود زمان بندی کاملاً تعاملی، بهینه سازی فایل‌های CSS و تصاویر مهم هستند تا اولین CPU Idle، بزرگ‌ترین عنصر محتوا و طبیعتاً TTI زودتر اتفاق بیفتند. 

شما می‌توانید از روش‌های زیر برای بهینه سازی فایل‌های تصویر و CSS در زمینه بهبود زمان تعامل پذیری استفاده کنید:

  • کدهای استفاده نشده و مرده را از CSS Files پاک کنید.
  • چندین شناسه را از CSS Files پاک کنید.
  • برای کاهش تعداد درخواست‌ها، فایل‌های CSS را یکی کنید.
  • برای ایجاد ارتباط بصری سریع‌تر با کاربر، کدهای CSS حیاتی را وارد کنید.
  • مهم‌ترین فایل‌های CSS را پیش بارگیری کنید.
  • برخی از فایل‌های CSS را به صورت غیر همزمان بارگیری کنید تا منابع مسدود کننده رندر حذف شوند.
  • برای جلوگیری از Bloating فایل‌های CSS از کدهای رنگی کمتری استفاده کنید.
  • برای جلوگیری از Bloating، فایل‌های CSS را تغییر شکل دهید.
  • برای بهینه سازی فایل‌های تصویری از نظر بهبود مدت زمان تعامل، می‌توانید از روش‌های زیر استفاده کنید:
  • از فرمت‌های تصویر کارآمدتر و پسوندهای متداول استفاده کنید.
  • پیکسل‌های غیرضروری تصویر را حذف کنید تا اندازه تصویر کاهش یابد.
  • سعی کنید از تصاویر خطی مانند Base64 یا SVG استفاده کنید.
  • برای کاهش حجم فایل‌های تصویری، فراداده تصویر را حذف کنید.
  • سعی کنید از CDN برای ارسال سریع‌تر تصاویر بدون بارگذاری سرور وبسایت واقعی استفاده کنید.
  • سعی کنید بهترین الگوریتم بهینه سازی تصویر را برای UX و همچنین عملکرد صفحه وب استفاده کنید.

 

چرا TTI برای تجربه کاربر و سئو اهمیت دارد؟

اگر کاربر نتواند با صفحه وب ارتباط برقرار کند، تجربه کاربری منفی خواهد بود. مدت زمان تعامل پذیری، برای ایجاد تأثیر قابل اعتماد بر کاربران مهم است. اگر یک تجربه کاربری بدی وجود داشته باشد، سئو نیز از این وضعیت آسیب می‌بیند. به همین دلیل است که یک برنامه نویس، بازاریاب یا سئو کار باید به این نکته توجه کند. 

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

 

کلام آخر

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

 

 
قسمت بعد SI چیست :
 
آموزش جی تی متریکس | قسمت ۵ - شاخص سرعت (SI) چیست؟

 

 
 

 

 

تیم تحریریه سئولب

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

مقالات مرتبط

نظرات کاربران

نظر تازه ای ثبت کنید

در حالتی که وارد سایت شده باشید درج کامنت منجر به کسب امتیاز در کلاب می شود