TTI چیست ؟ آشنایی کامل با time to interactive

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

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

در این مقاله به سؤالاتی جامع در مورد آن پرداخته‌شده. اعم از دلیل افزایش تایم tti چیست و یا راه‌های کاهش tti چیست.

اگر اشاره کوچکی بخواهیم به آن داشته باشیم می‌شود مرحله‌ای است که ،از زمان fcp یا همان first contentful page تا زمان قابل تعامل بودن ایلمان و آیتم‌های درون site را TTI می‌گویند.

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

بیشتر بخوانید: چرا باید اصول سئو را یاد بگیریم ؟

پادکست :

tti چیست؟

دلیل افزایش تایم tti چیست؟

تاثیرات tti بر روی سئو

منظور از بهینه سازی تی تی ای چیست؟

شروع بهینه سازی تی تی ای

ادامه مراحل بهینه سازی تی تی ای چیست ؟

معیار های متریک دیگر در کنار tti چیست؟

time to interactive را جدی بگیرید!

TTI چیست ؟ یک معیار مهم اندازه‌گیری GTmetrix

جی تی متریکس یک ابزار جهانی است که با سرمایه‌گذاری دو شرکت بزرگ یاهو و گوگل ساخته شد. این ابزار با معیارهای جهانی که برای لود سایت در نظر گرفته شد ، SITE موردنظر را ، از تمام عوامل مورد برسی قرار می‌دهد.

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

بیشتر وبمستران و متخصصان سئو ، همواره با اطلاعاتی که از Gtmetrix می‌گیرند ، در تلاش هستند که مشکلات SITE خود را برطرف کنند و افزایش لود سایت و بارگذاری خوبی برای کاربران ایجاد کنند. اما جی تی متریکس با اف سی پی چیست؟

یکی از همین معیارهای جی تی متریکس ، TTI نام دارد. این معیار مخفف time to interactive است.

Tti که مخفف واژه time to interactive است به معنی مدت‌زمانی است که site مورد نظر ما قابل تعامل با آیتم‌های آن برای کاربر فراهم‌شده باشد. این معیار پس از با گذاری صفحه موردنظر ، زمانی که صفحه موردنظر باشد برای کاربر از زمانی که برای او نمایش دادن آن شروع‌شده تا زمانی که آیتم‌های آن قابل‌اجرا شود را اندازه‌گیری می‌کند و به کاربر موردنظر ، نسبت به چیزی که سرچ کرده ، سایت هایی با امتیاز بالاتر را نمایش می دهد.

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

سؤال بسیار مهمی که پیش می‌آید این است که زمان تعامل در tti چیست ؟ بگذارید کمی تخصصی‌تر به مفهوم کلی اینکه tti چیست و چگونه سنجش معیار می‌کند را موردبررسی قرار دهیم.

اولین مفهوم موردنظر FCP است که باید با آن آشنا شوید که در مقاله قبلی در مورد آن صحبت کرده‌ایم. این معیار جی تی متریکس که مخفف first vontentful page است ، بیانگر زمانی است که اولین محتوا و آیتم‌های در صفحه مرورگر ، به کاربر نشان داده‌شده است.

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

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

معیار time to interactive همواره برحسب زمان است و مقادیر و استانداردهای متغیری دارد که در قسمت زیر به تمام زمان‌هایی که از سمت جی تی متریکس تعیین‌شده خواهیم پرداخت.

کمتر از ۲.۵ ثانیه : خوب

بین ۲.۵ تا ۳.۲ ثانیه : قابل‌قبول، اما نیازمند بهینه‌سازی

بین ۳.۳ تا ۴.۵ ثانیه : کمی طولانی‌تر از حد استاندارد

بیشتر از ۴.۵ ثانیه : خیلی طولانی‌تر از حد استاندارد

در نظر داشته باشید که این معیارها را سایت جی تی متریکس بر استانداردهای جهانی و بالا ارائه و پیشنهاد داده که بهتر از تا حد ممکن از تمام آن زمان‌های اعلام‌شده پیروی کرد.

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

امتیازی و درصدی که مولا time to interactive برای پرفورمنس در نظر گرفته ، بین 10 تا 15 درصد از آن است که بسیار حائز اهمیت است.

دلیل افزایش تایم tti چیست ؟

همان‌طور که در قسمت قبل خواندید ، معیار tti ، همواره نشان‌دهنده یکی از مراحل لود و اندازه‌گیری بسیار مهمی است که باید به دنبال رفع آن باشید. اما دلیل افزایش تایم tti چیست. یعنی قبل از بهینه‌ سازی تی تی ای باید بدانیم اصلاً دلیل افزایش تایم آن چیست و تأثیر آن بر روی مواردی چون سئو و UI و UX چیست؟

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

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

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

