Total Blocking Time (TBT) چیست و 5 راهکار برای کاهش آن

در دنیای امروز که سرعت حرف اول را می‌زند، تنها “بالا آمدن” سایت کافی نیست. کاربر مدرن انتظار دارد به محض مشاهده محتوا، بتواند با آن تعامل داشته باشد.

زمان انسداد کل یا Total Blocking Time (TBT) یکی از حیاتی‌ترین معیارهایی است که مشخص می‌کند وب‌سایت شما تا چه حد “زنده” و پاسخگو است.

در این مقاله، عمیقاً بررسی می‌کنیم که زمان انسداد کل (TBT) چیست و چگونه می‌توانید با بهینه‌سازی آن، رضایت کاربران و گوگل را همزمان جلب کنید.

Total Blocking Time (TBT) چیست؟

زمان انسداد کل یا همان Total Blocking Time (TBT) مجموع زمانی است که در آن رشته اصلی (Main Thread) مرورگر به دلیل اجرای وظایف سنگین، مسدود شده و نمی‌تواند به ورودی‌های کاربر (مانند کلیک، تپ یا فشردن کلید) پاسخ دهد.

این معیار دقیقاً بازه زمانی بین اولین نمایش محتوا (FCP) و زمان تعاملی شدن کامل (TTI) را زیر نظر می‌گیرد.

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

البته توجه کنید که فقط وظایفی که بیش از ۵۰ میلی‌ثانیه طول می‌کشند در محاسبه TBT لحاظ می‌شوند. برای هر وظیفه طولانی، ۵۰ میلی‌ثانیه اول “زمان مجاز” و مابقی آن “زمان انسداد” محسوب می‌شود.

وظیفه طولانی (Long Task) چیست و چرا مهم است؟

در اکوسیستم مرورگر، به هر عملیاتی که اجرای آن روی رشته اصلی بیش از ۵۰ میلی‌ثانیه زمان ببرد، Long Task گفته می‌شود. اهمیت این موضوع در ساختار تک‌رشته‌ای (Single-threaded) مرورگر نهفته است.

حال ممکن است این سوال برایتان پیش بیاید که Long Task چگونه می تواند بر سرعت سایت تاثیر منفی بگذارد، سوال خوبی ست که آن را با هم بررسی می کنیم.

چرا Long Taskها خطرناک هستند؟

دلایل مختلفی نشان می‌دهد که Long Task تاثیرات بسیار منفی روی سرعت سایت می‌گذارد. در زیر چند نمونه را برای شما بیان می‌کنیم:

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

احساس یخ‌زدگی (Freezing): حتی اگر کاربر به شدت روی صفحه اسکرول کند، تا زمانی که آن وظیفه تمام نشود، واکنشی رخ نمی‌دهد.

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

رشته اصلی مرورگر (Main Thread) چه کاری انجام می‌دهد؟

برای درک اینکه چرا TBT رخ می‌دهد، باید بدانید Main Thread مانند قلب تپنده تب مرورگر شماست. وظایف این بخش عبارتند از:

• تجزیه HTML و ساخت DOM: تبدیل کدهای ارسالی از سرور به ساختار درختی صفحه
• پردازش CSS: اعمال استایل‌ها و محاسبه ابعاد هر المان
• اجرای جاوااسکریپت: این مورد اصلی‌ترین عامل فشار بر رشته اصلی است
• مدیریت رویدادها: گوش دادن به کلیک‌ها، تایپ کردن و اسکرول کاربران
• رندرینگ: نقاشی کردن (Painting) پیکسل‌ها روی صفحه نمایش

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

اکنون این سوال پیش می آید که چرا جاوااسکریپت بیشترین تأثیر را بر TBT دارد؟

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

اگر کد‌های جاوا اسکریپت بهینه نباشند، پیامدهایی را به دنبال خواهد داشت که برخی از آن‌ها را در زیر آورده ایم:

