زمان انسداد کل (TBT) یکی از معیارهایی است که در بخش عملکرد گزارش Lighthouse ردیابی می شود. هر متریک جنبه ای از سرعت بارگذاری صفحه را نشان می دهد.
گزارش Lighthouse TBT را در میلی ثانیه نمایش می دهد:
آنچه TBT اندازه گیری می کند
TBT کل مدت زمانی را اندازه می گیرد که یک صفحه از پاسخ دادن به ورودی کاربر، مانند کلیک های ماوس، ضربه های روی صفحه، یا فشار دادن صفحه کلید مسدود می شود. مجموع با اضافه کردن بخش مسدود کردن تمام کارهای طولانی بین First Contentful Paint و Time به Interactive محاسبه می شود. هر کاری که بیش از 50 میلی ثانیه اجرا شود، کار طولانی است. مقدار زمان پس از 50 میلی ثانیه بخش مسدود کننده است. به عنوان مثال، اگر Lighthouse یک کار طولانی 70 میلی ثانیه را تشخیص دهد، بخش مسدود کننده 20 میلی ثانیه خواهد بود.
چگونه Lighthouse نمره TBT شما را تعیین می کند
امتیاز TBT شما مقایسه ای از زمان TBT صفحه شما و TBT برابر میلیون ها سایت واقعی هنگام بارگذاری در دستگاه های تلفن همراه است. ببینید چگونه امتیازات متریک تعیین می شود تا بدانید آستانه امتیازات Lighthouse چگونه تنظیم می شود.
این جدول نحوه تفسیر نمره TBT خود را در تلفن همراه نشان می دهد:
| زمان TBT (در میلی ثانیه) | کدگذاری رنگ |
|---|---|
| 0-200 | سبز (سریع) |
| 200-600 | نارنجی (متوسط) |
| بیش از 600 | قرمز (آهسته) |
این جدول نحوه تفسیر نمره TBT خود را در دسکتاپ نشان می دهد:
| زمان TBT (در میلی ثانیه) | کدگذاری رنگ |
|---|---|
| 0-150 | سبز (سریع) |
| 150-350 | نارنجی (متوسط) |
| بالای 350 | قرمز (آهسته) |
چگونه نمره TBT خود را بهبود ببخشید
ببینید چه چیزی باعث کارهای طولانی من می شود؟ برای یادگیری نحوه تشخیص علت اصلی کارهای طولانی با پانل عملکرد Chrome DevTools.
به طور کلی، شایع ترین علل کارهای طولانی عبارتند از:
- بارگیری، تجزیه یا اجرای غیر ضروری جاوا اسکریپت. در حین تجزیه و تحلیل کد خود در پانل عملکرد، ممکن است متوجه شوید که موضوع اصلی در حال انجام کارهایی است که واقعاً برای بارگذاری صفحه ضروری نیست. کاهش بارهای جاوا اسکریپت با تقسیم کد ، حذف کدهای استفاده نشده ، یا بارگیری موثر جاوا اسکریپت شخص ثالث باید امتیاز TBT شما را بهبود بخشد.
- عبارات ناکارآمد جاوا اسکریپت به عنوان مثال، پس از تجزیه و تحلیل کد خود در پنل Performance، فرض کنید تماسی با
document.querySelectorAll('a')مشاهده می کنید که 2000 گره را برمی گرداند. تغییر شکل کد خود برای استفاده از یک انتخابگر خاص تر که فقط 10 گره را برمی گرداند، باید امتیاز TBT شما را بهبود بخشد.
چگونه نمره عملکرد کلی خود را بهبود بخشید
مگر اینکه دلیل خاصی برای تمرکز روی یک معیار خاص داشته باشید، معمولاً بهتر است روی بهبود نمره عملکرد کلی خود تمرکز کنید.
از بخش Diagnostics در گزارش Lighthouse خود استفاده کنید تا تعیین کنید کدام بهبودها بیشترین ارزش را برای صفحه شما دارند. هرچه این فرصت مهم تر باشد، تأثیر بیشتری بر امتیاز عملکرد شما خواهد داشت. برای مثال، اسکرین شات Lighthouse زیر نشان می‌دهد که حذف منابع مسدودکننده رندر بیشترین پیشرفت را به همراه خواهد داشت:
برای یادگیری نحوه رسیدگی به فرصت های شناسایی شده در گزارش فانوس دریایی، به ممیزی های عملکرد مراجعه کنید.