اما حرف از main thread شد که میاز میدانیم از آن‌هم مقداری به شما بگوییم. این مفهوم بخشی است که مرورگر کاربران فعالیت‌ها و پردازش‌های مربوطه را انجام می‌دهد. این کارها می‌تواند شامل بارگذاری‌ها، فراخوانی‌ها یا مدیریت تعامل با کاربران باشد ، این فعالیت می‌تواند ، پردازش کدهای بک‌اند html و css باشد یا تجزیه تحلیل کدهای dom در javascrip .

این پروسه مانند این است که شما یک فروشنده لباس هستید و باید لباس دریافت کنید ، آن را برای مشتری بسته‌بندی کنید و هزینه موردنظر را دریافت و آن را مدیریت کنید.

بیشتر بخوانید: افزایش سرعت سایت ، رعایت این اصول برابر با افزایش لود سایت

تاثیرات tti بر روی سئو چیست؟

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

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

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

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

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

منظور از بهینه‌ سازی تی تی ای چیست ؟

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

در نظر داشته باشید که بهینه‌ سازی تی تی ای به‌تنهایی تأثیری در کاهش تایم لود site ندارد و بایستی تمام معیارهای متریکی لود سایت را بلد و آشنا باشید و هرکدام را به روش مخصوص خود بهینه کنید. تا درمجموع یک امتیاز performance خوب و افزایش سرعت لود site خوبی را تجربه کنید.

اما چون این مقاله به مبحث tti چیست اختصاص دارد و بیشتر محتوای آن باید در راستای آشنایی بیشتر با آن باشد ، در قسمت بعد مواردی را برای بهینه‌ سازی تی تی ای برای شما آماده کرده‌ایم.

شروع بهینه‌سازی تی تی ای

برای اینکه رفتار مناسبی بعد از سنجیدن سرعت لود سایت در جی تی متریکس ، با دیدن بالا بودن تایم tti داشته باشیم ، مواردی را در قسمت زیر برای شما آماده کرده‌ایم که با حل مشکلات و بهینه کردن آن‌ها ، به طرز چشم‌گیری کاهش تایم time to interactive خواهید داشت.

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

هم‌زمان روی UX سایت و بک‌اند های مربوطه به آن کارکنید و بهینه‌سازی کنید.

ادامه مراحل بهینه‌سازی TTI چیست ؟

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

برای تجزیه تحلیل بهتر این موضوع و رصد تمام موادی چون long task های مربوطه و … را در ابزار chrome web tools بازکنید و آن را مشاهده کنید.

در آن شما می‌توانید تمام وظایف و کار هایی که بعد از fcp صورت گرفته و باید تا tti صورت بگیرد را ببینید ، مثلاً می‌بیند که cpu پس از دریافت اطلاعات معیار اولیه فعالیت کمتری دارد و یا فعالیت بیش‌ازاندازه دارد.

در ادامه بخش هایی را بهینه‌سازی کدهای جاوا اسکریپت و html و css خواهیم پرداخت که هرکدام مجزا هستند و درصدد رسیدن بهینه‌ سازی تی تی ای بهترین شکل هستند.

روش‌های بهینه‌سازی جاوا اسکریپت در tti چیست ؟

مهم‌ترین Javascript Assets را پیش بارگذاری کنید.
از کدCSS استفاده کنید و بارهای جاوا اسکریپت را برای Main Thread کاهش دهید.
از Caching برای فایل‌های مهم جاوا اسکریپت استفاده کنید.

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

با توجه به وضعیت Main Thread از defer و async استفاده کنید.

روش‌های بهینه‌سازی css در tti چیست ؟

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

کدهای استفاده‌نشده و مرده را از CSS Files پاک‌کنید.

چندین شناسه را از CSS Files پاک‌کنید.

برای کاهش تعداد درخواست‌ها، فایل‌های CSS را یکی کنید.

برای ایجاد ارتباط بصری سریع‌تر با کاربر، کدهای CSS حیاتی را وارد کنید.

مهم‌ترین فایل‌های CSS را پیش بارگیری کنید.

برخی از فایل‌های CSS را به‌صورت غیر هم‌زمان بارگیری کنید تا منابع مسدودکننده بندر حذف شوند.

برای جلوگیری از Bloating فایل‌های CSS از کدهای رنگی کمتری استفاده کنید.

برای جلوگیری از Bloating، فایل‌های CSS را تغییر شکل دهید.

