خطای Total Blocking Time یا TBT چیست و چطور رفعش کنیم؟

معیار Total Blocking Time یا TBT که در ابزارهای تست سرعت سایت نشون داده میشه، یکی دیگه از معیارهای کاربر محور هست که باعث بهبود تجربه کاربری میشه. بهبود و رفع معیار TBT یکی از کارهای سخت در بهبود سرعت سایته که این سختی در سایت‌های وردپرسی بیشتر هم میشه 🥺 چون معمولا در سایت‌های وردپرسی از تعداد زیادی افزونه‌ و همچنین قالب‌هایی با امکانات زیاد استفاده میشه. سایت‌های اختصاصی معمولاً  TBT بهتری نسبت به سایت‌های وردپرسی دارند. 
البته با استفاده از ابزارهای تست سرعت سایت که یکی از اونها ابزار واکاوی میزفا تولز هست، شناسایی و رفع خطاهای سرعت سایت آسونتر شده چون این ابزارها راهکارهایی برای رفع خطاهای سرعت ارائه می‌دهند. در این مقاله به بررسی معیار Total Blocking Time و راهکارهای رفع خطای TBT می‌پردازیم تا کاربران از حضور در سایت شما لذت ببرند. تا دیر نشده و کاربرانتون رو از دست ندادید بریم و این راهکارها رو اصولی یاد بگیرید. ✌️

معیار Total Blocking Time یا TBT چیست؟

این معیار به تعامل کاربر با صفحه توجه داره و به مجموع زمان‌های بین FCP و TTI که main thread شلوغ بوده و بلاک شده، Total Blocking Time یا مجموع زمان بلاک شدن گفته میشه.

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

عوامل تاثیرگذار بر روی معیار TBT 

✅ تجزیه‌وتحلیل صفحه HTML 
✅ کدهای جاوا اسکریپت نامرتب و JS استفاده ‌نشده 
✅ زمان اجرای JS بالا 
✅ انجام یک کار با Main Thread بالا 
✅ استفاده زیاد از کدهای third-party 
✅ ساختن DOM 
✅ سروکله زدن با فایل‌های CSS 
✅ تولید layout tree

ابزارهای اندازه‌گیری و تشخیص خطای Total Blocking Time

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

به‌طور مثال در سایت میزفا تولز وارد ابزار کاوش -> واکاوی صفحه بشید و در بخش خلاصه، خطای TBT رو ببینید و دلایل خطاها در بخش عملکرد هست.

✅ ابزار واکاوی صفحه میزفا تولز کاملاااا رایگان هست و بدون هیچ محدودیتی میتونید از این ابزار استفاده کنید و از راهکارهایی که به صورت فارسی نمایش داده میشه، استفاده کنید. 🤩 

واسه اینکه TBT رو بهتر درک کنید، بیاین ببینیم تا Main Thread چیست و چه زمانی بلاک میشه.

Main Thread چیست؟

تمام تعاملات بین کاربر و یک صفحه وب توسط Main Thread مرورگر پاسخ داده می‌شود. اما Main Thread همچنین مسئول اجرای وظایف دیگری هم هنگام لود صفحه وب هست مثل تجزیه فایل‌های HTML و CSS، ساختن DOM، اجرای فایل‌های JavaScript و... که همه این کارها توسط Main Thread اجرا می‌شوند. حالا اگه یکی از این کارها زیاد طول بکشه، کاربر برای تعامل با صفحه با تأخیر روبه‌رو میشه. 
زمانی که مجموع زمان بلاک شدن در Main Thread مرورگر زیاد طول بکشد، کاربر هنگام بارگذاری صفحه وب متوجه تأخیر قابل‌توجهی در هنگام تعامل با صفحه سایت میشه که بسیار آزاردهنده هست.

