معیار Total Blocking Time

زمان مسدود کلی (TBT) چیست ؟

معیار TBT در Core Web Vitals چیست و چگونه آن را بهینه کنیم؟

زمان مسدود کلی (Total Blocking Time یا TBT) یک معیار عملکرد است که میزان زمان بین نقطه نخستین نقاشی محتوا (FCP) و زمان تعاملی (TTI) را کمیاب می‌کند، در طی این زمان میانی، رشته اصلی به اندازه کافی برای جلوگیری از پاسخگویی ورودی مسدود شده است. به اصطلاح ساده‌تر، این یک اندازه‌گیری از “تاخیر” است که کاربر ممکن است در حین بارگذاری یک صفحه تجربه کند.

بیایید کمی بیشتر به این موضوع پرداخته و این را بررسی کنیم:

نقاشی نخستین محتوا (FCP): این معیار نشان‌دهنده زمانی است که مرورگر اولین بیت محتوایی از مدل شیء سند (DOM) را که می‌تواند متن، تصویر یا حتی تصویر را ارائه دهد، رندر می‌کند. این نشان‌دهنده نقطه‌ای است که صفحه “چیزی انجام می‌دهد” و گیر کرده نیست را نشان می‌دهد.
زمان تعاملی (TTI): TTI نقطه‌ای است که رشته اصلی فرصت به پردازش وظایف لازم را داشته‌است، اطمینان حاصل می‌کند که تعامل برای کاربر پایدار است. به عبارت دیگر، این زمانی است که کاربر می‌تواند به‌طور فعال با یک صفحه ارتباط برقرار کند و صفحه به طور قابل اطمینان واکنش‌پذیر است.
در بازه زمانی بین FCP و TTI، اقدامات و وظایف مختلفی انجام می‌شود که ممکن است رشته اصلی را مسدود کند. به عنوان مثال، هنگامی که یک کاربر سعی می‌کند روی یک لینک یا دکمه کلیک کند، اما تأخیری وجود دارد یا هیچ اتفاقی نمی‌افتد، اغلب به دلیل این است که رشته اصلی توسط یک وظیفه دیگر مسدود شده است. مجموع مدت زمان تمامی این وقایع مسدود کننده، زمان مسدود کلی نامیده می‌شود.
برای صاحبان وب‌سایت‌ها، توسعه‌دهندگان و حرفه‌ایان SEO، TBT یک معیار حیاتی است چرا که مستقیماً تأثیرگذار بر تجربه کاربر دارد. TBT بالا نشان‌دهنده این است که کاربران ممکن است با تأخیرهای قابل مشاهده‌ای روبرو شوند هنگام سعی در تعامل با صفحه، که می‌تواند به ناپسندی و احتمال ترک صفحه منجر شود. بنابراین، بهینه‌سازی برای کاهش TBT می‌تواند به طور قابل توجهی تجربه کاربر را بهبود بخشد و به‌طور معکوس عملکرد کلی یک صفحه را بهبود بخشد.

نحوه اندازه‌گیری زمان Total Blocking Time یا TBT

زمان مسدود کلی (TBT) در واقعیت اطلاعاتی را در مورد تعامل صفحه‌ی شما ارائه می‌دهد. اما چگونه می‌توانیم به دقت آن را اندازه‌گیری کنیم؟ به دست آوردن درک از وظایف بلند و سپس بهره‌مندی از ابزارهای مناسب، گام اول در کاهش TBT است.

وظایف بلند ممکن است به دلایل مختلفی رخ دهند:

اجرای JavaScript سنگین: اسکریپت‌های بزرگ یا اسکریپت‌های بهینه‌نشده می‌توانند رشته اصلی را مشغول نگه دارند.
محاسبات سبک بزرگ: این اتفاق ممکن است رخ دهد هنگامی که مرورگر برای بسیاری از عناصر به طور همزمان سبک‌ها را محاسبه می‌کند.
بارگذاری منابع: به ویژه اگر این منابع بزرگ و بهینه نشده باشند.
شناسایی و بهینه‌سازی این وظایف بلند، گام اول در کاهش TBT است.

2 ابزار برای اندازه‌گیری معیار TBT

Lighthouse

این ابزار منبع باز و اتوماتیک توسط گوگل، کیفیت یک صفحه وب را ارزیابی می‌کند. می‌توانید آن را بر روی هر صفحه وب اجرا کرده و بازرسی‌ها را برای عملکرد، دسترسی‌پذیری، وب‌اپلیکیشن‌های پیشرفته و موارد دیگر دریافت کنید. در ارزیابی عملکرد، Lighthouse در مورد TBT گزارش می‌دهد و جزئیاتی راجع به وظایف بلندی که در آن مشارکت دارند ارائه می‌کند.
Chrome DevTools پنل عملکرد در Chrome DevTools امکان بررسی عمیق‌تری از زمان اجرای یک صفحه را فراهم می‌کند. با ضبط یک جلسه، می‌توانید هر وظیفه‌ای که بر روی رشته اصلی اجرا می‌شود را بازرسی کنید. وظایفی که بیش از 50 میلی‌ثانیه طول می‌کشند، روشن خواهند شد که به شما کمک می‌کند مقصران پشت TBT بالا را شناسایی کنید.

