تا به حال برایتان پیش آمده که یک سایت ظاهرا سریع بارگذاری شود اما هنگام کلیک روی دکمه ها یا باز کردن منوها با تاخیر مواجه شوید؟ یکی از دلایل احتمالی این مشکل می تواند اجرای طولانی کدهای JavaScript و اشغال شدن رشته اصلی مرورگر باشد. معیار TBT یا Total Blocking Time به بررسی همین مسئله کمک می کند.
اگر می خواهید بدانید TBT چیست و چطور می توان مقدار آن را در سایت کاهش داد، در این مقاله با مفهوم زمان انسداد، روش محاسبه TBT، معیارهای Lighthouse و ابزارهای شناسایی تسک های طولانی آشنا می شوید. همچنین یاد می گیرید چگونه علت TBT بالا را پیدا کنید و با بهینه سازی کدهای سایت، پاسخگویی آن را بهبود دهید.
TBT چیست؟ آشنایی با معیار Total Blocking Time
TBT یا Total Blocking Time به معنای «کل زمان انسداد» است. این معیار مجموع زمان هایی را اندازه گیری می کند که رشته اصلی مرورگر به دلیل اجرای تسک های طولانی نمی تواند به سرعت به ورودی کاربر پاسخ دهد. در محاسبه TBT فقط بخش بیشتر از ۵۰ میلی ثانیه هر تسک طولانی در نظر گرفته می شود و نتیجه با واحد میلی ثانیه نمایش داده می شود.
Main Thread چیست و چه نقشی در TBT دارد؟
Main Thread یا رشته اصلی مرورگر بخشی است که بسیاری از وظایف مهم صفحه از جمله اجرای JavaScript و پردازش های مرتبط با نمایش محتوا را انجام می دهد. وقتی این رشته مشغول اجرای یک تسک طولانی باشد، ممکن است نتواند بلافاصله به کلیک کاربر یا لمس صفحه پاسخ دهد. به همین دلیل بررسی عملکرد Main Thread برای شناسایی علت TBT بالا اهمیت دارد.
Long Task چیست و چگونه باعث افزایش TBT می شود؟
Long Task به تسکی گفته می شود که اجرای آن روی رشته اصلی مرورگر بیشتر از ۵۰ میلی ثانیه طول بکشد. در محاسبه TBT کل زمان اجرای چنین تسکی لحاظ نمی شود. فقط مدت زمانی که از آستانه ۵۰ میلی ثانیه بیشتر است، زمان انسداد محسوب می شود.
برای مثال اگر یک تسک ۸۰ میلی ثانیه طول بکشد، زمان انسداد آن ۳۰ میلی ثانیه است. اگر تسک دیگری فقط ۴۰ میلی ثانیه طول بکشد، زمان انسداد آن صفر خواهد بود.
بنابراین، TBT با کل زمان اجرای JavaScript یا مدت دانلود فایل های سایت برابر نیست. این معیار روی بخش مشخصی از اجرای صفحه تمرکز دارد که می تواند پاسخگویی مرورگر را مختل کند.
معیار TBT چگونه محاسبه می شود؟
برای محاسبه TBT باید زمان اجرای تسک های طولانی روی Main Thread را در بازه اندازه گیری بررسی کرد. در این محاسبه فقط بخشی از زمان هر تسک که بیشتر از ۵۰ میلی ثانیه است، به عنوان زمان انسداد در نظر گرفته می شود. سپس زمان انسداد تمام تسک های واجد شرایط با یکدیگر جمع می شود تا مقدار Total Blocking Time به دست آید.
فرمول محاسبه زمان انسداد هر تسک
فرمول محاسبه زمان انسداد هر تسک به این صورت است:
زمان انسداد = حداکثرِ صفر و (مدت اجرای تسک منهای ۵۰ میلی ثانیه)
برای مثال اگر یک تسک ۸۰ میلی ثانیه طول بکشد، زمان انسداد آن برابر با ۳۰ میلی ثانیه خواهد بود. اگر مدت اجرای تسک ۴۰ میلی ثانیه باشد، زمان انسداد آن صفر است؛ زیرا از آستانه ۵۰ میلی ثانیه بیشتر نشده است.
فرمول محاسبه Total Blocking Time
برای محاسبه TBT باید زمان انسداد تمام تسک های طولانی در بازه اندازه گیری را با هم جمع کرد.
TBT = مجموع زمان انسداد تمام تسک های طولانی
برای مثال فرض کنید، در زمان بررسی یک صفحه سه تسک با مدت اجرای ۸۰، ۱۲۰ و ۴۰ میلی ثانیه شناسایی شده اند. زمان انسداد این تسک ها به ترتیب ۳۰، ۷۰ و صفر میلی ثانیه است. بنابراین مقدار TBT برابر با ۱۰۰ میلی ثانیه خواهد بود.
این محاسبه نشان می دهد که TBT با مجموع مدت اجرای تمام تسک ها برابر نیست. فقط بخش بیشتر از ۵۰ میلی ثانیه هر تسک طولانی در مقدار نهایی محاسبه می شود. در گزارش معمول Lighthouse نیز این معیار در بازه مشخصی از بارگذاری صفحه اندازه گیری می شود که از FCP شروع می شود و معمولا تا TTI ادامه دارد.
چگونه Lighthouse امتیاز TBT را تعیین می کند؟
Lighthouse مقدار TBT را بر اساس مجموع زمان انسداد تسک های طولانی در بازه اندازه گیری محاسبه می کند و نتیجه را بر حسب میلی ثانیه نمایش می دهد. هرچه این مقدار کمتر باشد، رشته اصلی مرورگر زمان کمتری درگیر تسک های طولانی بوده است. با این حال باید بین مقدار خام TBT، وضعیت رنگی آن و امتیاز کلی Performance تفاوت قائل شد.
مقدار خام TBT مدت زمان انسداد محاسبه شده برای صفحه است. وضعیت رنگی TBT نشان می دهد این مقدار در محدوده خوب، نیازمند بهبود یا ضعیف قرار دارد. اما امتیاز کلی Performance در Lighthouse از ارزیابی چندین معیار عملکردی به دست می آید و فقط به TBT وابسته نیست.
Lighthouse برای ارزیابی TBT از آستانه های متفاوتی در موبایل و دسکتاپ استفاده می کند. بنابراین ممکن است یک صفحه در دسکتاپ وضعیت خوبی داشته باشد اما در آزمایش موبایل به بهینه سازی بیشتری نیاز پیدا کند. برای تفسیر دقیق نتیجه باید مقدار TBT را در کنار سایر معیارهای عملکرد بررسی کرد.
مقدار بهینه TBT مطابق با معیارهای Lighthouse چقدر است؟
مقدار مناسب TBT در Lighthouse برای موبایل حداکثر ۲۰۰ میلی ثانیه و برای دسکتاپ حداکثر ۱۵۰ میلی ثانیه است. اگر مقدار TBT از این محدوده بیشتر شود، صفحه به بهینه سازی نیاز دارد. هرچه زمان انسداد کمتر باشد، احتمال پاسخگویی بهتر مرورگر هنگام بارگذاری صفحه بیشتر خواهد بود.
وضعیت TBT | موبایل | دسکتاپ |
خوب | ۰ تا ۲۰۰ میلی ثانیه | ۰ تا ۱۵۰ میلی ثانیه |
| نیازمند بهبود | بیشتر از ۲۰۰ تا ۶۰۰ میلی ثانیه | بیشتر از ۱۵۰ تا ۳۵۰ میلی ثانیه |
| ضعیف | بیشتر از ۶۰۰ میلی ثانیه | بیشتر از ۳۵۰ میلی ثانیه |
این محدوده ها بر اساس معیارهای ارزیابی Lighthouse تعیین شده اند. در موبایل TBT تا ۲۰۰ میلی ثانیه و در دسکتاپ تا ۱۵۰ میلی ثانیه در وضعیت خوب قرار می گیرد. مقادیر بالاتر از این آستانه ها به ترتیب وارد محدوده نیازمند بهبود و ضعیف می شوند.
برای مثال اگر TBT یک صفحه در موبایل ۴۰۰ میلی ثانیه باشد، وضعیت آن نیازمند بهبود است. در این شرایط بهتر است با ابزارهایی مانند Chrome DevTools تسک های طولانی و کدهای JavaScript پرهزینه شناسایی شوند.
نکته مهم این است که TBT یکی از معیارهای آزمایشگاهی عملکرد سایت است و به تنهایی کیفیت تجربه واقعی کاربران را مشخص نمی کند. برای ارزیابی پاسخگویی سایت در استفاده واقعی، باید معیار INP و داده های میدانی نیز بررسی شوند.
چرا معیار TBT مهم است؟
معیار TBT به شما کمک می کند بفهمید آیا اجرای کدهای سایت باعث اشغال شدن رشته اصلی مرورگر و تاخیر در پاسخگویی به کاربر می شود یا نه. ممکن است محتوای صفحه به سرعت نمایش داده شود اما اجرای طولانی JavaScript باعث شود کاربر برای کلیک روی دکمه ها یا باز کردن منوها منتظر بماند. بررسی TBT به شناسایی این مشکل در آزمایش های عملکردی کمک می کند.
اهمیت TBT فقط به عددی که در Lighthouse نمایش داده می شود محدود نیست. این معیار می تواند نشان دهد کدام صفحات به بررسی دقیق تر کدهای JavaScript و تسک های طولانی نیاز دارند. با شناسایی علت انسداد می توان برای حذف کدهای غیرضروری یا بهینه سازی اجرای آن ها تصمیم گرفت.
البته TBT یک معیار آزمایشگاهی است و به تنهایی تجربه واقعی همه کاربران را نشان نمی دهد. مقدار پایین آن معمولا نشانه مثبتی برای پاسخگویی صفحه در زمان بارگذاری است، اما برای ارزیابی تعاملات واقعی کاربران باید معیار INP و داده های میدانی نیز بررسی شوند.
رابطه TBT با تجربه کاربری سایت چیست؟
معیار TBT نشان می دهد که در زمان بارگذاری صفحه، اجرای کدها تا چه اندازه می تواند پاسخگویی مرورگر را به تاخیر بیندازد. وقتی رشته اصلی مرورگر درگیر اجرای یک تسک طولانی JavaScript باشد، ممکن است کاربر نتواند بلافاصله روی دکمه ها کلیک کند یا منوها را باز کند. در نتیجه، با وجود نمایش محتوای صفحه، سایت کند یا غیرقابل تعامل به نظر می رسد.
برای مثال، تصور کنید صفحه اصلی یک فروشگاه اینترنتی نمایش داده شده اما اسکریپت های سنگین اجازه نمی دهند دکمه «افزودن به سبد خرید» به سرعت واکنش نشان دهد. این تاخیر می تواند باعث سردرگمی کاربر و کاهش رضایت او از تجربه خرید شود. کاهش TBT با شناسایی و بهینه سازی تسک های طولانی می تواند به پاسخگویی بهتر صفحه در زمان بارگذاری کمک کند.
با این حال، TBT تمام تجربه کاربری را اندازه گیری نمی کند. این معیار بیشتر بر انسداد رشته اصلی در مرحله بارگذاری تمرکز دارد؛ بنابراین برای بررسی پاسخگویی واقعی سایت در طول استفاده کاربران، باید آن را در کنار معیار INP و داده های میدانی بررسی کرد. ترکیب این معیارها تصویر دقیق تری از عملکرد سایت و مشکلات احتمالی تعامل کاربران ارائه می دهد.
TBT چه تاثیری در سئو سایت دارد؟
معیار TBT به طور مستقیم جزو معیارهای Core Web Vitals گوگل نیست؛ اما بررسی آن به شناسایی مشکلاتی کمک می کند که ممکن است پاسخگویی سایت و تجربه کاربران را تحت تاثیر قرار دهند. برای مثال، اجرای طولانی کدهای JavaScript می تواند باعث شود کاربران هنگام کلیک روی دکمه ها یا باز کردن منوها با تاخیر مواجه شوند.
گوگل در ارزیابی تجربه صفحه به معیارهایی مانند LCP، INP و CLS توجه می کند. TBT در این مجموعه قرار ندارد و بیشتر به عنوان یک معیار آزمایشگاهی برای تشخیص مشکلات عملکردی استفاده می شود. با این حال، کاهش TBT می تواند به شناسایی و رفع مشکلاتی کمک کند که بر پاسخگویی سایت و در نتیجه بهبود INP تاثیر می گذارند.
اگر TBT سایت شما بالاست، بهتر است اسکریپت های سنگین و تسک های طولانی را بررسی کنید. در کنار این کار، می توانید از خدمات تخصصی مشهد سئو برای بررسی مشکلات فنی و بهبود عملکرد سایت کمک بگیرید. البته کاهش TBT به تنهایی افزایش رتبه در نتایج گوگل را تضمین نمی کند و باید در کنار کیفیت محتوا، سئوی فنی و سایر عوامل بررسی شود.
تفاوت TBT و TTI چیست؟
TBT و TTI هر دو به بررسی عملکرد صفحه هنگام بارگذاری کمک می کنند، اما کاربرد متفاوتی دارند. معیار TBT مجموع زمان انسداد رشته اصلی مرورگر، به دلیل اجرای تسک های طولانی را اندازه گیری می کند. در مقابل، TTI یا Time to Interactive مدت زمان لازم برای رسیدن صفحه به وضعیت تعاملی قابل اتکا را نشان می داد.
تفاوت اصلی این دو معیار:
- TBT: میزان انسداد رشته اصلی مرورگر را بر حسب میلی ثانیه نشان می دهد.
- TTI: زمان آماده شدن صفحه برای تعامل قابل اتکا را بر حسب ثانیه اندازه گیری می کرد.
نکته مهم این است که TTI از Lighthouse نسخه 10 حذف شده است. امروزه TBT برای شناسایی مشکلات اجرای JavaScript کاربرد دارد و برای ارزیابی پاسخگویی واقعی سایت به تعاملات کاربران، باید معیار INP را نیز بررسی کنید.
تفاوت TBT و INP چیست؟
TBT و INP هر دو به بررسی پاسخگویی سایت کمک می کنند، اما کاربرد یکسانی ندارند. TBT یک معیار آزمایشگاهی است، که مجموع زمان انسداد رشته اصلی مرورگر هنگام بارگذاری صفحه را اندازه گیری می کند. در مقابل، INP یا Interaction to Next Paint یکی از معیارهای Core Web Vitals است که سرعت پاسخگویی بصری صفحه به تعاملات واقعی کاربران را ارزیابی می کند.
تفاوت اصلی این دو معیار عبارت است از:
- TBT: برای شناسایی تسک های طولانی JavaScript و مشکلات عملکردی در آزمایش های کنترل شده کاربرد دارد.
- INP: نشان می دهد صفحه در پاسخ به تعاملاتی مانند کلیک، لمس یا فشردن کلیدها چقدر سریع به روز می شود.
کاهش TBT می تواند به شناسایی و رفع بخشی از مشکلاتی کمک کند که بر INP تاثیر می گذارند؛ اما پایین بودن TBT لزوما به معنی مناسب بودن INP نیست. برای ارزیابی دقیق عملکرد سایت، TBT را با ابزارهایی مانند Lighthouse بررسی کنید و برای شناخت تجربه واقعی کاربران، داده های میدانی INP را نیز بسنجید.
با چه ابزارهایی می توان TBT سایت را اندازه گیری و بررسی کرد؟
برای اندازه گیری TBT و شناسایی علت بالا بودن آن می توانید از ابزارهای مختلفی استفاده کنید. هر ابزار اطلاعات متفاوتی درباره عملکرد صفحه و اجرای JavaScript ارائه می دهد.
1 – Google PageSpeed Insights
ابزار Google PageSpeed Insights عملکرد سایت را در موبایل و دسکتاپ بررسی می کند. در بخش داده های آزمایشگاهی می توانید مقدار TBT و فرصت های بهینه سازی را مشاهده کنید. اگر داده های واقعی کاربران موجود باشد، اطلاعات Core Web Vitals نیز نمایش داده می شود.
2 – Lighthouse
ابزار Google Lighthouse گزارش عملکرد صفحه را ارائه می دهد و به شناسایی تسک های طولانی و مشکلات احتمالی اجرای JavaScript کمک می کند. می توانید آن را از طریق Chrome DevTools اجرا کنید.
3 – Chrome DevTools Performance
بخش Performance در Chrome DevTools برای تحلیل دقیق تر عملکرد صفحه کاربرد دارد. با ضبط اجرای صفحه می توانید تسک های طولانی، فعالیت رشته اصلی مرورگر و بخش هایی از کد را که زمان پردازش زیادی مصرف می کنند شناسایی کنید.
4 – WebPageTest
ابزار WebPageTest امکان بررسی عملکرد صفحه در شرایط مختلف شبکه و دستگاه را فراهم می کند. گزارش های این ابزار برای تحلیل زمان بارگذاری و بررسی فعالیت مرورگر مفید هستند و می توان از آن در کنار Lighthouse برای عیب یابی عملکرد سایت کمک گرفت.
چگونه بررسی کنیم کدام تسک ها باعث افزایش TBT می شوند؟
برای پیدا کردن علت TBT بالا، باید تسک هایی را شناسایی کنید که بیش از ۵۰ میلی ثانیه از زمان رشته اصلی مرورگر را اشغال می کنند. این کار را می توانید با Chrome DevTools و گزارش Lighthouse انجام دهید.
۱. صفحه مورد نظر را در مرورگر Chrome باز کنید.
۲. با کلیک راست روی صفحه و انتخاب Inspect، وارد بخش Performance شوید.
۳. ضبط عملکرد صفحه را شروع کنید و صفحه را دوباره بارگذاری کنید، تا فعالیت های زمان بارگذاری ثبت شوند.
۴. در نمودار Main، تسک های طولانی را پیدا کنید. این تسک ها معمولا با رنگ مشخصی نمایش داده می شوند و با انتخاب هر کدام می توانید جزئیات بیشتری ببینید.
۵. بخش هایی مانند Call Tree و Bottom-Up را بررسی کنید، تا مشخص شود کدام توابع یا اسکریپت ها بیشترین زمان پردازش را مصرف می کنند.
۶. در گزارش Lighthouse نیز بخش Diagnostics و هشدارهای مربوط به تسک های طولانی و اجرای JavaScript را بررسی کنید.
پس از شناسایی عامل اصلی، می توانید کدهای غیرضروری را حذف کنید، اجرای اسکریپت ها را به تعویق بیندازید یا تسک های طولانی را به بخش های کوچک تر تقسیم کنید. در پایان دوباره تست بگیرید تا مشخص شود تغییرات انجام شده واقعا TBT را کاهش داده اند یا خیر.
چرا TBT سایت بالا است؟ مهم ترین عوامل افزایش آن
بالا بودن TBT معمولا به این معنی است که اجرای کدهای سایت، به ویژه JavaScript، برای مدت طولانی رشته اصلی مرورگر را اشغال می کند. در این شرایط مرورگر فرصت کمتری برای پاسخگویی سریع به تعاملات کاربر دارد. برای کاهش TBT ابتدا باید عامل ایجاد تسک های طولانی را شناسایی کنید.
1 – بارگذاری و اجرای غیرضروری JavaScript
یکی از دلایل رایج TBT بالا، بارگذاری فایل های JavaScript است که برای نمایش اولیه صفحه ضروری نیستند. اجرای کتابخانه های اضافی، کدهای استفاده نشده و اسکریپت های سنگین می تواند زمان پردازش مرورگر را افزایش دهد.
2 – تسک های طولانی و کدهای ناکارآمد
وقتی یک تابع JavaScript بیش از ۵۰ میلی ثانیه اجرا می شود، ممکن است به یک تسک طولانی تبدیل شود. حلقه های سنگین، محاسبات پیچیده و توابعی که حجم زیادی از داده ها را پردازش می کنند، می توانند باعث افزایش زمان انسداد شوند.
3 – اسکریپت های شخص ثالث
ابزارهای آمارگیری، تبلیغات، چت آنلاین و سرویس های بازاریابی ممکن است کدهایی را اجرا کنند که کنترل کاملی روی آن ها ندارید. اگر این اسکریپت ها منابع زیادی مصرف کنند، می توانند TBT را افزایش دهند.
4 – پردازش سنگین DOM و رندر صفحه
ساختار پیچیده DOM و تغییرات مکرر در عناصر صفحه می تواند پردازش مرورگر را سنگین کند. ترکیب خواندن و تغییر مکرر ویژگی های ظاهری عناصر نیز ممکن است باعث محاسبات اضافی در فرایند رندر شود.
5 – اجرای اولیه فریم ورک ها و Hydration
در سایت هایی که از فریم ورک هایی مانند React استفاده می کنند، اجرای اولیه JavaScript و فرایند Hydration می تواند به پردازش قابل توجهی نیاز داشته باشد. اگر این عملیات طولانی باشد، ممکن است رشته اصلی مرورگر برای مدتی مسدود شود و مقدار TBT افزایش پیدا کند.
برای تشخیص علت اصلی، صرفا به عدد TBT اکتفا نکنید. گزارش Lighthouse و بخش Performance در Chrome DevTools را بررسی کنید تا مشخص شود کدام فایل ها، توابع یا تسک ها بیشترین زمان پردازش را مصرف می کنند.
چگونه TBT سایت خود را بهبود بدهیم؟
برای کاهش TBT باید زمان اشغال شدن رشته اصلی مرورگر را کم کنید. بهترین روش این است که ابتدا تسک های طولانی را شناسایی کنید و سپس بر اساس تاثیر هر مشکل، کدها و اسکریپت های سایت را بهینه سازی کنید.
۱. حذف JavaScript غیرضروری
فایل ها و کتابخانه هایی را که در صفحه کاربردی ندارند حذف کنید. کاهش کدهای استفاده نشده باعث می شود مرورگر زمان کمتری برای دریافت، تجزیه و اجرای JavaScript صرف کند.
۲. تقسیم کد و بارگذاری مرحله ای
با روش هایی مانند Code Splitting می توانید کدها را به بخش های کوچک تر تقسیم کنید تا فقط بخش مورد نیاز هر صفحه بارگذاری شود. همچنین استفاده از ویژگی های defer و async برای اسکریپت های مناسب می تواند از مسدود شدن غیرضروری فرایند بارگذاری جلوگیری کند.
۳. کاهش تاثیر اسکریپت های شخص ثالث
اسکریپت های تبلیغاتی، ابزارهای آمارگیری و چت آنلاین را بررسی کنید و موارد غیرضروری را حذف کنید. در صورت امکان، بارگذاری اسکریپت هایی را که برای نمایش اولیه صفحه لازم نیستند به زمان مناسب تری موکول کنید.
۴. تقسیم تسک های طولانی
اگر یک تابع JavaScript زمان زیادی برای اجرا نیاز دارد، آن را به بخش های کوچک تر تقسیم کنید. این کار به مرورگر فرصت می دهد بین اجرای تسک ها به کارهای مهم دیگری مانند پاسخگویی به تعاملات کاربر بپردازد.
۵. بهینه سازی کدهای پرهزینه و پردازش DOM
توابع سنگین، محاسبات تکراری و تغییرات غیرضروری DOM را کاهش دهید. در صورت نیاز، محاسبات سنگین را به Web Worker منتقل کنید تا بخشی از پردازش خارج از رشته اصلی انجام شود.
۶. بازبینی افزونه ها، قالب ها و فریم ورک ها
در سایت های وردپرسی، افزونه ها و قالب هایی را که اسکریپت های زیادی اجرا می کنند بررسی کنید. در سایت های مبتنی بر فریم ورک نیز بهینه سازی اجرای اولیه کدها و فرایند Hydration می تواند به کاهش TBT کمک کند.
پس از هر تغییر، دوباره با Lighthouse یا PageSpeed Insights تست بگیرید. بهتر است آزمایش را در شرایط یکسان تکرار کنید و در کنار TBT، معیارهای دیگر عملکرد و داده های واقعی کاربران را نیز بررسی کنید.
چهار ترفند مهم برای کاهش TBT
اگر می خواهید بدون تغییرات گسترده، برای کاهش TBT اقدام کنید، این چهار روش را در اولویت قرار دهید:
۱. JavaScript غیرضروری را حذف کنید: فایل ها و کتابخانه هایی را که استفاده نمی شوند شناسایی کنید تا مرورگر زمان کمتری برای اجرای کدها صرف کند.
۲. اسکریپت های غیرضروری را به تعویق بیندازید: ابزارهای آمارگیری، چت و سایر اسکریپت هایی را که برای نمایش اولیه صفحه لازم نیستند، در زمان مناسب تری بارگذاری کنید.
۳. تسک های طولانی را تقسیم کنید: توابع سنگین را به بخش های کوچک تر تبدیل کنید تا رشته اصلی مرورگر برای مدت طولانی درگیر یک عملیات نماند.
۴. نتایج را با ابزارهای تست بررسی کنید: پس از هر تغییر، با Lighthouse یا PageSpeed Insights دوباره تست بگیرید و مقدار TBT را با نتیجه قبلی مقایسه کنید.
نکته مهم این است که همه این روش ها برای هر سایت نتیجه یکسانی ندارند. ابتدا علت اصلی TBT بالا را شناسایی کنید و سپس روشی را اجرا کنید که مستقیما همان مشکل را برطرف می کند.
مقایسه سریع TBT سالم و مشکل دار
برای ارزیابی TBT می توانید مقدار ثبت شده در Lighthouse را با محدوده های استاندارد مقایسه کنید. جدول زیر وضعیت TBT را در موبایل و دسکتاپ نشان می دهد.
| وضعیت TBT | موبایل | دسکتاپ |
| خوب | ۲۰۰ میلی ثانیه یا کمتر | ۱۵۰ میلی ثانیه یا کمتر |
| نیازمند بهبود | بیشتر از ۲۰۰ تا ۶۰۰ میلی ثانیه | بیشتر از ۱۵۰ تا ۳۵۰ میلی ثانیه |
| ضعیف | بیشتر از ۶۰۰ میلی ثانیه | بیشتر از ۳۵۰ میلی ثانیه |
TBT پایین معمولا نشان می دهد که رشته اصلی مرورگر در زمان بارگذاری کمتر مسدود شده است. در مقابل، TBT بالا می تواند نشانه اجرای طولانی JavaScript یا وجود تسک های سنگین باشد.
توجه کنید که این محدوده ها برای ارزیابی آزمایشگاهی TBT هستند. برای بررسی تجربه واقعی کاربران، بهتر است معیار INP و داده های میدانی Core Web Vitals را نیز در نظر بگیرید.
چگونه پس از بهینه سازی مطمئن شویم TBT بهتر شده است؟
برای اطمینان از کاهش TBT، باید عملکرد سایت را قبل و بعد از بهینه سازی در شرایط مشابه اندازه گیری کنید. صرفا انجام تغییرات در کد به معنی بهبود عملکرد نیست.
۱. تست اولیه بگیرید: آدرس صفحه را در PageSpeed Insights وارد کنید و مقدار TBT را برای موبایل و دسکتاپ ثبت کنید.
۲. تغییرات را اجرا کنید: بر اساس گزارش Lighthouse، اسکریپت های غیرضروری یا تسک های طولانی را بهینه سازی کنید.
۳. تست را تکرار کنید: همان صفحه را با تنظیمات و شرایط مشابه دوباره بررسی کنید. بهتر است آزمایش را چند بار انجام دهید تا نوسانات موقت روی نتیجه تاثیر کمتری داشته باشند.
۴. جزئیات عملکرد را بررسی کنید: با استفاده از Chrome DevTools Performance بررسی کنید که زمان اجرای تسک های طولانی کاهش یافته باشد.
۵. تجربه واقعی کاربران را بسنجید: در کنار TBT، مقدار INP و سایر معیارهای Core Web Vitals را بررسی کنید، تا مطمئن شوید بهینه سازی فقط عدد آزمایشگاهی را تغییر نداده است.
اگر مقدار TBT کاهش پیدا کند و در عین حال پاسخگویی صفحه و معیارهای تجربه واقعی کاربران نیز بهتر شوند، می توانید نتیجه بگیرید که بهینه سازی انجام شده موثر بوده است.
چک لیست تشخیص و عیب یابی TBT
برای بررسی TBT سایت و پیدا کردن علت بالا بودن آن، مراحل زیر را به ترتیب انجام دهید:
✅ مقدار TBT را در Lighthouse یا PageSpeed Insights بررسی کنید.
✅ وضعیت عملکرد صفحه را در موبایل و دسکتاپ مقایسه کنید.
✅ تسک های طولانی تر از ۵۰ میلی ثانیه را در Chrome DevTools شناسایی کنید.
✅ فایل های JavaScript غیرضروری و کدهای استفاده نشده را بررسی کنید.
✅ اسکریپت های شخص ثالث مانند ابزارهای آمارگیری و چت آنلاین را ارزیابی کنید.
✅ توابع سنگین و پردازش های غیرضروری DOM را بهینه سازی کنید.
✅ در صورت استفاده از وردپرس، افزونه ها و قالب های پرمصرف را بررسی کنید.
✅ پس از هر تغییر، تست عملکرد را در شرایط مشابه تکرار کنید.
✅ برای ارزیابی تجربه واقعی کاربران، INP و سایر معیارهای Core Web Vitals را نیز بررسی کنید.
نکته مهم: لازم نیست همه موارد را هم زمان اجرا کنید. ابتدا گزارش عملکرد را بررسی کنید و بر اساس مشکلاتی که بیشترین تاثیر را دارند، تغییرات را در اولویت قرار دهید. سپس نتایج را دوباره اندازه گیری کنید تا از موثر بودن اقدامات مطمئن شوید.
جمع بندی؛ چطور TBT سایت را کاهش دهیم و تجربه بهتری بسازیم؟
اگر سایت شما سریع بارگذاری می شود اما کاربران هنگام کلیک روی دکمه ها یا باز کردن منوها با تاخیر مواجه می شوند، بررسی TBT می تواند نقطه شروع خوبی برای پیدا کردن مشکل باشد. این معیار نشان می دهد اجرای تسک های طولانی تا چه اندازه رشته اصلی مرورگر را مسدود می کند و مانع پاسخگویی سریع صفحه می شود.
برای بهبود TBT، ابتدا با ابزارهایی مانند Lighthouse و PageSpeed Insights علت مشکل را پیدا کنید. سپس با حذف JavaScript غیرضروری، بهینه سازی اسکریپت ها و تقسیم تسک های طولانی، عملکرد سایت را بهبود دهید. در نهایت نتیجه تغییرات را دوباره اندازه گیری کنید و برای ارزیابی تجربه واقعی کاربران، معیار INP را نیز در نظر بگیرید.
فراموش نکنید که هدف فقط کاهش یک عدد در گزارش تست نیست؛ هدف این است که کاربران بتوانند بدون تاخیر و دردسر با سایت شما تعامل داشته باشند. اگر برای شناسایی مشکلات فنی و بهبود عملکرد سایت به راهنمایی تخصصی نیاز دارید، مشهد سئو می تواند در مسیر بهینه سازی و تقویت سئوی سایت به شما کمک کند.
سوالات متداول درباره TBT
آیا TBT در همه صفحات یک سایت یکسان است؟
خیر. مقدار TBT به حجم و نوع کدهای JavaScript، اسکریپت های فعال و پیچیدگی هر صفحه بستگی دارد. به همین دلیل بهتر است صفحات مهم سایت را جداگانه بررسی کنید.
آیا افزونه های وردپرس می توانند TBT را افزایش دهند؟
بله. بعضی افزونه ها فایل های JavaScript اضافی یا پردازش های سنگین اجرا می کنند و ممکن است باعث افزایش TBT شوند. برای شناسایی عامل اصلی، افزونه ها را به صورت هدفمند بررسی کنید.
آیا هاست ضعیف باعث افزایش TBT می شود؟
هاست ضعیف می تواند زمان پاسخ سرور و بارگذاری منابع را افزایش دهد؛ اما TBT بیشتر به مدت اجرای تسک ها و انسداد رشته اصلی مرورگر مربوط است. بنابراین باید مشکلات سرور و اجرای JavaScript را جداگانه بررسی کنید.
آیا فشرده سازی فایل های JavaScript باعث کاهش TBT می شود؟
فشرده سازی حجم فایل و زمان انتقال آن را کاهش می دهد؛ اما لزوما زمان اجرای کد را کم نمی کند. برای کاهش TBT ممکن است به حذف کدهای اضافی و بهینه سازی منطق برنامه نیز نیاز داشته باشید.
چرا TBT در هر بار تست تغییر می کند؟
شرایط شبکه، توان پردازشی دستگاه، فعالیت های پس زمینه و تفاوت در اجرای اسکریپت ها می توانند نتیجه تست را تغییر دهند. برای مقایسه دقیق، تست را چند بار و در شرایط مشابه اجرا کنید.
آیا کاهش TBT باعث افزایش سرعت بارگذاری سایت می شود؟
لزوما نه. کاهش TBT به کم شدن زمان انسداد رشته اصلی کمک می کند؛ اما سرعت نمایش محتوا به عواملی مانند پاسخ سرور، بارگذاری منابع و معیار LCP نیز وابسته است. برای ارزیابی کامل، چند معیار عملکردی را در کنار هم بررسی کنید.
