TBT چیست و چه کاربردی دارد؟ راهنمای کامل بهینه‌سازی Total Blocking Time برای رتبه‌بندی بهتر در گوگل

TBT چیست؟ تعریف ساده Total Blocking Time

TBT مخفف عبارت Total Blocking Time به معنای «کل زمان مسدود شدن» است. به زبان خیلی ساده، TBT مدت زمانی را اندازه‌گیری می‌کند که مرورگر به دلیل مشغول بودن با پردازش‌های سنگین، نمی‌تواند به تعاملات کاربر (مثل کلیک ماوس، لمس صفحه یا فشار دکمه‌های کیبورد) پاسخ دهد.

تصور کنید وارد یک فروشگاه آنلاین می‌شوید، صفحه به ظاهر لود شده و محصولات را می‌بینید. روی دکمه «افزودن به سبد خرید» کلیک می‌کنید، اما هیچ اتفاقی نمی‌افتد! چند ثانیه صبر می‌کنید، دوباره کلیک می‌کنید و باز هم پاسخی نمی‌گیرید. این دقیقاً همان چیزی است که TBT اندازه می‌گیرد؛ آن زمانی که سایت ظاهراً آماده است اما در واقعیت قابل تعامل نیست.

به بیان فنی‌تر، TBT مجموع تمام زمان‌هایی است که بین دو معیار FCP (First Contentful Paint) و TTI (Time to Interactive)، رشته اصلی مرورگر (Main Thread) مسدود شده و نمی‌تواند به کاربر پاسخ دهد. اگر در این مرحله احساس می‌کنید سایت شما به کمک تخصصی نیاز دارد، می‌توانید از خدمات افزایش سرعت سایت برای تحلیل دقیق و رفع مشکلات استفاده کنید.

چرا TBT مهم است؟ اهمیت این معیار در سئو و تجربه کاربری

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

۱. تاثیر TBT بر تجربه کاربری

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

۲. تاثیر TBT بر سئو و رتبه‌بندی گوگل

گوگل در سال‌های اخیر به شدت روی تجربه کاربری تمرکز کرده است. اگرچه TBT به‌طور مستقیم جزو Core Web Vitals نیست، اما ارتباط تنگاتنگی با معیار INP (Interaction to Next Paint) و FID (First Input Delay) دارد که این دو جزو فاکتورهای رسمی رتبه‌بندی گوگل هستند. علاوه بر این، TBT در ابزار Lighthouse وزنی ۳۰ درصدی در امتیاز Performance دارد که عدد قابل توجهی است.

نکته مهم: بهینه‌سازی TBT به‌طور خودکار باعث بهبود FID و INP نیز می‌شود، بنابراین با یک تیر دو نشان می‌زنید!

مفاهیم پایه‌ای که برای درک TBT باید بدانید

قبل از اینکه عمیق‌تر وارد بحث شویم، بیایید چند مفهوم کلیدی را با هم مرور کنیم:

Main Thread یا رشته اصلی چیست؟

Main Thread همان قسمت اصلی مرورگر است که مسئولیت پردازش و اجرای تقریباً تمام وظایف هنگام بارگذاری یک صفحه را بر عهده دارد. از جمله:

• تجزیه فایل‌های HTML و تبدیل آن به DOM
• پردازش فایل‌های CSS و تعیین استایل عناصر
• اجرای کدهای جاوا اسکریپت
• ساخت Layout Tree
• پاسخگویی به تعاملات کاربر مثل کلیک و اسکرول

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

Long Task یا تسک طولانی چیست؟

به هر وظیفه‌ای که اجرای آن توسط Main Thread بیش از ۵۰ میلی‌ثانیه طول بکشد، Long Task یا تسک طولانی گفته می‌شود. مشکل اصلی این است که مرورگر نمی‌تواند یک تسک در حال اجرا را متوقف کند، پس تا پایان آن، هیچ درخواست دیگری از کاربر پاسخ داده نمی‌شود.

FCP و TTI چه هستند؟

• FCP (First Contentful Paint): زمانی که اولین عنصر محتوایی (متن یا تصویر) روی صفحه نمایش داده می‌شود.
• TTI (Time to Interactive): زمانی که صفحه کاملاً قابل تعامل می‌شود و به تمام ورودی‌های کاربر در کمتر از ۵۰ میلی‌ثانیه پاسخ می‌دهد.

TBT دقیقاً زمان بین این دو نقطه را اندازه‌گیری می‌کند؛ یعنی زمانی که محتوا را می‌بینید اما نمی‌توانید با آن تعامل داشته باشید.

گوگل چگونه TBT را محاسبه می‌کند؟ یک مثال عملی

برای درک بهتر نحوه محاسبه TBT، بیایید یک مثال واقعی را بررسی کنیم. فرض کنید در صفحه شما ۴ تسک مختلف روی Main Thread اجرا می‌شوند:

همان‌طور که می‌بینید، تنها زمانی که بیشتر از ۵۰ میلی‌ثانیه است به‌عنوان زمان بلاک محاسبه می‌شود. در نهایت با جمع کردن این اعداد، مقدار نهایی TBT به دست می‌آید که در این مثال ۲۷۰ میلی‌ثانیه است.

بهترین مقدار TBT چقدر است؟ محدوده‌های استاندارد

گوگل براساس بررسی هزاران سایت برتر، محدوده‌های استانداردی را برای TBT تعیین کرده است. نکته جالب این است که این آستانه‌ها در طول زمان تغییر کرده‌اند و در نسخه‌های جدیدتر Lighthouse (از نسخه ۸.۰ به بعد) سخت‌گیرانه‌تر شده‌اند.

محدوده‌های امتیازدهی TBT طبق استاندارد Lighthouse:

• سبز (خوب): بین ۰ تا ۲۰۰ میلی‌ثانیه – عملکرد عالی، نیازی به اقدام خاصی نیست.
• نارنجی (نیاز به بهبود): بین ۲۰۰ تا ۶۰۰ میلی‌ثانیه – وضعیت متوسط، باید برنامه‌ریزی برای بهبود انجام دهید.
• قرمز (ضعیف): بالای ۶۰۰ میلی‌ثانیه – وضعیت بحرانی، باید فوراً اقدام کنید.

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

تفاوت TBT با TTI و سایر معیارها

یکی از سوالاتی که زیاد پرسیده می‌شود این است که TBT با TTI چه فرقی دارد؟ در نگاه اول این دو شبیه به نظر می‌رسند، اما تفاوت‌های مهمی دارند:

بهترین ابزارهای اندازه‌گیری TBT

برای اندازه‌گیری دقیق TBT، ابزارهای متنوعی وجود دارد که هر کدام ویژگی‌های خاص خود را دارند. در ادامه مهم‌ترین آنها را معرفی می‌کنم:

۱. Google PageSpeed Insights

معتبرترین و پرکاربردترین ابزار که توسط خود گوگل ارائه شده است. کافی است آدرس سایت خود را وارد کنید تا گزارش کاملی از عملکرد سایت در موبایل و دسکتاپ دریافت کنید.

۲. Google Lighthouse

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

۳. Chrome DevTools

ابزار توسعه‌دهندگان کروم که با فشار دادن F12 یا کلیک راست و انتخاب Inspect قابل دسترسی است. برای تحلیل دقیق تسک‌های طولانی عالی است.

۴. GTmetrix

یکی از محبوب‌ترین ابزارهای تست سرعت که اطلاعات دقیق و بصری از عملکرد سایت ارائه می‌دهد.

۵. WebPageTest

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

چطور تسک‌های مشکل‌ساز را شناسایی کنیم؟

برای پیدا کردن تسک‌هایی که باعث افزایش TBT می‌شوند، دو روش کاربردی وجود دارد:

روش اول: استفاده از Performance Panel در Chrome DevTools

1. وارد صفحه مورد نظر در مرورگر Chrome شوید.
2. روی صفحه کلیک راست کرده و گزینه Inspect را انتخاب کنید.
3. به تب Performance بروید.
4. روی دکمه Reload کلیک کنید و منتظر بمانید.
5. در بخش Main، به دنبال تسک‌های خاکستری با پرچم قرمز بگردید.
6. با نگه داشتن موس روی هر تسک، مدت زمان دقیق آن را مشاهده کنید.
7. برای جزئیات بیشتر، روی Bottom-Up کلیک کنید.

روش دوم: استفاده از Lighthouse Audit

1. در صفحه کلیک راست کرده و Inspect را بزنید.
2. به تب Lighthouse بروید.
3. دسته‌های مورد نظر (Performance و…) را انتخاب کنید.
4. روی Generate report کلیک کنید.
5. در بخش Diagnostics پیشنهادات بهبود را بررسی کنید.

مهم‌ترین عوامل افزایش TBT در سایت‌ها