سعی کنید از تصاویر خطی مانند Base64 یا SVG استفاده کنید.

پیکسل‌های غیرضروری تصویر را حذف کنید تا اندازه تصویر کاهش یابد.

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

سعی کنید از CDN برای ارسال سریع‌تر تصاویر بدون بارگذاری سرور وب‌سایت واقعی استفاده کنید.

برای کاهش حجم فایل‌های تصویری، فراداده تصویر را حذف کنید.

از فرمت‌های تصویر کارآمدتر و پسوندهای متداول استفاده کنید.

سعی کنید بهترین الگوریتم بهینه‌سازی تصویر را برای UX و همچنین عملکرد صفحه وب استفاده کنید.

بیشتر بخوانید: چگونه سئو یاد بگیریم؟ سئو چیست و چگونه آن را یاد بگیریم؟

معیارهای دیگر در کنار time to interactive چیست؟

1. Speed Index : SI
2. first contentful paint : FCP
3. Largest Contentful Paint : LCP
4. Time to Interactive : TTI
5. Total Blocking Time : TBT
6. Cumulative Layout Shift : CLS
البته این را در نظر داشته باشید که معیارهای دیگری ممکن است وجود داشته باشد که در این مقاله گنجایش گفتن آن نیست و می‌توانید درباره آن‌ها به‌طور کامل در مقالات دیگِ پویا وب مطالعه کنید.
مورد اول Speed Index و SI : به شاخص سرعت بارگذاری یک سایت اشاره دارد. سرعت بارگذاری و لود اطلاعات در هر سایتی را نسبت به آیتم‌های موجود در آن را با این معیار نشان می‌دهند.
مورد دوم first contentful paint و fcp : همان موضوع این مقاله است ، یعنی اف سی پی چیست؟ اینجا یکی از ریز معیارها ملزم به گفتن است. قبل از خود FCP معیاری به نام FP وجود دارد که قبلاً معیار اندازه‌گیری با آن بوده و آلان دیگر جواب‌گو نیست. برای همین از معیار first contentful paint استفاده می‌شود. این معیار به معنی اولین محتوای لود شده که می‌تواند نوشته‌ها ، عکس‌ها و آیتم‌های موجود دیگر در اول صفحه باشد ، است.

مورد سوم Largest Contentful Paint و LCP : به معیاری گفته می‌شود که آیتم‌های موجود در صفحه کاملاً بارگذاری شده است و برای کاربر قابل‌درک و رؤیت است. این معیار از سال 2020 برای تجربه کاربری بهتر کاربران در لایت هاوس (lighthouse) ایجاد و تائید شده.

مورد چهارم Time to Interactive و TTI : که به میزان و معیاری گفته می‌شود یک site قابلیت تعامل با کاربر را دارد و مرورگر ما نیز قابل انجام دستورات مربوطه را داشته باشد.

مورد پنجم Total Blocking Time و TBT : به‌طورکلی زمان بین دو معیار FCP و TTI را اندازه‌گیری می‌کند. این مقدار ، به زمانی گفته می‌شود که کاربر کلاً هیچ دسترسی و قابلیت کار کردن با آیتم‌های درون سایت ، از لحظه ظاهر شدن تا بندر شدن کامل را ندارد.

مورد ششم Cumulative Layout Shift و CLS : به معیار و امتیاز عملکردی گفته می‌شود که از ثبات بصری در حین رندر های آخر وب site درخواست شده ، توسط مرورگر است. این معیار و متریک اندازه‌گیری ، جابجایی‌های غیرمنتظره و یهویی عناصر و المان‌های موجود در سایت را اندازه‌گیری می‌کند و به آن امتیاز می‌دهد.

معیارهای حائز اهمیت و نکات مهمی در جهت آشنایی کامل با gtmetrix وجود دارد ، که برای سئو کردن یک site بسیار مهم است.

در نظر داشته باشید که تمام معیارهای بالا برحسب زمان و کیفیت در آن مربوط است که بایستی طبق تمامی این الگوها ، طراحی و سئو site صورت بگیرد.

Time to interactive را جدی بگیرید!

حتماً در حوزه که در آن وب سایت دارید و یا یک متخصص سئو و طراح سایت هستید ، مسائلی که در بالا گفته شد را همواره بسنجید و آن‌ها را بهینه کنید که در، هم افزایش لود site و هم رشد رتبه سئو ، تجربه بی‌نظیری را کسب کنید.

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

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

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

از همراهی شما تا انتهای این مقاله بسیار سپاس گذاریم.

تماس با پویا وب

دیدگاه ها بسته شده است

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