• تأخیر در پاسخ‌دهی: کاربر کلیک می‌کند، اما پردازش کد قبلی مانع از اجرای دستور جدید می‌شود.
• پرش‌های تصویری: به دلیل درگیری Main Thread، فریم‌های انیمیشن حذف شده و حرکت‌ها پله‌پله به نظر می‌رسند.
• افزایش نرخ پرش (Bounce Rate): کاربری که با یک صفحه “قفل شده” مواجه شود، سریعاً آن را می‌بندد.

اکنون ممکن است بپرسید گوگل چگونه زمان انسداد کل (TBT) را اندازه‌گیری می‌کند؟ بیاید با هم این موضوع را یاد بگیریم.

گوگل چگونه Total Blocking Time (TBT) را اندازه‌گیری می‌کند؟

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

حال یک مثال عملی از محاسبه Total Blocking Time یا همان tbt را مرور می‌کنیم. فرض کنید در این بازه زمانی، ۴ وظیفه با زمان‌های زیر اجرا شوند:

وظیفه A : دویست و شصت میلی‌ثانیه (۲۱۰ میلی‌ثانیه انسداد)

وظیفه B : سی میلی ثانیه (۰ میلی‌ثانیه انسداد – چون زیر ۵۰ است)

وظیفه C : صد میلی‌ثانیه (50 میلی‌ثانیه انسداد)

وظیفه D : شصت میلی‌ثانیه (۱۰ میلی‌ثانیه انسداد)

خب، مجموع TBT این صفحه: 210+0+50+10=270

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

آیا تعداد کمتر وظایف به معنی TBT پایین‌تر است؟

خیر. همانطور که در بالا گفتیم، پاسخ منفی است. آنچه در TBT اهمیت دارد، طول مدت هر وظیفه است، نه تعداد آن‌ها. برای مثال، داشتن ۱۰ وظیفه که هر کدام ۶۰ میلی‌ثانیه طول می‌کشند (مجموعاً ۱۰۰ms انسداد)، بسیار بهتر از داشتن تنها یک وظیفه است که ۴۰۰ میلی‌ثانیه طول می‌کشد (۳۵۰ms انسداد).

در حالت دوم، کاربر یک وقفه طولانی و آزاردهنده را تجربه می‌کند، در حالی که در حالت اول، وقفه‌ها بسیار کوتاه و غیرمحسوس هستند.

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

خب، به سراغ ادامه مبحث می‌رویم…

تفاوت Total Blocking Time (tbt) و زمان تعامل‌پذیری (TTI)

بسیاری از افراد این دو مفهوم را اشتباه می‌گیرند، اما تفاوت ظریفی بین آن‌ها وجود دارد:

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

در حالی که TBT (Total Blocking Time): یک مدت زمان است. مجموع تمام لحظاتی را نشان می‌دهد که در مسیر رسیدن به TTI، رشته اصلی مسدود بوده است.

در حقیقت TBT معیار دقیق‌تری برای سنجش “میزان بد بودن” تجربه کاربر در هنگام بارگذاری است.

چگونه بفهمیم چه چیزی باعث افزایش TBT شده است؟

نکته مهمی که در اینجا وجود دارد این است که چگونه بفهمیم چه چیزی باعث افزایش Total Blocking Time می‌شود. برای عیب‌یابی، دو روش استاندارد وجود دارد:

1) استفاده از تب Performance در Chrome DevTools این روش که برای برنامه نویسان حرفه‌ای عالی است به صورت زیر می توانید انجام دهید:

در مرورگر کروم، F12 را بزنید و به تب Performance بروید. روی دکمه ضبط (دایره کوچک یا دکمه Reload) کلیک کنید.

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

حال، با کلیک روی هر نوار قرمز، در بخش Bottom-Up می‌توانید ببینید دقیقاً کدام فایل یا تابع باعث بروز مشکل شده است. به همین راحتی!

2) بررسی با ابزار Lighthouse که ساده‌ترین راه برای مدیران سایت است:

در DevTools به تب Lighthouse بروید.

اکنون، گزارش را تولید کنید.

