جلسه ۹ – Total Blocking Time چیست + بهبود آن

در این آموزش قصد داریم به زبان ساده بگیم Total Blocking Time یا TBT داخل ابزار Gtmetrix چیست و با این خطا چه کنیم؟ چطور بهبود بدیم؟ آیا این خطا هست؟

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

مقدمه مهم:

در مقاله قبلی درباره Speed Index چیست و چطور بهینه کنیم صحبت کردیم و گفتیم این فاکتور وابستگی شدید به فاکتورهای FCP و LCP داره.، اما معیار Total Blocking Time به نظر من یکی از سخت‌ترین معیارها برای بهبود در ابزار GTmetrix و سایر ابزارهای تست سرعت سایت هست، مخصوصا برای دوستان وردپرسی، که به نظر من در ۸۰ درصد سایت‌های وردپرسی نمی‌تونن این مورد حل کنن و سایر دوستان هم یا برنامه نویس حرفه ای در کنار متخصص سئو دارن و یا اصلا تو سایتشون چیزی ندارن و خلوت هست و نمره خوب دارن، با این حال امیدوارم این مقاله بهتون کمک کنه.

معیار Total Blocking Time شبیه به معیار First Input Delay در Web Vitals هست. حال TBT ابتدا در Lighthouse Google در سال ۲۰۲۰ معرفی شد و بعد سایت جی تی متریکس در معیارهای Performance خودش آورد و اشاره به همون DOM قدیمی داره که یک زمانی جزء فاکتورهای Yslow یاهو خدابیامرز بود ولی این‌بار معیار TBT بهینه‌تر و سخت‌گیرتر شده.

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

Total Blocking Time چیست؟

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

Main Thread چیست؟

هنگامی که صفحه وبسایت در حال لود شدنه، لازمه منابع زیادی فراخوانی بشن و وظایف و عملیات گوناگونی پشت صفحه رخ میده. کارهایی مثل تجزیه فایل‌های HTML و CSS ، ساختن DOM (مقاله DOM چیست) ، اجرای فایل‌های JavaScript و… به زبون خیلی ساده، مرورگر از main thread برای اجرای این کارها یا درخواست‌های کاربر (مثل کلیک کردن) استفاده می‌کنه.

یک مثال خوب برای درک بهتر:
main thread رو مثل گارسون رستوران در نظر بگیریم. این گارسون وظایف مختلفی مثل گرفتن سفارش‌ها، تحویل سفارش به آشپزخانه، بردن غذا سر میز، تمیز کردن میزها و… داره. حالا اگه یکی از کارهای این گارسون بیش از حد طول بکشه، چه اتفاقی می‌افته؟ درسته، به کارهای مهم دیگه نمی‌رسه. پس باید طوری وظایف گارسون (main thread) رو طراحی کنیم که رسیدگی به یک کار خاص، وقتش رو بیش از حد نگیره.

مثال زیر بهتر بهتون کمک میکنه:
حالا منظور از بلاک شدن main thread چیه؟ هروقت یکی از وظایفی که main thread برعهده داره بیش از ۵۰ میلی ثانیه طول بکشه، می‌گیم main thread بلاک شده. حالا بین زمان‌های FCP و TTI ، تمام زمان‌هایی که main thread بلاک شده رو محاسبه می‌کنیم و با هم جمع می‌کنیم تا TBT یا Total Blocking Time رو به‌دست بیاریم. (درباره TTI یا Time to Interactive چیست در جلسه ۱۰ صحبت کردیم)

عکس بالا خیلی واضح داره میگه، ۴ تا وظیفه (Task) قرار هست انجام بشه حالا مثلا یک Task میتونه خواندن فایل JS باشه، اصولا فایل‌های JS باعث میشن زمان TBT بیشتر باشه. حالا به جزء وظیفه دوم بقیه وظیفه ها یعنی یک، سه و چهار بالای ۵۰ میلی ثانیه طول کشیده و با رنگ قرمز مشخص کردیم، جمع همه این موارد میشه TBT یا همون Total Blocking Time که گفتیم.

