معیار TBT چیست
فهرست مطالب
آخرین به روزرسانی در 29/07/2022
در این مقاله قصد داریم به معیار TBT بپردازیم.
معیار TBT یکی از مهم ترین و اصلی ترین معیارها در سرعت وبسایت می باشد که می تواند تاثیر به سزایی را در آن بگذارد.
این معیار در ابزارهای بزرگ آنالیز سرعت سایت وجود داشته و به عنوان یک پارامتر محاسبه می شود.
تا پایان این مقاله با ما همراه باشید تا بتوانیم کامل تر با این معیار آشنا شویم.
TBT چیست
TBT مخفف Total Blocking Time می باشد.
این معیار به معنای تعامل کاربر با صفحه می باشد.
اگر بخواهیم به صورت تخصصی تری توضیح دهیم به مجموع زمانهای بین FCP و TTI که main thread شلوغ بوده (بلاک شده)، Total Blocking Time یا مجموع زمان بلاک شدن گفته می شود.
(به عبارت دیگرTBT کل زمان بلاک شدن پاسخ صفحه به ورودی کاربر (مانند کلیک ماوس، تاچ ال سی دی یا فشار صفحه کلید) را اندازهگیری میکند.)
برای اینکه تعریف بالا را بهتر درک کنید ، بهتر است یک تعریفی در ابتدا از main thread بگوییم.
main thread چیست ؟
در زمان لود وبسایت منابع زیادی از سمت فرانت و بک اند وبسایت فراخوانی می شود.
به طور کلی می توان گفت main thread وظیفه ی اجرای کدهای سمت فرانت مانند جاوا اسکریپت و CSS و کدهای سمت بک اند مانند PHP را دارد.
با توجه به این تعاریف هر زمانیکه یکی از وظایفی که main thread برعهده داره بیش از ۵۰ میلی ثانیه به طول بینجامد، اصطلاحا می گوییم main thread بلاک شده است.
حال در اینجا باز خواهیم گشت به تعریف TBT که مجموع زمان های بین FCP و TTI می باشد.
در بین این دو معیار تمام زمانهایی که main thread بلاک شده است را محاسبه میکنیم و با هم جمع میکنیم تا TBT یا Total Blocking Time محاسبه شود.
TBT ، TTI و FCP
شاید بسیاری از افراد تفاوتی را بین TBT و TTI احساس نکرده و این دو معیار را یکسان بدانند.
اما با تمام شباهت هایی که دارند، این دو معیار مقادیر مختلفی را اندازهگیری میکنند.
TTI به شما میگوید که چند ثانیه طول می کشد تا صفحه کاملا تعاملی شود. (منظور از کاملا تعاملی بودن این است که کاربران بتوانند سایت را به صورت کاملا لود شده داشته و به عملیات های مورد نظر خود در آن بپردازند.)
اما در TBT همانطور که گفته شد ، صفحه باید محتوای مفید را نمایش داده و در کمتر از ۵۰ میلی ثانیه به ورودیهای کاربر پاسخ دهد.
First Contentful Paint (FCP) که معیار دیگری در جی تی متریکس می باشد دقیقا به شما میگوید که اولین متن یا تصویر یا هر المان دیگری چه موقع در صفحه شما لود شده است.
و اینجاست که TBT وارد میدان شده و زمانی که بین FCP و TTI اتفاق میافتد را اندازهگیری میکند.
منظور از تسک های طولانی چیست ؟
تسک طولانی به کدهای جاوا اسکریپتی گفته می شود که اجرای آن بیشتر از ۵۰ میلی ثانیه در Browser طول بکشد.
به طور کلی همانطور که گفته شد پاسخگویی یا تعامل بین صفحه وب و کاربر، هنگام لود شدن وب سایت با تسک های طولانی مرتبط است که بهعنوان بلاکر عمل می کنند.
به طور کلی مرورگر نمیتواند در تسک های طولانی توقف ایجاد کرده یا در آن اختلال ایجاد کند.
بنابراین زمانی که یک تسک طولانی در حال اجرا باشد ، مرورگر نمیتواند به کلیک کردن یا هر عملیات دیگری توسط کاربر به عنوان ورودی پاسخ بدهد و لود شدن صفحه وب برای کاربر تا زمانیکه تسک طولانی به طور کامل اجرا نشود، مسدود شده یا اصطلاحا freeze می شود.
چه عواملی بر TBT تاثیر گذارند
ما در بخش قبلی به برخی از این عوامل تاثیرگذار در TBT اشاره کردیم اما در این قسمت میخواهیم به صورت دقیق تری به آنها اشاره کنیم :
- پردازش کدهای HTML
- پردازش کدهای CSS و جاوا اسکریپت
- پردازش کدهای سمت بک اند و اجرای آنها
- تعداد درخواست های اسکریپت های سایت
- تعداد تسک ها
- ساختن DOM
- layout tree
چگونه می توان TBT را بهینه سازی کرد ؟
مهم ترین عاملی که در کاهش TBT تاثیر گذار است ، اجرای فایل های جاوا اسکریپت و CSS یا به طور کلی همان کدهای سمت فرانت وبسایت می باشد.
بنابراین بهینه سازی فایل های سمت فرانت سایت می تواند به صورت مستقیم بر بهینه سازی TBT تاثیرگذار باشد.
بهینه سازی فایل های جاوا اسکریپت و CSS می تواند به روش های مختلفی مانند :
- فشرده سازی آن ها
- نحوه فراخوانی آنها
- نحوه قرارگیری کدها
- ادغام فایل ها
- نحوه ی بارگذاری کدها
- فشرده سازی GZIP
و … باشد.
با این حال تصور نکنید به سادگی میتوانید این فاکتور رو بهبود بدهید و باید بدانید برای بهینه سازی آن حداقل بالای ۲۰ مورد اثر گذار هست که ما تنها به تعداد کمی از آنها اشاره کردیم.
اما شاید برای شما سوال باشد که چگونه می توانیم مشکلات TBT وبسایت خود را ردیابی کرده و آنهارا رفع کنیم ؟
همانطور که در ابتدای کار نیز گفته شد ابزارهای زیادی برای اینکار وجود دارد که یکی از آن ها ابزار Gtmetrix می باشد.
اما به غیر از جی تی متریکس ابزارهای دیگری نیز وجود دارد که می تواند اطلاعات دقیقی از مشکلات TBT در اختیار شما قرار دهد.
به عنوان مثال چه ابزاری بهتر از گوگل برای اینکار ؟
بررسی مشکلات TBT با استفاده از گوگل
برای بررسی مشکلات توسط گوگل باید در ابتدا وارد Performance panel در DevTools کروم خود شوید.
به صفحهای که قرار است آن را تحلیل کنید بروید، روی صفحه راست کلیک کرده و از بخش Inspect روی Performance کلیک کنید.
سپس روی Reload کلیک کرده و منتظر بمانید تا کروم پروسه ی آنالیز خود را انجام دهد.
حالا شما مطابق با تصویر زیر که یک مثال عینی است ، یک تحلیل دقیق از نحوه عملکرد صفحه خواهید داشت.
در بخش main ، تسکهایی را مشاهده خواهید کرد که با رنگهای مختلف مشخص شدهاند.
اگر یک تسک خاکستری مشاهده کردید که بخش کوچکی از آن قرمز بود، یعنی یک تسک طولانی پیدا کردهاید.
وقتی نشانگر موستان را روی آن ببرید، خواهید دید که این تسک چقدر برای main thread طول میکشد.
با کلیک بر روی Bottom-Up نیز می توانید توضیحات مربوط به هر تسک را مشاهده کنید.
لازم به ذکر است شما با استفاده از Lighthouse audit در کروم نیز می توانید به بررسی معیار TBT بپردازید.
برای استفاده از این راهکار نیز روی صفحه راست کلیک کرده ، inspect را زده و این بار روی Lighthouse کلیک کنید.
مواردی که قصد بررسی آنهارا دارید را انتخاب کرده و روی Generate report کلیک کنید.
حال پیشنهادهایی را دریافت خواهید کرد که به بهینه سازی TBT وبسایت شما کمک می کند.
مقدار Total Blocking Time چقدر باید باشد ؟
می توان گفت یکی از مهم ترین و بهترین ابزارهای سرعت سایتی که به ما آمار بسیار دقیقی از معیار TBT می دهند GTMETRIX می باشد.
اما سوال اینجاست که این معیار در جی تی متریکس چقدر باشد خوب و استاندارد است.
قبل از هر چیزی توجه داشته باشید که این معیار 25 درصد از امتیاز Performance جی تی متریکس را به همراه دارد.
این به این معناست که از اهمیت بسیار بالایی در سرعت سایت برخوردار می باشد.
در بخش زیر توضیح داده ایم که TBT در هر بازه چه امتیاز نسبی ای را دارد :
- ۱۵۰ میلی ثانیه یا کمتر : عالی
- بین ۱۵۰ تا 220 میلی ثانیه: متوسط
- بین 220 تا ۳۵۰ میلی ثانیه : نیازمند بهبود
- بیشتر از ۳۵۰ میلی ثانیه : بد
مهرشاد شادان مهر
مدرس سئو ، طراح سایت ، انیماتور
قهرمان زندگی شما در چند سال آینده ی شما می باشد