آموزش و اخبار

tti چیست؟

tti

Time to Interactive (TTI) که به عنوان “زمان تعامل” شناخته می‌شود، معیاری جهت اندازه گیری میزان زمان بارگیری صفحه برای پاسخ به نیاز کاربر است. این معیار برای شناسایی صفحاتی که تعامل بالا دارند، به کار می‌رود. هر چه میزان TTI بیشتر باشد، به شما اطمینان می‌دهد که صفحه از تعامل بیشتری برخوردار است. زمانی که کاربر وارد یک صفحه می‌شود، دو حالت اتفاق می‌افتد:

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

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

یکی از خدمات سئو در مشهد رنکاپ کاهش مقدار زمان تعامل پذیری است.

اگر tti زیاد باشد چه اتفاقی می‌افتد؟

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

tti

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

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

TTI می‌تواند در موارد زیر روی سئوسایت تاثیرگذار باشد:

تجربه کاربری: هرچه TTI کمتر باشد، تجربه کاربری بهتری ارائه می‌شود. کاربران به طور معمول از صفحاتی که به سرعت بارگذاری می‌شوند و به سرعت قابل تعامل هستند، بیشتر راضی هستند. نرخ پرش (Bounce Rate) به احتمال زیاد با کاهش TTI کاهش می‌یابد.

رتبه‌بندی موتور جستجو: گوگل و سایر موتورهای جستجو به معیارهای عملکردی مانند TTI توجه می‌کنند. سایت‌هایی که تجربه کاربری بهتری ارائه می‌دهند، احتمال بیشتری دارد که در نتایج جستجو رتبه بالاتری کسب کنند.

ترافیک و نرخ تبدیل: کاهش TTI می‌تواند به افزایش ترافیک و نرخ تبدیل کمک کند. کاربران تمایل دارند بیشتر در سایت‌هایی بمانند که به سرعت بارگذاری می‌شوند و به راحتی با آنها تعامل دارند.

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

مقدار مناسب و نامناسب  tti در سئو چیست؟

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

  • TTI مناسب (کمتر از 3.8 ثانیه)

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

  • TTI نیازمند بهبود (بین 3.8 تا 7.3 ثانیه)

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

  • TTI نامناسب (بیش از 7.3 ثانیه)

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

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

زمان تعامل (TTI) یکی از معیارهای کلیدی در ارزیابی تجربه کاربری وب‌سایت است. کند شدن TTI معمولاً به دلایل مختلفی رخ می‌دهد که یکی از آن‌ها مربوط به long task‌های جاوا اسکریپت است. زمانی که جاوا اسکریپت وظایف سنگینی را بر عهده بگیرد و این وظایف به مدت طولانی اجرا شوند، می‌تواند باعث متوقف شدن UI و عدم توانایی کاربر در تعامل با صفحه شود. جاوا اسکریپت معمولاً در بخش اصلی مرورگر اجرا می‌شود. اگر یک وظیفه طولانی در حال اجرا باشد، بخش اصلی مشغول است و نمی‌تواند به سایر درخواست‌ها یا تعاملات کاربر پاسخ دهد که باعث افزایش TTI می‌شود.

چگونه عامل کندی tti را پیدا کنیم؟

برای پیدا کردن long tasks یا درخواست‌های طولانی در یک صفحه می‌توانید در مرورگر Google Chrome آدرس صفحه مورد نظر را وارد کنید. سپس با راست کلیک کردن روی صفحه به بخش inspect و سپس به performance مراجعه کنید. در این بخش ممکن است برای بار اول اطلاعاتی مشاهده نکنید.

tti چیست

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

TTI

 راهکارهای بهبود tti چیست؟

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

Minify JavaScript

Minify کردن JavaScript به معنای حذف فضاهای خالی، خط‌های غیرضروری و کامنت‌ها از کد JavaScript است که در نتیجه اندازه فایل کاهش می‌یابد. این فرآیند می‌تواند به بهبود زمان بارگذاری صفحات وب کمک کند و به همین دلیل بر TTI (Time to Interactive) و بهینه‌سازی موتورهای جستجو (SEO) تأثیر مثبت بگذارد. در ادامه مراحل مربوط به Minify کردن JavaScript و تأثیر آن بر TTI و SEO را توضیح خواهیم داد:

مراحل Minify کردن JavaScript:

استفاده از ابزارهای Minification:

ابزارهایی مانند UglifyJS، Terser، Google Closure Compiler و Babel Minify می‌توانند به شما کمک کنند تا کد JavaScript را Minify کنید.

برخی از مدیریت‌های بسته مانند Webpack و Gulp همچنین پلاگین‌هایی دارند که به طور خودکار این فرآیند را هنگام ساخت پروژه انجام می‌دهند.

ایجاد فایل Minified:

پس از Minify کردن کد، معمولاً یک نسخه جدید با پسوند .min.js ایجاد می‌شود. این فایل شامل کد بهینه‌شده برای بارگذاری سریع‌تر است.

نصب و انتشار فایل جدید:

فایل جدید را روی سرور خود قرار دهید و از آن به جای نسخه اصلی استفاده کنید.

تست و اعتبارسنجی:

پس از Minify کردن، کد باید به درستی کار کند. بنابراین قبل از انتشار نهایی، حتماً تست‌های لازم را انجام دهید.

در کنار Minify کردن، می‌توانید از فشرده‌سازی (Compression) نیز استفاده کنید. Gzip و Brotli دو فشرده‌ساز محبوب هستند که می‌توانند به کاهش بیشتر حجم فایل کمک کنند. دقت کنید که می‌توانید فایل‌های JavaScript را به صورت غیرهمزمان (async) یا Deferred بارگذاری کنید تا زمان بارگذاری صفحه بهینه‌تر شود.

Preconnect to required origins

“Preconnect to required origins” یک تکنیک بهینه‌سازی وب‌سایت است که به بهبود عملکرد بارگذاری صفحه کمک می‌کند. این تکنیک به مرورگرها این امکان را می‌دهد که سریع‌تر به دامنه‌های مختلفی که برای بارگذاری منابع (مانند تصاویر، CSS و جاوااسکریپت) مورد نیاز هستند، متصل شوند. با استفاده از دستور link rel=”preconnect” می‌توانید زمان بارگذاری و بهینه‌سازی تجربه کاربری را بهبود بخشد.

برای استفاده از این تکنیک می‌توانید کد زیر را در بخش <head> صفحه‌ی HTML وب‌سایت قرار دهید:

<link rel=”preconnect” href=”https://example.com”>

این کد به مرورگر کمک می‌کند، برای خواندن منابع از سایر دامنه‌ها از قبل آماده باشد.

Preload key requests

Preload key requests  به معنای پیش بارگذاری درخواست‌های کلیدی در فرآیند بارگذاری وب‌سایت است که می‌تواند به بهینه‌سازی عملکرد و سرعت بارگذاری صفحات وب کمک می‌کند.  یک تکنیک است که به مرورگر می‌گوید که یک منبع (مثل CSS، JavaScript یا تصاویر) باید زودتر از آنچه که به‌طور معمول بارگذاری می‌شود، بارگذاری شود. این تکنیک معمولاً با استفاده از تگ <link rel=”preload”> در HTML پیاده‌سازی می‌شود. به عنوان مثال می‌توانید قطعه کد زیر را در بخش <head> صفحه‌ی HTML وب‌سایت قرار دهید:

<link rel=”preload” href=”style.css” as=”style”>

<link rel=”preload” href=”script.js” as=”script”>

Reduce the impact of third-party code