این مثال میتونه شما رو با اهمیت کار main thread مرورگر بیشتر آشنا کنه. شما به‌عنوان کارشناس سئو گاهی روزا پیش میاد که کلی کار دارید از تحقیق کلمات کلیدی گرفته تا انتشار محتوا و آنالیز سایت و … . حالا تصور کنید یکی از این وظایفتون بیشتر از حد طول بکشه؟! اونوقت حتماً یه سری از کارهاتون رو باید با تأخیر انجام بدید و مخصوصاً اگه کاری باشه که باید به کارفرما ارائه یا گزارش بدید، مجبورید با تأخیر ارائه بدید که منجر به نارضایتی کارفرما میشه. اینجا هم دقیقا همین قضیه صدق میکنه. 
هر زمان که یکی از وظایف Main Thread بیشتر از 50 ثانیه طول بکشه، میگیم Main Thread بلاک شده. حالا برای به دست آوردن TBT یا Total Blocking Time باید تمام زمان‌هایی که Main Thread بلاک شده رو محاسبه و جمع کنیم.

برای درک واضح این موضوع به این مثال توجه کنید. تصور کنید Main Thread قرار هست 3 وظیفه رو اجرا کنه و هر کار به‌صورت زیر ازش زمان میگیره:

وظیفه 1 - 120 میلی‌ثانیه 
وظیفه 2 - 30 میلی‌ثانیه 
وظیفه 3 - 75 میلی‌ثانیه

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

وظیفه 1 - 70 میلی‌ثانیه 
وظیفه 2 - 0 میلی‌ثانیه. 
وظیفه 3 - 25 میلی‌ثانیه

حالا مجموع زمان بلاک بودن این صفحه وب از مجموع زمان مسدود شدن هر کار به دست میاد یعنی 25 + 0 + 70 = 95 میلی‌ثانیه. 
همچنین مهم است که توجه داشته باشید که اجرای تنها یک وظیفه طولانی در Main Thread مرورگر به این معنی نیست که زمان مسدود شدن کل بسیار کمتر خواهد بود. بنابراین هنگام بهینه‌سازی امتیاز TBT خود، باید در صورت امکان زمان مسدود کردن هر کار در صفحه وب رو کاهش دهید.

نحوه امتیازدهی در معیار TBT

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

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

راهکارهای رفع خطای Total Blocking Time

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

مراحل کلی برای بهینه‌سازی First Input Delay و Total Blocking Time یک صفحه وب یکسانه و به همین دلیل هست که امتیاز کل زمان انسداد رو می‌توان برای تخمین امتیاز تأخیر ورودی اول نیز استفاده کرد. برای کاهش زمان مسدود شدن کل میتونید از این راهکارها استفاده کنید.

1- کدهای third-party رو به حداقل برسانید. 
2- کارهای انجام‌ شده توسط Main Thread رو کاهش دهید. 
3- اندازه Webpage assets (دارایی‌های صفحه وب) رو کاهش دهید. 
4- زمان اجرای جاوا اسکریپت رو کاهش دهید. 
5- تصاویر رو بهینه کنید. 
6- حجم JS رو کاهش دهید.  
7- حجم  CSS رو کاهش دهید. 
8- کدهای بلااستفاده رو حذف کنید. 
9- منابع مسدودکننده رندر رو حذف کنید.

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

1- کدهای third-party رو به حداقل برسونید

در میان کدهای استانداردی که Main Thread مرورگر رو برای مدت طولانی مشغول نگه می‌دارند، کدهای شخص ثالث همیشه وجود دارند زیرا به‌عنوان یک کار طولانی طبقه‌بندی می‌شوند و گاهی اوقات بیش از 50 میلی‌ثانیه طول می‌کشند تا به‌طور کامل توسط Main Thread اجرا شوند. به دلیل ماهیت کدهای third-party نمی‌توان اون‌ها رو مانند هر کد دیگری در صفحه وب به‌درستی بهینه کرد و این یک محدودیت است. اما یک روش خوب برای استفاده، به تعویق انداختن کدهای شخص ثالث است. 
ازآنجایی‌که اکثر کدهای شخص ثالث در ابتدای بارگذاری صفحه وب موردنیاز نیستند، می‌توان آن‌ها رو برای بارگذاری به تعویق انداخت یا با استفاده از defer یا async بارگیری کرد. 
کار دیگری که می‌توانید انجام دهید این است که کد third-party استفاده‌ نشده یا کد third-party که ارزش قابل‌توجهی برای یک صفحه وب ندارد رو حذف کنید زیرا عدم استفاده ا اون‌ها باعث کاهش زمان مسدود شدن می‌شود.

2- کارهای انجام‌ شده توسط Main Thread رو کاهش دهید