چه چیزهایی در TBT اثر دارن؟

• تجزیه و تحلیل صفحه HTML
• سروکله زدن با فایل CSS
• سروکله زدن با فایل JS (این از همه مهم‌تره)
• ساختن DOM
• تولید layout tree
• و ….

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

مقدار Total Blocking Time در گزارش Performance چقدر باشه خوبه؟

معیار TBT مقدار ۲۵٪ از امتیاز Performance در GTmetrix رو تشکیل میده و این نشون دهنده اهمیت بسیار زیاد این معیار کلیدی هست. روش نمره‌دهی GTmetrix به TBT ، به این صورته:

• ۱۵۰ میلی ثانیه یا کمتر : خوب
• بین ۱۵۰ تا ۲۲۴ میلی ثانیه: قابل قبول، اما نیازمند بهینه سازی
• بین ۲۲۴ تا ۳۵۰ میلی ثانیه: کمی طولانی‌تر از حد استاندارد
• بیشتر از ۳۵۰ میلی ثانیه: خیلی طولانی‌تر از حد استاندارد

چطوری TBT یا Total Blocking Time رو بهینه کنیم؟

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

• کاهش زمان اجرای JavaScripts
• بهینه سازی main thread
• حذف فایل‌های JavaScript بدون استفاده
• جایگزین کردن کتابخانه‌های سنگین JavaScript با موارد کوچکتر

نکته مهم: main-thread مربوط به JS یا جاوااسکریپت هست، دوستان فکر میکنن که اگر فایل های جاوااسکریپت رو بیان فشرده سازی بکنن TBT بهتر میشه ولی باید بگم خیر بهتر نمیشه فقط به قولی ماستمالی میشه. البته کسی منکر بهینه سازی فایل‌های JS یا CSS نیست ولی این طرز فکر که فشرده کنیم تا بهتر بشه برای قدیم بود، باید فایل‌های JS که سایت استفاده نمیکنه رو کلا برای همیشه از سایت پاک کنید، نه اینکه بیاین همه رو بنذارید یک جا. پس نیاز دارید بدید برنامه نویس این کار مبارک براتون انجام بده.

درضمن: طبق بررسی که کردم defer کردن فایل‌های JS یا CSS کمک زیادی به بهبود TBT هم نمیکنه، البته شاید در کاغذ مناسب باشه و اجرای JS در انتها قرار بده ولی در عمل ما تاثیر زیادی ندیدیم.

همینطور دو خطای مهم در بخش Structure داریم که اثر مستقیم داره و پیشنهاد میشه بخونید.

• خطای Avoid long main-thread tasks
• خطای Avoid an excessive DOM size

با این حال فکر نکنید خیلی ساده می‌تونید این فاکتور رو بهبود بدید و باید بدونید برای بهینه سازی اون کم کم بالای ۲۰ مورد اثر گذار هست که ما قبلا در مقالات قبلی گفتیم.

جمع بندی Total Blocking Time

معیار Total Blocking Time یکی از مهم‌ترین معیارهای GTmetrix جدید هست که تاثیر زیادی روی افزایش امتیاز Performance داره. TBT به بررسی زمانی می‌پردازه که main thread به دلیل کارهای طولانی (Long Tasks) بلاک شده بوده و درنتیجه مرورگر نمی‌تونسته به درخواست‌های کاربر پاسخ بده. هر زمان که main thread بیش از ۵۰ میلی ثانیه درگیر یک کار (Task) بشه، بقیه این زمان جزء TBT محسوب میشه. معیار Total Blocking Time شبیه معیار First Input Delay در Web Vitals هست.

برای بهبود Total Blocking Time باید یک سری مجموعه فاکتورهای مهم رو بررسی کنید که این فاکتورها کم کم  ۱۰ مورد هست و در میزفا اشاره کردیم، به عبارت دیگر بهبود و بهینه سازی فاکتور Total Blocking Time با دادن یک کد حل نمیشه و ساده نیست.

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

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

نویسنده مقاله: پوریا آریافر / متخصص و مشاوره سئو