عواملی که باعث افزایش زمان TBT می‌شوند:

زمان مسدود کلی (TBT) یک نشانگر از تعامل و پاسخ‌پذیری وب‌سایت شماست. زمان مسدود کلی بالا نشان‌دهنده این است که کاربران ممکن است در حین تعامل با وب‌سایت شما، به‌ویژه در فاز بارگذاری، تأخیرهای قابل مشاهده‌ای تجربه کنند. چندین عامل می‌توانند به افزایش زمان مسدود کلی منجر شوند:

اجرای JavaScript سنگین:

اسکریپت‌های بزرگ: اجرای فایل‌های JavaScript بزرگ یا پیچیده می‌تواند رشته اصلی را تحت تأثیر قرار داده و تأخیرها ایجاد کند.
کد نابهینه: کد بهینه نشده یا کد تکراری می‌تواند منجر به محاسبات ناپسند شود.
اسکریپت‌های بدون به تأخیر اجرایی: اسکریپت‌هایی که همان‌طور که صفحه بارگذاری می‌شود اجرا می‌شوند، می‌توانند به تأخیر وظایف مهم دیگر ایجاد کنند.
تغییرات زیاد در طراحی:

محاسبات یا به‌روزرسانی‌های مکرر در طراحی می‌توانند باعث شود مرورگر به طور مداوم سبک‌ها و طراحی‌ها را محاسبه کرده و در نتیجه زمان مسدود کلی افزایش یابد.
رقابت رشته اصلی:

وقتی که چندین اسکریپت یا وظیفه به صورت همزمان برای رشته اصلی رقابت می‌کنند، این منجر به مسدود شدن می‌شود.
اسکریپت‌های خارجی:

اسکریپت‌های خارجی مانند تبلیغات، ردیاب‌ها و ابزارها می‌توانند وظایف غیرمنتظره و بدون کنترلی که رشته اصلی را مسدود می‌کنند، معرفی کنند.
محاسبات فایل های CSS حجیم:

اگر فایل های CSS زیاد باشند یا اگر پیچیده باشند، ممکن است مرورگر برای محاسبه اینکه عناصر چگونه باید نمایش داده شوند، وقت بیشتری بگیرد.
تاخیر در بارگذاری منابع:

زمان پاسخ آهسته سرور یا دریافت منابع بزرگ می‌تواند رشته اصلی را مشغول کند، به ویژه اگر این منابع فوراً پس از دریافت تجزیه یا اجرا شوند.
کارگرهای وب:

هرچند که کارگرهای وب وظایف را از رشته اصلی جدا می‌کنند، گاهی اوقات ممکن است به صورت ناکارآمد داده‌ها را به رشته اصلی ارسال کنند و باعث مسدود شدن شوند.
وظایف بلند:

هر وظیفه‌ای که بیش از 50 میلی‌ثانیه اجرا شود، می‌تواند به TBT اضافه شود. شناسایی و تجزیه و تحلیل این وظایف بلند می‌تواند به طور قابل توجهی TBT را کاهش دهد.
تصاویر و رسانه‌های بهینه نشده:

تصاویر با وضوح بالا و رسانه‌های بهینه نشده ممکن است باعث محاسبات و بازآرایی طراحی شوند و رشته اصلی را مسدود کنند.
عدم بهینه‌ سازی مرورگر:

عدم بهره‌مندی از قابلیت‌های مرورگر مانند ویژگی‌های async و defer برای اسکریپت‌ها می‌تواند منجر به مسدود شدن قابل اجتنابی شود.
فونت‌های وب:

فونت‌های وب، به ویژه اگر به طور موثر بارگذاری نشوند، ممکن است به تأخیر در رندر کردن منجر شوند که می‌تواند اگر اسکریپت‌ها منتظر بارگذاری فونت باشند، بر TBT تأثیر گذار باشد.
رندرینگ از سوی سرور (SSR):

هرچند که رندرینگ از سوی سرور می‌تواند به بهبود First Contentful Paint کمک کند، اگر به درستی انجام نشود، ممکن است به اضافه کردن JavaScript اضافی که باید در سمت مشتری پردازش شود، بیانجامد و بر TBT تأثیر گذار باشد.
انیمیشن‌ ها و گذر های پیچیده:

انیمیشن‌های بهینه نشده، به ویژه آن‌هایی که در حین بارگذاری اولیه صفحه فعال می‌شوند، ممکن است به افزایش کار رشته اصلی منجر شوند.
برای بهبود TBT، مهم است که شناسایی کنید کدام یک از این عوامل بیشترین تأثیر را بر وب‌سایت شما دارد و سپس اولویت بندی کرده و بهینه‌سازی کنید. نظارت دوره‌ای بر عملکرد وب‌سایت خود با استفاده از ابزارهایی مانند Chrome DevTools و Lighthouse می‌تواند درک بهتری از مسائل خاص وب‌سایت شما را ارائه دهد و توصیه‌هایی منطبق بر آن ارائه کند.

راه کارهای حل مشکل نرخ TBT بالا

نحوه تصحیح امتیاز زمان مسدود کلی (TBT) بسیار حیاتی است تا تجربه کاربری روانی فراهم شود. یکی از ابزارهای اصلی برای اندازه‌گیری و ارائه راه‌حل‌ها برای مسائل TBT، ابزار PageSpeed Insights از گوگل است. برای کاربران وردپرس، بهینه‌سازی‌های خاصی وجود دارد که می‌تواند بهبود امتیاز TBT را به همراه داشته باشد.

اجرای بازرسی PageSpeed Insights

PageSpeed Insights (PSI) ابزاری از گوگل است که نقدینگی در مورد عملکرد یک صفحه وب بر اساس معیارهای عملکرد Lighthouse ارائه می‌دهد، از جمله TBT.

مراحل:

استفاده از ابزار PageSpeed Insights

آدرس وب‌سایت خود را وارد کرده و “تجزیه و تحلیل” را کلیک کنید.
گزارش را بررسی کنید. در بخش “تشخیصی”، بخش‌هایی مرتبط با TBT را خواهید دید.
تصحیح‌های توصیه‌شده را پیاده‌سازی کنید. PSI معمولاً توصیه‌های عملی خاصی برای کاهش TBT ارائه می‌دهد.

بهینه‌ سازی فایل‌های JS (به تأخیر انداختن و تأخیر):

از پلاگین‌هایی مانند WP Rocket یا Autoptimize برای به طور خودکار به تأخیر انداختن اسکریپت‌های غیرضروری استفاده کنید.
به طور دستی به تأخیر انداختن علامت defer را به تگ‌های اسکریپت در پوسته خود اضافه کنید.
اجرای تأخیر: برای اسکریپت‌های غیرضروری، در نظر بگیرید از پلاگین‌هایی استفاده کنید که به شما اجازه می‌دهند اجرای آن‌ها را تا پس از تعامل کاربر یا یک زمان مشخص به تأخیر بیندازید.

بهینه‌ سازی فایل‌های CSS:

از ابزارها یا پلاگین‌ها برای شناسایی و درج CSS مسیر حیاتی استفاده کنید تا مطمئن شوید که مهمترین استایل‌ها اولین بار بارگذاری می‌شوند.
CSS غیرضروری را به تأخیر بندازید: استایل‌های غیرضروری را به صورت ناهمزمان یا پس از محتوای اصلی بارگذاری کنید.
CSS را فشرده کنید: پلاگین‌های WP مانند Autoptimize می‌توانند به طور خودکار CSS شما را فشرده کنند.
URLهای قبل از بارگذاری:

قبل از بارگذاری می‌تواند فرآیند بارگذاری منابع از سایت‌های شخص ثالث یا صفحات دیگر در دامنه شما را سریع‌تر کند.
مشخص کردن دامنه‌های اصلی: تشخیص دهید که اسکریپت‌ها یا صفحات شخص ثالثی که مداوم دسترسی دارند چه هستند.
از پلاگین‌های WP استفاده کنید: برخی از پلاگین‌های کش یا بهینه‌سازی عملکرد به شما این امکان را می‌دهند که به آسانی URLهای قبل از بارگذاری را تنظیم کنید.
دستی URLهای قبل از بارگذاری را اضافه کنید: در فایل header.php پوسته خود خطوطی مانند را اضافه کنید.

پیش‌ بارگذاری فونت‌ها:

پیش‌بارگذاری می‌تواند اطمینان حاصل کند که فونت‌ها هنگام نیاز فوراً در دسترس باشند.
تشخیص فونت‌های ضروری: تعیین کنید که کدام فونت‌ها برای رندر اولیه حیاتی هستند.
از ویژگی preload استفاده کنید: در پوسته‌تان خطوطی مانند را اضافه کنید.
پلاگین‌های فونت WP: پلاگین‌هایی مانند WP Rocket ویژگی‌های بهینه‌سازی فونت دارند که می‌توانند این فرآیند را به صورت خودکار انجام دهند.
با اجرای این بهینه‌سازی‌ها، به ویژه در وب‌سایت‌های وردپرس، می‌توانید به طرز چشم‌گیری امتیاز TBT خود را بهبود بخشید و در نتیجه تجربه کاربری را بهبود ببخشید.