همه کارها (چه طولانی و چه کوتاه) به‌طور پیش‌فرض در Main Thread مرورگر اجرا می‌شوند و این موضوع باعث می‌شود تا Main Thread بیش‌ازحد مشغول باشه که منجر به نمره کل زمان مسدود شدن بالا می‌شود. 
بنابراین اگر کار انجام‌ شده توسط Main Thread کاهش یابد و بیشتر کارهای طولانی در جای دیگری اجرا شوند، به‌طور قابل‌توجهی به بهینه‌سازی امتیاز TBT کمک می‌کند که برای این منظور میتونید از Web Worker استفاده کنید. 
اگرچه این روشی مؤثر برای بهینه‌سازی و کاهش زمان انسداد کل یک صفحه وب است اما محدودیت‌هایی دارد زیرا تنها کارهایی که با رابط کاربری (UI) مرتبط نیستند یا تداخلی با اون ندارند، می‌توانند روی یک Web Worker اجرا شوند.

3- اندازه Webpage assets (دارایی‌های صفحه وب) رو کاهش دهید

اندازه Webpage asset چیزی هست که هر صاحب وب‌سایت یا متخصص سئو باید به آن توجه کند زیرا می‌تواند بر زمان مسدود شدن کل صفحات وب‌سایت تأثیر بگذارد. 
Main Thread مرورگر، Webpage asset مانند تصاویر، فایل‌ها، ویدیو و غیره رو لود می‌کند که بر سرعت اجرای کارهای دیگر در Main Thread مرورگر تأثیر میگذارند. 
Webpage assetهای بزرگ، زمان بیشتری رو در Main Thread صرف می‌کنند و برای مدت طولانی بر سرعت صفحه وب تأثیر می‌گذارند. 
بنابراین برای کاهش زمان صرف شده باید اندازه دارایی رو کاهش دهید که به‌نوبه خود اثر دارایی بر سرعت سایر کارهایی که در Main Thread انجام می‌شود رو کاهش میده.

4- زمان اجرای جاوا اسکریپت رو کاهش دهید

همه جاوا اسکریپت‌ها به‌طور پیش‌فرض روی Main Thread مرورگر اجرا می‌شوند، بنابراین اگر اجرای هر یک از اسکریپت‌ها بیش از 50 میلی‌ثانیه طول بکشد، گفته می‌شود که Main Thread رو مسدود کرده است. 
اگر زمان لازم برای اجرای کامل یک جاوا اسکریپت کاهش یابد، زمان مسدود شدن آن اسکریپت به‌نوبه خود و همچنین کل زمان مسدود کردن کاهش می‌یابد. 
یکی از بهترین راه‌ها برای کاهش زمان اجرای جاوا اسکریپت، تقسیم کد است که به‌موجب آن وظایف طولانی جاوا اسکریپت به کارهای کوتاه تقسیم می‌شوند که زمان کمتری رو صرف می‌کنند تا به‌طور کامل توسط Main Thread اجرا شوند. 
همچنین برای کاهش زمان اجرای جاوا اسکریپت میتونید استفاده از اسکریپت‌های Third-Party رو کاهش دهید و حجم کد رو هم کاهش دهید. همچنین جاوا اسکریپت استفاده‌نشده رو حذف (یا کاهش دهید) و  اجرای جاوا اسکریپت‌های غیرحیاتی و بدون استفاده رو به تعویق بیندازید.

5- تصاویر رو بهینه کنید

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

برای بهینه سازی تصاویر میتونید از این راهکارها استفاده کنید:

✅ ابعاد تصاویر رو به‌درستی مشخص کنید.  
✅ تصاویر خارج از صفحه رو به تعویق بیندازید. 
✅ تصاویر رو با ابزارهای خوبی فشرده کنید. (یک مقاله داریم درباره بهترین ابزارهای آنلاین برای کاهش حجم تصاویر یک چک کنید) 
✅ از تصاویر WebP استفاده کنید (یک مقاله داریم درباره بهترین فرمت عکس حتما بخونید). 
✅ ابعاد تصاویر رو برای نسخه موبایل تغییر دهید. 
✅ لود تنبل عکس ها رو فراموش نکنید.

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

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

بهبود تجربه کاربری با رفع خطای Total Blocking Time

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

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