قبل از اینکه به سراغ راهکارها برویم، باید بدانیم چه چیزهایی باعث بالا رفتن TBT می‌شوند:

• کدهای جاوا اسکریپت سنگین و نامرتب: اصلی‌ترین دلیل افزایش TBT در اکثر سایت‌ها
• استفاده بیش از حد از اسکریپت‌های Third-Party: ابزارهای تحلیل، چت آنلاین، تبلیغات و…
• فایل‌های CSS حجیم و غیربهینه: به‌خصوص در سایت‌های وردپرسی با افزونه‌های زیاد
• ساختار DOM پیچیده و بزرگ: المان‌های تو در توی زیاد
• تصاویر بزرگ و بهینه‌نشده
• کتابخانه‌ها و فریم‌ورک‌های سنگین که فقط از بخش کوچکی از آن‌ها استفاده می‌شود
• کدهای بلااستفاده (Dead Code) که همچنان بارگذاری می‌شوند

راهکارهای عملی و موثر برای کاهش TBT

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

۱. کاهش و بهینه‌سازی کدهای Third-Party

کدهای شخص ثالث مثل گوگل آنالیتیکس، پیکسل فیسبوک، چت آنلاین و… می‌توانند تاثیر قابل توجهی روی TBT داشته باشند. برای مدیریت بهتر این کدها:

• فقط از ابزارهایی استفاده کنید که واقعاً به آن‌ها نیاز دارید
• بارگذاری این کدها را با async یا defer به تاخیر بیندازید
• در صورت امکان، این کدها را روی سرور خودتان میزبانی کنید
• از تکنیک Preconnect یا Prefetch برای مدیریت بهتر استفاده کنید

۲. تقسیم کدها (Code Splitting)

به جای بارگذاری یک فایل جاوا اسکریپت بزرگ، آن را به چند بخش کوچک‌تر تقسیم کنید. این کار باعث می‌شود مرورگر بتواند بین اجرای این بخش‌ها، به کاربر پاسخ دهد. ابزارهایی مثل Webpack و Parcel به‌خوبی این کار را انجام می‌دهند.

۳. حذف کدهای بلااستفاده

با استفاده از تکنیک Tree Shaking، کدهای جاوا اسکریپت و CSS که در هیچ کجای سایت استفاده نمی‌شوند را شناسایی و حذف کنید. در بخش Coverage در DevTools کروم می‌توانید این کدها را به‌راحتی پیدا کنید.

۴. فشرده‌سازی فایل‌های JS و CSS

با Minify کردن فایل‌ها، فضاهای خالی، کامنت‌ها و کاراکترهای غیرضروری حذف می‌شوند. ابزارهای کاربردی برای این کار:

• UglifyJS یا Terser برای جاوا اسکریپت
• CSSNano یا cssmin برای CSS

۵. استفاده از Lazy Loading

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

۶. استفاده از Web Workers

برای پردازش‌های سنگینی که ارتباطی با رابط کاربری ندارند، از Web Workers استفاده کنید. این تکنیک به شما اجازه می‌دهد کارها را روی رشته‌ای جداگانه از Main Thread اجرا کنید.

۷. بهینه‌سازی تصاویر

تصاویر یکی از عوامل مهم کند شدن سایت هستند. برای بهینه‌سازی آن‌ها:

• از فرمت‌های مدرن مثل WebP و AVIF استفاده کنید
• ابعاد تصاویر را دقیقاً مشخص کنید
• تصاویر را قبل از آپلود فشرده کنید
• برای موبایل، نسخه‌های کوچک‌تر ارائه دهید

۸. کاهش اندازه DOM

ساختار DOM را تا حد امکان ساده نگه دارید. اعداد ایده‌آل عبارتند از:

• تعداد کل المان‌ها: کمتر از ۱۵۰۰ عدد (ایده‌آل ۹۰۰)
• عمق سلسله‌مراتبی: حداکثر ۱۶ سطح
• تعداد المان‌های فرزند: حداکثر ۳۲ در هر والد

۹. حذف منابع مسدودکننده رندر

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

۱۰. استفاده از CDN

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

چالش‌های خاص سایت‌های وردپرسی برای بهبود TBT

اگر سایت شما وردپرسی است، احتمالاً با چالش‌های بیشتری برای کاهش TBT روبرو هستید. دلیلش هم مشخص است:

• استفاده از افزونه‌های متعدد که هر کدام فایل‌های JS و CSS خودشان را دارند
• قالب‌های سنگین با امکانات زیاد که اکثراً استفاده نمی‌شوند
• پلاگین‌های کش و بهینه‌سازی که گاهی تداخل ایجاد می‌کنند
• کدهای اضافی ناشی از صفحه‌سازها (Page Builderها)

برای سایت‌های وردپرسی، پیشنهاد می‌کنم موارد زیر را رعایت کنید:

• از افزونه‌های کش قدرتمند مثل WP Rocket یا LiteSpeed Cache استفاده کنید
• افزونه‌های غیرضروری را حذف کنید
• از قالب‌های سبک و بهینه استفاده کنید
• تصاویر را با افزونه‌هایی مثل ShortPixel بهینه‌سازی کنید
• از قابلیت Delay JavaScript Execution استفاده کنید

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

ارتباط TBT با Core Web Vitals و INP

همان‌طور که اشاره کردم، TBT به‌طور مستقیم جزو Core Web Vitals نیست، اما ارتباط نزدیکی با معیارهای رسمی گوگل دارد. از زمانی که معیار INP جایگزین FID در Core Web Vitals شد (مارس ۲۰۲۴)، اهمیت بهینه‌سازی تعاملات کاربر بیش از پیش افزایش یافته است.

خبر خوب این است که تمام راهکارهایی که برای بهبود TBT انجام می‌دهید، به‌طور خودکار INP و FID را نیز بهبود می‌بخشند. پس با یک سرمایه‌گذاری درست، چندین مزیت کسب می‌کنید.

سوالات متداول درباره TBT

آیا TBT جزو Core Web Vitals است؟

خیر، TBT به‌طور مستقیم جزو Core Web Vitals نیست، اما ارتباط نزدیکی با FID و INP (که فاکتورهای رسمی رتبه‌بندی هستند) دارد. بهبود TBT تقریباً همیشه باعث بهبود این معیارها می‌شود.

بهترین مقدار TBT چقدر است؟

طبق استانداردهای جدید Lighthouse، مقدار کمتر از ۲۰۰ میلی‌ثانیه عالی، بین ۲۰۰ تا ۶۰۰ میلی‌ثانیه نیاز به بهبود، و بالای ۶۰۰ میلی‌ثانیه ضعیف محسوب می‌شود.

چرا TBT سایت وردپرسی من بالاست؟

معمولاً به دلیل استفاده زیاد از افزونه‌ها، قالب‌های سنگین، صفحه‌سازها و کدهای Third-Party است. با حذف افزونه‌های غیرضروری و استفاده از افزونه‌های کش حرفه‌ای می‌توانید آن را بهبود دهید. در صورت نیاز به کمک تخصصی، از خدمات افزایش سرعت سایت کمک بگیرید.

آیا TBT روی رتبه گوگل تاثیر دارد؟

به‌طور غیرمستقیم بله. چون TBT تجربه کاربری را تحت تاثیر قرار می‌دهد و گوگل به شدت به تجربه کاربری اهمیت می‌دهد. همچنین از طریق تاثیرش بر INP (که فاکتور رسمی است) می‌تواند بر رتبه تاثیر بگذارد.

چقدر طول می‌کشد تا TBT سایت بهبود یابد؟

این موضوع به میزان مشکلات سایت شما بستگی دارد. برخی تغییرات مثل حذف اسکریپت‌های غیرضروری تاثیر فوری دارند، اما بهینه‌سازی کلی ممکن است چند هفته زمان ببرد. نتایج در گوگل سرچ کنسول معمولاً پس از ۲۸ روز قابل مشاهده هستند.

جمع‌بندی: چرا باید همین امروز TBT را جدی بگیرید؟

در دنیای رقابتی امروز وب، هر میلی‌ثانیه اهمیت دارد. Total Blocking Time یکی از آن معیارهایی است که شاید در نگاه اول کوچک به نظر برسد، اما تاثیر مستقیمی بر رضایت کاربران، نرخ تبدیل و در نهایت رتبه سایت شما در گوگل دارد.

اگر TBT سایت شما بالاتر از حد استاندارد است، نگران نباشید. با رعایت راهکارهایی که در این مقاله گفتم، می‌توانید به تدریج این عدد را کاهش دهید و شاهد بهبود چشمگیر در عملکرد سایت خود باشید. از کاهش کدهای Third-Party گرفته تا بهینه‌سازی تصاویر و استفاده از Lazy Loading، هر قدم کوچک می‌تواند تاثیر بزرگی داشته باشد.

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