در بخش Metrics، مقدار TBT را ببینید. در قسمت Opportunities، گوگل به شما می‌گوید کدام اسکریپت‌های شخص ثالث (Third-party) یا کدهای جاوااسکریپت باید بهینه شوند.

5 راهکار تخصصی برای کاهش Total Blocking Time (TBT)

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

خدمات افزایش سرعت سایت وردپرسی [تضمینی زیر 2.5 ثانیه]

اما اگر می‌خواهید خودتان برای کاهش Total Blocking Time اقدام کنید، می توانید همچنان همراه ما باشید. نکاتی که در ادامه گفته می‌شود را با دقت مطالعه نمایید.

اگر عدد TBT سایت شما قرمز است، باید استراتژی‌های زیر را به ترتیب اولویت اجرا کنید:

راهکار اول: خرد کردن وظایف سنگین (Code Splitting)

به جای بارگذاری یک فایل JS حجیم، کدها را به قطعات کوچک‌تر تقسیم کنید. تکنیک Long Task Breaking به مرورگر اجازه می‌دهد در فواصل بین اجرای کدها، نفسی تازه کرده و به ورودی کاربر پاسخ دهد.

راهکار دوم: استفاده هوشمندانه از Async و Defer

در این روش از کاهش Total Blocking Time می توانید اسکریپت‌هایی که برای رندر اولیه ضروری نیستند را با ویژگی‌های async یا defer بارگذاری کنید تا مانع از تجزیه HTML نشوند.

راهکار سوم: مدیریت اسکریپت‌های شخص ثالث (Third-party Scripts)

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

راهکار چهارم: انتقال پردازش به Web Workers

کارهایی که به DOM نیاز ندارند (مانند محاسبات ریاضی سنگین یا پردازش داده‌ها) را به Web Worker منتقل کنید. در حقیقت Web Workerها در یک رشته جداگانه اجرا می‌شوند و Main Thread را آزاد نگه می‌دارند.

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

آخرین راهکاری که ما در این مقاله ارائه داده ایم، بهینه‌سازی رندر و کاهش پیچیدگی استایل‌ها است. استفاده از سلکتورهای پیچیده در CSS و تغییرات مکرر در لایوت (Layout Thrashing) می‌تواند باعث درگیری Main Thread شود. اولویت‌بندی منابع حیاتی را فراموش نکنید.

چرا زمان انسداد کل (TBT) مهم است؟

گرچه TBT مستقیماً یکی از سه ضلع Core Web Vitals نیست، اما همبستگی شدیدی با آن‌ها دارد. بهبود Total Blocking Time (TBT) به طور خودکار باعث بهبود LCP (به دلیل آزاد شدن منابع برای رندر تصویر اصلی) و جلوگیری از نوسانات در CLS می‌شود.

اگر با مفهوم cls آشنایی ندارید، می توانید هم‌اکنون مقاله با عنوان CLS چیست؟ راهنمای کامل رفع خطای CLS در PageSpeed را مطالعه بفرمایید.

در واقع، TBT پلی است میان کدهای فنی شما و رضایت واقعی کاربر. سایت‌هایی با Total Blocking Time پایین، نرخ تبدیل بالاتر و رتبه بهتری در نتایج گوگل کسب می‌کنند.

بنابراین، اگر به دنبال سئوی پایدار هستید، بهینه‌سازی زمان انسداد کل (tbt) را در اولویت قرار دهید.

سخن پایانی

زمان انسداد کل یا Total Blocking Time (TBT) یکی از حیاتی ترین معیار‌های سنجش عملکرد وب‌سایت است که نشان می‌دهد کاربران هنگام تعامل با صفحه، تا چه اندازه با تاخیر و “فریز شدن” مواجه می‌شوند.

این شاخص مستقیما به فعالیت‌های رشته اصلی (Main Thread) مرورگر و اجرای وظایف سنگین جاوااسکریپت (Long Task) وابسته است.

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

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

با آرزوی موفقیت برای شما کاربران گران‌قدر.