کاهش تأثیر اسکریپت ‌های خارجی (Third-Party Code) در سئو به معنای کنترل و بهینه‌سازی استفاده از اسکریپت‌های خارجی است که می‌تواند بر سرعت بارگذاری صفحات و تجربه کاربری تأثیر بگذارد. در ادامه به چند راهکار مفید برای آن اشاره خواهیم کرد:

  • بهینه‌سازی بارگذاری: از بارگذاری اسکریپت‌هایی مانند CSS و JavaScript به صورت غیرهمزمان (asynchronous) یا به تأخیر انداختن (defer) استفاده کنید تا بارگذاری صفحه اصلی سریع‌تر انجام شود.
  • استفاده از CDN: از شبکه‌های توزیع محتوا (CDN) استفاده کنید تا منابع سریع‌تر بارگذاری شوند و زمان پاسخ‌دهی کاهش یابد.
  • محدود کردن تعداد افزونه‌ها: تعداد افزونه‌ها و اسکریپت‌های خارجی را به حداقل برسانید و فقط آن‌هایی را که واقعاً ضروری هستند، حفظ کنید.
  • فشرده‌سازی و بهینه‌سازی: اسکریپت‌ها را فشرده‌سازی و بهینه‌سازی کنید تا حجم کد کاهش یابد و سرعت بارگذاری افزایش پیدا کند.

Minimize critical request depth

“Minimize critical request depth” در سئو یکی از تکنیک‌های بهینه سازی است که با استفاده از آن می‌توان به کاهش تعداد درخواست‌ها و زنجیره‌های وابسته به یک درخواست از سمت مرورگر به سرور رسید. درخواست‌های عمیق به آن دسته از درخواست‌ها اشاره دارد که برای بارگذاری منابع مورد نیاز صفحه (مانند تصاویر، فایل‌های CSS و JavaScript) ضروری هستند و به نوعی تأخیر در بارگذاری صفحه را به همراه دارند. در واقع هر چه میزان درخواست‌ها و ابستگی میان آن‌ها کمتر باشد، صفحه سایت سریع‌تر برای کاربر لود می‌شود و نرخ TTI بهبود می‌یابد.

توضیح دقیق‌تر:

  • وقتی یک صفحه وب بارگذاری می‌شود، مرورگر نیاز دارد که فایل‌های مختلفی (مانند HTML، CSS، جاوااسکریپت و تصاویر) را دانلود و پردازش کند. برخی از این فایل‌ها برای نمایش محتوای اصلی و تعامل اولیه کاربر حیاتی هستند.
  • عمق درخواست‌های حیاتی به این معناست که برخی از منابع مانند CSS یا جاوااسکریپت ممکن است به منابع دیگری وابسته باشند و تا زمانی که این منابع بارگذاری نشوند، نمی‌توانند اجرا شوند. این وابستگی‌ها باعث طولانی شدن زنجیره درخواست‌ها می‌شود.
  • هدف این روش این است که تعداد درخواست‌ها و وابستگی‌ها به حداقل برسد تا محتوای اصلی صفحه سریع‌تر آماده نمایش و تعامل شود.

راه‌های کاهش عمق درخواست‌های حیاتی:

  1. ادغام فایل‌ها: ترکیب چند فایل CSS یا جاوااسکریپت کوچک به یک فایل بزرگتر می‌تواند تعداد درخواست‌ها را کاهش دهد.
  2. حذف یا به تعویق انداختن منابع غیرضروری: منابعی که برای نمایش اولیه ضروری نیستند را بعد از بارگذاری محتوای حیاتی صفحه بارگذاری کنید.
  3. استفاده از Preload و Preconnect: با استفاده از این تکنیک‌ها، می‌توان برخی از منابع ضروری را پیش از بارگذاری اصلی صفحه در دسترس قرار داد تا مرورگر زودتر آنها را دریافت کند.

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

Reduce JavaScript execution time

این تکنیک به معنای کاهش زمان اجرای جاوا اسکریپت در SEO است که به منظور بهینه‌سازی و سریع‌تر کردن بارگذاری و اجرای کدهای جاوا اسکریپت در وبسایت انجام می‌شود. این کار می‌تواند تأثیر مثبتی بر تجربۀ کاربری و نیز رتبه‌بندی سایت در موتورهای جستجو داشته باشد.  با پیاده سازی تکنیک هایی مانند تقسیم کد، حذف کدهای استفاده نشده، کش کردن با الگوی PRPL و کوچک کردن یا فشرده سازی فایل های جاوا اسکریپت می توانید زمان اجرای جاوا اسکریپت را کاهش دهید.

Minimize main thread work

