پایگاه دانش میزفا

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

Total Blocking Time یا TBT چست و چطور امتیاز آن را بهبود بدیم؟

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 رو با هم بررسی کنید.

Total Blocking Time چیست
Total Blocking Time در جی تی متریکس

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 چیست در جلسه ۱۰ صحبت کردیم)

Total Blocking Time چیست
(منبع عکس)

عکس بالا خیلی واضح داره میگه، ۴ تا وظیفه (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 میزفا دنبال کنید. و یا اگر به سئو فنی علاقه دارید مباحث سئو فنی و تکنیکال رو دنبال کنید.

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

 

فیلم آموزشی افزایش سرعت سایت با gtmetrix
فیلم آموزشی افزایش سرعت سایت با gtmetrix
پوریا آریافر
اولین کسب و کار آنلاین خودم رو در فیسبوک راه‌اندازی کردم، سال ۲۰۱۱ یکی از پرتعامل‌ترین صفحات فارسی با ۸۰ هزار فالور فعال رو داشتم. بعد اینکه فیسبوک خالی از کاربر ایرانی شد وارد دنیای شبکه شدم و در انتهای سال ۲۰۱۲ مدرک MCSE مایکروسافت رو دریافت کردم، در حالی که نمره بالا گرفتم ولی کسی به دلیل به خطر افتادن موقعیت شغلی خودش به عنوان کارآموز منو قبول نمی‌کرد، بعدش با شروع دوران خدمت سربازی، مسئول بهینه سازی یک سایت خبری معتبر شدم و سئو یاد گرفتم. در ابتدای سال ۲۰۱۴ تونستم از رتبه ۱۵۰۰۰ به ۴۰۰ الکسا نزدیک کنم، اون زمان الکسا خیلی مهم بود. وارد دانشگاه شدم، به دلیل عدم علاقه به دانشگاه سعی کردم زودتر تمومش کنم و سه ساله در مقطع کارشناسی IT فارغ التحصیل شدم، توی دانشگاه هر کسی منو میدید یاد سئو میوفتاد، در همون سال آخر دانشگاه بزرگ‌ترین کانال تلگرامی IT با ۴۰ هزار عضو رو داشتم، که به مجتمع فنی فروختم تا بتونم تمرکز رو فقط بر روی عشق خودم یعنی سئو بذارم، وقتی کانال تلگرام فروختم حس پرواز بهم دست داد، هرچند درآمد چندین میلیون ماهانه رو از دست دادم ولی دوباره باید مثل گذشته با پوستی نو یک فصلی نو رو میساختم. در این چندین سال فعالیت‌های سئو به شکل تخصصی بنده در قالب پروژه‌های مختلف و آموزش‌های حضوری و غیرحضوری در دفتر میزفا و دانشگاه علامه طباطبایی تهران صورت ‌گرفته، تجربه بهینه سازی موفقی در بهبود UX و CRO پروژه‌های سئو کسب کردم. در اکثر ابزارهای کاربردی گوگل تسلط کاملی دارم. عاشق کسب تجربه های جدید هستم. راز پیشرفت در هر کاری رو یادگیری و یاددادن می‌دونم و میزفا که در اواخر ۲۰۱۶ راه‌اندازی شد تونست چنین بستر مناسبی رو برام فراهم کنه. همینطور در حال حاضر مدیریت یک تیم ۱۰ نفری از جوانان فعال و پرانگیزه رو در میزفا به عهده دارم. نقد و بازخوردهای سازنده شما، جوهر تلاش‌های مستمر ماست تا یک قدم خودمون بهبود بدیم. منتظریم …
لیست آموزش GTmetrix نسخه جدید

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

نظرات

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر