خطای Total Blocking Time یا TBT چیست و چطور رفعش کنیم؟

معیار TBT در Core Web Vitals   – Core Web Vitals یا همان هسته حیاتی وب، شامل معیارهایی برای سنجیدن تجربه کاربر در یک صفحه وب است که توسط گوگل ارائه شده است. اطلاعات مربوط به این بخش در سرچ کنسول و همچنین پلتفرم‌هایی مانند PageSpeed Insights که سرعت سایت را بر اساس این معیارها می‌سنجند، در اختیار شما قرار می‌گیرد.

از میانه خردادماه 1400، گوگل شروع به استفاده از معیارهای Core Web Vitals برای رتبه‌بندی صفحات در نتایج جستجو کرد. این اقدام نشان داد که گوگل جدی است در بهبود تجربه کاربری وب‌سایت‌ها و اهمیت دادن به عواملی نظیر سرعت و پاسخگویی صفحات.

از آن زمان به بعد، این معیارها به طور پیوسته توسط کارشناسان سئو و توسعه‌دهندگان وب بررسی و بهینه‌سازی می‌شوند. معیارهای حیاتی وب به دو دسته تقسیم می‌شوند: Core Web Vitals که شامل Largest Contentful Paint (LCP)، First Input Delay (FID) و Cumulative Layout Shift (CLS) هستند و non-Core Web Vitals که شامل سایر معیارهای کمتر اهمیت مانند میزان استفاده از HTTPS و موارد مربوط به امنیت وب‌سایت‌ها می‌باشند.

در این مطلب سعی داریم که یکی از معیارهای non-Core Web Vitals به نام TBT را بررسی کنیم. و بفهمیم معیار TBT چیست.

TBT یا Total Blocking Time چیست؟

معیار TBT یا Total Blocking Time (مجموع زمان مسدود شده)، یکی از معیارهای non-Core Web Vitals است که برای ارزیابی تجربه کاربری در صفحات وب بسیار مهم است. این معیار نشان می‌دهد که در بازه‌ای که بین لحظه بارگذاری اولین المان صفحه (FCP) تا زمانی که صفحه قابل تعامل شدن می‌شود (TTI)، رشته اصلی (Main Thread) مرورگر مسدود شده است و کاربران نمی‌توانند به طور موثر با صفحه تعامل داشته باشند.

رشته اصلی یا Main Thread، مسئولیت اجرای وظایفی مانند بارگذاری منابع، اجرای اسکریپت‌های جاوااسکریپت و نمایش اجزاء صفحه را دارد. اگر هنگام انجام این وظایف، زمانی طولانی‌تر از 50 میلی‌ثانیه طول بکشد، آن وظیفه به عنوان یک “وظیفه طولانی” شناخته می‌شود و Main Thread به طور موقت مسدود می‌شود. این موقعیت باعث می‌شود که کاربران نسبت به تعامل با صفحه مشکلاتی را تجربه کنند، زیرا ممکن است نتوانند به سرعت به اجزاء تعاملی صفحه دسترسی پیدا کنند.

معیار TBT به طور خلاصه مجموع زمان‌هایی را که Main Thread برای انجام وظایف طولانی در این بازه زمانی مسدود شده است، نشان می‌دهد. بهبود TBT می‌تواند به بهبود کلی تجربه کاربری و افزایش نرخ تبدیل وب‌سایت کمک کند، زیرا کاهش زمان مسدود شدن Main Thread موجب افزایش پاسخگویی سریع‌تر صفحه به تعاملات کاربران خواهد شد.

برای مثال، نمودار زیر از رشته اصلی یک مرورگر را طی بارگذاری یک صفحه درنظر بگیرید. خط زمانی پایین شامل 5 وظیفه است که سه تای آن‌ها وظایفی طولانی هستند چون بیشتر از 50 میلی‌ثانیه طول کشیده‌اند.  نمودار پایین زمان مسدود شدن هر وظیفه طولانی را نشان می‌دهد:

(200+40+105=345)

مقدار TBT چگونه بر تجربه کاربر اثر می‌گذارد؟

مقدار TBT یا Total Blocking Time، تأثیر بسیار مستقیمی بر تجربه کاربری دارد. وقتی که وظایفی که Main Thread مرورگر باید انجام دهد، مانند بارگذاری منابع یا اجرای اسکریپت‌های جاوااسکریپت، طولانی می‌شود، Main Thread مسدود می‌شود. این امر باعث می‌شود که کاربران نتوانند به طور موثر با صفحه تعامل داشته باشند. مثلاً اگر یک کاربر در حال انتظار برای بارگذاری یک بخش از صفحه است و زمان آن بیشتر از 50 میلی‌ثانیه باشد، این وظیفه به عنوان “وظیفه طولانی” شناخته می‌شود و Main Thread مسدود می‌شود، بنابراین کاربران نمی‌توانند به صورت آنی با صفحه تعامل کنند.

این مسدودیت‌ها باعث افزایش زمانی می‌شوند که کاربر باید منتظر باشد تا صفحه به طور کامل قابل تعامل شود، که به عبارت دیگر TTI یا Time to Interactive طولانی‌تر می‌شود. این باعث خستگی کاربر می‌شود زیرا باید زمان بیشتری صبر کنند و تا زمانی که صفحه قابل تعامل نشود، نمی‌توانند به راحتی از آن استفاده کنند.

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

مقدار TBT چقدر در حالت بهینه باید باشد؟

مقدار TBT یا Total Blocking Time یکی از معیارهای مهم برای ارزیابی عملکرد وب‌سایت است که تأثیر زیادی بر تجربه کاربری دارد. به طور کلی، بر اساس معیارهای Google Lighthouse، مقدار بهینه و خوب TBT باید زیر 300 میلی‌ثانیه باشد. بهترین حالت برای TBT، که به عنوان “صفحه‌ای سریع” شناخته می‌شود، زیر 200 میلی‌ثانیه است. مقادیر بین 200 تا 600 میلی‌ثانیه به عنوان حد وسط در نظر گرفته می‌شوند، در حالی که مقادیر بالای 600 میلی‌ثانیه نشان‌دهنده آن است که صفحه در دسته صفحات کند قرار می‌گیرد که ممکن است به تجربه کاربری منفی بیانجامد.

برای اندازه‌گیری و ارزیابی مقدار TBT، می‌توان از ابزارهایی مانند WebPageTest، Google PageSpeed Insights و Chrome DevTools استفاده کرد. این ابزارها به توسعه‌دهندگان کمک می‌کنند تا عملکرد وب‌سایت خود را در نظر گرفته و بهینه‌سازی‌های لازم را برای کاهش TBT و بهبود تجربه کاربری اعمال کنند. از جمله راهکارهایی که می‌توان برای بهبود TBT انجام داد، بهینه‌سازی و کاهش تعداد و اندازه فایل‌های CSS و جاوااسکریپت، بهینه‌سازی شبکه‌های توزیع منابع، استفاده از فشرده‌سازی منابع و استفاده بهینه از پیش‌بارگذاری منابع اشاره دارد.

راهکارهای بهینه سازی TBTیا Total Blocking Time

راه‌های مختلفی برای بهینه‌سازی مقدار TBT وجود دارد که در زیر به 3 راهکار اصلی اشاره می‌کنیم:

کاهش اسکریپت‌های Third-Party

اسکریپت‌های Third-Party به دلایل مختلفی از جمله جمع‌آوری آمار صفحه، به اشتراک‌گذاری محتوا در شبکه‌های اجتماعی، ویدئوپلیرها و دیگر استفاده‌های مشابه مورد استفاده قرار می‌گیرند. با این حال، این اسکریپت‌ها ممکن است حاوی محتوای غیربهینه باشند که می‌تواند به طور چشمگیری عملکرد صفحه را تحت تأثیر قرار دهد و تعداد درخواست‌های شبکه را افزایش دهد. به منظور بهینه‌سازی و افزایش مقدار Total Blocking Time (TBT)، می‌بایست این اسکریپت‌ها را به حداقل برسانید.

به منظور بهبود عملکرد و کاهش مشکلات احتمالی، توصیه می‌شود که اسکریپت‌های Third-Party را با دقت بررسی و مدیریت کنید. این اقدام شامل ارزیابی نیاز و اهمیت هر اسکریپت، استفاده از جایگزین‌های سبک‌تر، و کاهش تعداد درخواست‌های شبکه می‌شود. همچنین، بهبود نحوه بارگذاری اسکریپت‌ها، مانیتورینگ و به روزرسانی منظم این ابزارها نیز می‌تواند در بهبود کلی عملکرد وب‌سایت شما مؤثر باشد.

با توجه به اهمیت اسکریپت‌های Third-Party در تجربه کاربری و عملکرد سایت، بهینه‌سازی صحیح این ابزارها می‌تواند به بهبود چشمگیری در عملکرد سایت شما منجر شود.

کاهش زمان اجرای جاوا اسکریپت

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

برای بهبود و کاهش این زمان‌ها، می‌توانید از راهکارهای زیر استفاده کنید:

1. بهینه‌سازی کد: کدهای جاوا اسکریپت خود را بهینه کنید، به ویژه از نظر بهینه‌سازی حلقه‌ها و ساختار کد. استفاده از الگوهای بهینه برنامه‌نویسی و بهره‌وری منطقی از منابع، می‌تواند به کاهش زمان اجرا کمک کند.
2. تقسیم کد به بخش‌های کوچک‌تر: به جای استفاده از یک کد بزرگ و یکپارچه، کدها را به بخش‌های کوچک‌تر و مستقل تقسیم کنید. این کار می‌تواند به بهبود قابلیت اجرا و بهره‌وری کمک کند.
3. کاهش استفاده از اسکریپت‌های Third-Party: اسکریپت‌های Third-Party ممکن است به طور ناخواسته به زمان اجرای صفحه اضافه شوند. بنابراین، استفاده‌ی آنها را به حداقل برسانید و فقط از آنها استفاده کنید که واقعاً ضروری باشد.
4. حذف اسکریپت‌های بی‌استفاده: اسکریپت‌هایی که دیگر استفاده نمی‌شوند را حذف کنید. این کار می‌تواند به بهبود کلی عملکرد و کاهش تعداد درخواست‌های شبکه کمک کند.
5. مانیتورینگ و به روزرسانی: مانیتورینگ منظم از عملکرد اسکریپت‌ها و به روزرسانی آنها به وضوح می‌تواند در بهینه‌سازی زمان اجرا و کاهش خطاها مؤثر باشد.

با رعایت این موارد، می‌توانید به طراحی بهینه‌تری برای صفحات وب خود برسید و تجربه کاربری بهتری را برای کاربران فراهم کنید.

کاهش بار Main Thread

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

1. استفاده از Web Workerها: برای اجرای عملیات پرسرعت و پربار پس از Main Thread، از Web Workerها استفاده کنید. این ابزارها اجازه می‌دهند تا کدهای جاوااسکریپت به صورت موازی و در پس‌زمینه اجرا شوند، بدون اینکه به عملکرد و تعامل کاربر تأثیر منفی بگذارند.
2. کاهش زمان ارزیابی اسکریپت: کدهای جاوااسکریپت خود را بهینه‌سازی کنید تا زمان بارگذاری و اجرای آنها کاهش یابد. استفاده از تکنیک‌هایی مانند فشرده‌سازی و تعویض اسکریپت‌های سنگین با جایگزین‌های سبک‌تر می‌تواند مفید باشد.
3. کاهش حجم CSS: فایل CSS خود را بهینه کنید و از فنون فشرده‌سازی استفاده کنید تا حجم فایل‌های CSS را کاهش دهید. این کار می‌تواند به کاهش زمان بارگذاری وب‌سایت کمک کند.
4. حذف کدهای بلااستفاده: کدهای جاوااسکریپت یا CSS که دیگر استفاده نمی‌شوند را حذف کنید تا حجم فایل‌ها کاهش یابد و بارگذاری سریع‌تر صفحه را فراهم آورید.
5. تعویق اجرای کدهای غیرحیاتی: اجرای جاوااسکریپت‌هایی که برای عملکرد اولیه صفحه ضروری نیستند را به تعویق بیندازید. این کار می‌تواند به بهبود اولین تجربه کاربری (First Contentful Paint) کمک کند.

با استفاده از این راهکارها، می‌توانید بار Main Thread را کاهش داده و عملکرد کلی وب‌سایت خود را بهبود بخشید، که این امر می‌تواند تجربه کاربری را بهبود داده و به افزایش تعامل کاربر منجر شود.

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

خلاصه پایانی

با بهبود و بهینه‌سازی امتیاز Total Blocking Time (TBT)، نه‌تنها تجربه کاربری بهبود می‌یابد، بلکه این اقدامات می‌تواند به ارتقای رتبه سایت در موتورهای جستجو و بهبود سئو سایت کمک کند. با کاهش بار Main Thread، مدیریت بهتر اسکریپت‌ها، و بهینه‌سازی مناسب CSS و کدهای جاوااسکریپت، می‌توانید به طور قابل توجهی بهبودی در زمان بارگذاری و پاسخگویی صفحات وب خود داشته باشید. این اقدامات نه‌تنها به تجربه کاربری بهتر منجر می‌شوند بلکه در دراز مدت به بهبود کلی سایت و جلب رضایت کاربران کمک خواهند کرد.