“Minimize main thread work” به معنای به حداقل رساندن کار رشته اصلی مرورگر است. این کار باعث می‌شود مرورگر برای انجام سایر کارهای ضروری مانند بارگذاری صفحه عملکرد بهتری داشته باشد. به تصویر زیر دقت کنید:

TTI چیست

جاوا اسکریپت طولانی مدت (A,B,E در بالا) ممکن است، رشته اصلی را برای مدت طولانی مسدود کند و از اجرای سایر وظایف لازم برای اولین رنگ صفحه شما توسط مرورگر جلوگیری کند. حتی رویدادهایی مانند تجزیه HTML/CSS، اجرای جاوا اسکریپت، در میان سایر موارد، مانع از تمایل رشته اصلی به سایر وظایف یا مدیریت تعامل کاربر می‌شوند. اجرای جاوا اسکریپت معمولاً بخش عمده ای از تراکم موضوع اصلی را تشکیل می دهد. این می تواند به این دلیل باشد که سایت شما جاوا اسکریپت سنگینی دارد. به همین دلیل تکنیک Minimize main thread work باعث کاهش نرخ tti می‌شود.

Keep request counts low and transfer sizes small

“request counts low” در سئو تکنیکال به معنای کاهش تعداد درخواست‌ها  و ” transfer sizes small ” به معنای کاهش اندازه‌های انتقال داده است.

  • کاهش تعداد درخواست‌ها: هر بار که مرورگر کاربر می‌خواهد یک فایل (مانند تصویر، CSS، JavaScript و غیره) را بارگیری کند، یک درخواست به سرور ارسال می‌کند. اگر وب‌سایت شما شامل تعداد زیادی فایل باشد، تعداد بیشتری درخواست به سرور ارسال می‌شود که می‌تواند سرعت بارگذاری را کاهش دهد.
  • کاهش اندازه‌های انتقال داده: اندازه کل داده‌هایی که باید برای بارگذاری یک صفحه ارسال شوند، تأثیر زیادی بر روی زمان بارگذاری دارد. اگر اندازه فایل‌های مختلف بزرگ باشد، زمان بیشتری طول می‌کشد تا آنها بارگذاری شوند.

استفاده از web wprker

استفاده از Web Workers یکی از روش‌های مؤثر برای بهبود زمان تعامل (Time to Interactive یا TTI) در وب‌سایت‌ها و اپلیکیشن‌های وب است. انجام محاسبات سنگین در Main Thread می‌تواند به تأخیر در بارگذاری و تعامل با صفحه منجر شود. با استفاده از Web Workers می‌توان این محاسبات را در پس‌زمینه اجرا کرد، به طوری که UI اصلی روان و بدون وقفه باقی بماند.

استفاده از resource hint

استفاده از resource hint در سئو به معنای بهینه‌سازی بارگذاری منابع وب‌سایت است. Resource hints (راهنمایی‌های منابع) که شامل rel=”preload”، rel=”prefetch”، rel=”dns-prefetch” و rel=”preconnect” می‌شوند، به مرورگرها کمک می‌کنند تا منابع مورد نیاز یک صفحه وب را به شکل بهینه‌تری بارگذاری کنند. به این ترتیب، می‌توان زمان بارگذاری صفحات و تجربه کاربری را بهبود بخشید که در نهایت می‌تواند تأثیر مثبتی بر سئو وب‌سایت داشته باشد.

بهینه سازی تصاویر

بهینه‌سازی تصاویر یکی از مهم‌ترین جنبه‌های سئو تکنیکال است که می‌تواند به کاهش زمان بارگیری صفحه (TTI یا Time to Interactive) کمک کند که از راهکارهای آن می‌توان به استفاده از فرمت‌های .svg و .webp و انتخاب سایز مناسب عکس اشاره کرد.

سوالات متداول

بهترین زمان برای tti چند ثانیه است؟

بهترین زمان برای tti کمتر از 3.8 ثانیه است.

tti تحت تاثیر چه عواملی قرار می‌گیرد؟

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

  • LCP
  • CLS
  • زمان بارگذاری و اجرای جاوا اسکریپت