در دنیای امروز، که رقابت آنلاین بیش از هر زمان دیگری داغتر شده، سرعت بارگذاری سایت یکی از عوامل حیاتی در جلب توجه مخاطبان و رتبهبندی موتورهای جستجو است. اگر شما هم صاحب یک کسبوکار آنلاین یا یک وبسایت هستید، قطعاً به دنبال راههایی برای بهبود تجربه کاربری و در نتیجه، افزایش ترافیک و تبدیل کاربران به مشتری هستید. یکی از مقادیر کلیدی که باید به آن توجه کنید، «Total Blocking Time» یا همان TBT است.
TBT یکی از مهمترین شاخصهای عملکرد وبسایت شما است که تأثیر مستقیم بر تجربه کاربری و رتبهبندی سایت در موتورهای جستجو دارد. اما ممکن است برای شما سوال باشد که TBT چیست و چرا باید اینقدر به آن توجه کنید؟ در این مقاله، قصد داریم تا شما را با این مفهوم آشنا کنیم و توضیح دهیم که چگونه میتوانید با مدیریت بهینه TBT، سایت خود را سریعتر، کارآمدتر و کاربرپسندتر کنید.
در آژانس بازاریابی محتوا مهام، بهخوبی میدانیم که سرعت و تجربه کاربری یکی از اصلیترین عواملی است که میتواند به رشد کسبوکار شما کمک کند. از این رو، در این مقاله علاوه بر اینکه به TBT پرداختهایم، به شما راهکارهایی برای بهبود آن و در نهایت بهینهسازی سایت برای موتورهای جستجو خواهیم داد.
به نقل از دی ام روم:
tbt چیست؟ tbt یا Total Blocking Time یکی از فاکتورهای Core Web Vital گوگل است که در سال 2020 معرفی شد. این فاکتور معیار مهمی برای ارزیابی و تعیین رتبهی سایت ما در Page Speed Insights گوگل است. زیرا tbt از یک سو نقش مهمی در تجربه کاربری مخاطبان ما دارد و از سوی دیگر در سئو سایت تاثیرگذار است.
اگر به دنبال خدمات سئو در مشهد هستید، آژانس بازاریابی مهام میتواند با استفاده از استراتژیهای بهروز، رتبه سایت شما را در نتایج جستجو بهبود بخشد.
Tbt یا Total Blocking Time چیست؟
Total Blocking Time (TBT) یکی از مهمترین معیارهای ارزیابی عملکرد سایت در PageSpeed Insights است و در کنار LCP، تأثیر چشمگیری در تعیین امتیاز نهایی سایت شما دارد. این معیار مستقیماً با تجربه کاربری و تعامل کاربر با صفحه مرتبط است و مدت زمانی را اندازهگیری میکند که صفحه سایت به دلیل اجرای تسکهای سنگین، قادر به دریافت ورودی از کاربر (مانند کلیک ماوس، تاچ صفحهنمایش یا فشردن کلیدها) نیست.
اگر بخواهیم سادهتر توضیح دهیم، TBT در واقع کل زمانی است که صفحه برای دریافت و پردازش درخواستهای کاربر مسدود شده است. این زمان از مجموع تمامی تسکهای طولانی بین First Contentful Paint (FCP) و Time to Interactive (TTI) به دست میآید.
تسکهای طولانی و تأثیر آنها بر TBT
برای درک بهتر TBT، باید بدانیم که تسک طولانی چیست. هر تسکی که بیش از ۵۰ میلیثانیه طول بکشد تا توسط مرورگر روی main thread اجرا شود، یک تسک طولانی محسوب میشود. این تسکها، main thread را مسدود میکنند، زیرا مرورگر نمیتواند در میانه اجرای آنها، این فرآیند را متوقف کند یا به درخواست دیگری پاسخ دهد.
مرورگر برای انجام بسیاری از وظایف از جمله پردازش HTML، تجزیه CSS، تعیین استایلها و اجرای جاوااسکریپت، به main thread وابسته است. اگر هر یک از این وظایف بیش از حد استاندارد طول بکشد، مرورگر نمیتواند به درخواستهای کاربر مانند کلیک یا اسکرول پاسخ دهد و در نتیجه، صفحه برای کاربر «بلاک» میشود.
برای محاسبه TBT، زمانهایی که main thread در بین دو شاخص FCP و TTI مسدود بوده را جمع میکنیم. نتیجه این محاسبه همان Total Blocking Time خواهد بود که معیار مهمی برای سنجش تجربه کاربری به حساب میآید.
چرا تسکهای طولانی مشکلساز میشوند؟
main thread وظایف زیادی برای انجام دادن دارد، از جمله تبدیل HTML به DOM، تجزیه CSS، تعیین استایلها و البته اجرای جاوااسکریپت. وقتی فایلهای جاوااسکریپت سنگین یا تسکهای طولانی روی main thread اجرا شوند، هیچ کدام از وظایف دیگر نمیتوانند تا پایان این تسکها اجرا شوند. این یعنی کاربر با یک صفحه «بیپاسخ» مواجه میشود.
تصور کنید کاربری وارد سایت شما شده و میخواهد روی دکمهای کلیک کند یا صفحه را اسکرول کند، اما به دلیل مسدود بودن main thread، هیچ پاسخی دریافت نمیکند. این وضعیت تجربهای ناامیدکننده برای کاربر ایجاد میکند و احتمالاً او سایت شما را ترک خواهد کرد.
TBT و تأثیر آن بر تجربه کاربری
ابزارهایی مثل Gtmetrix چیست از TBT به عنوان یکی از معیارهای کلیدی برای سنجش تجربه کاربری استفاده میکنند. هرچه TBT کمتر باشد، تجربه کاربری روانتر و بهتری ارائه میدهید. برعکس، هرچه main thread مدت بیشتری مشغول انجام تسکهای طولانی باشد، کاربر زمان بیشتری را بدون پاسخ میماند که معمولاً منجر به ترک سایت میشود.در صورتی که نیاز به طراحی سایت حرفهای دارید، آژانس مهام با تیم طراحی مجرب خود، راهحلهای منحصر به فرد و متناسب با نیازهای شما ارائه میدهد.
به بیان سادهتر، TBT به شما نشان میدهد که چقدر سایت شما در پاسخگویی به کاربران سریع و کارآمد عمل میکند. اگر این زمان بالا باشد، نه تنها کاربران از سایت شما راضی نخواهند بود، بلکه گوگل نیز این موضوع را در امتیازدهی به سایت شما لحاظ کرده و رتبه سایت شما در نتایج جستجو کاهش پیدا میکند.
Total Blocking Time یکی از معیارهای کلیدی در سنجش عملکرد سایت است که تأثیر مستقیمی بر تجربه کاربری و سئو دارد. اگر میخواهید کاربران تجربهای روان و بدون تأخیر داشته باشند، لازم است زمان TBT را به حداقل برسانید. این کار با بهینهسازی تسکهای جاوااسکریپت، حذف کدهای غیرضروری و استفاده از تکنیکهای بهینهسازی کد امکانپذیر است. به یاد داشته باشید که هر ثانیه تأخیر میتواند منجر به از دست دادن یک مشتری بالقوه شود.برای دریافت خدمات سئو و افزایش ترافیک سایت خود، آژانس مهام با تیم متخصص خود آماده است تا شما را در این مسیر هدایت کند.
چگونه Lighthouse امتیاز TBT شما را تعیین میکند؟
امتیاز TBT نشاندهنده مقایسه زمان TBT سایت شما با زمان مشابه در ۱۰,۰۰۰ سایت برتر هنگام بارگذاری در گوشیهای همراه است. در این مقایسه، حتی صفحات خطای ۴۰۴ نیز در نظر گرفته میشوند تا دید بهتری از عملکرد سایتها به دست آید.
اگر TBT سایت شما بین ۰ تا ۳۰۰ میلیثانیه باشد، اوضاع خیلی خوب است و TBT شما به عنوان یک سایت سریع شناخته میشود. اما اگر این زمان بین ۳۰۰ تا ۶۰۰ میلیثانیه قرار بگیرد، Lighthouse احتمالاً آن را به عنوان یک TBT متوسط ارزیابی خواهد کرد. در صورتی که TBT شما بیشتر از ۶۰۰ میلیثانیه باشد، به این معناست که TBT سایت شما کند است و نیاز به بهینهسازی جدی دارد.
گوگل چگونه TBT را اندازهگیری میکند؟
برای درک بهتر چگونگی اندازهگیری TBT، بیایید با یک مثال واقعی این موضوع را بررسی کنیم.
فرض کنید ما ۴ تسک مختلف داریم که هرکدام بر روی main thread اجرا میشوند. زمان اجرای این تسکها به شرح زیر است:
- تسک اول: ۲۶۰ میلیثانیه
- تسک دوم: ۳۰ میلیثانیه
- تسک سوم: ۱۰۰ میلیثانیه
- تسک چهارم: ۶۰ میلیثانیه
چطور گوگل TBT را اندازهگیری میکند؟
برای محاسبه TBT، دو مرحله باید انجام دهیم:
- محاسبه زمان بلاک هر تسک
- جمع کردن زمان بلاک تمامی تسکها
یادآوری میکنیم که تنها زمانهایی که بیشتر از ۵۰ میلیثانیه طول میکشند، به عنوان زمان بلاک در نظر گرفته میشوند. حالا هر یک از تسکها را بررسی میکنیم:
- تسک اول: زمان اجرای آن ۲۶۰ میلیثانیه است. از آنجایی که این تسک بیشتر از ۵۰ میلیثانیه طول کشیده، باید از آن ۲۱۰ میلیثانیه (یعنی ۲۶۰ – ۵۰) به عنوان زمان بلاک در نظر گرفته شود.
- تسک دوم: زمان این تسک ۳۰ میلیثانیه است، که کمتر از ۵۰ میلیثانیه است. پس تاثیری در TBT ندارد.
- تسک سوم: این تسک ۱۰۰ میلیثانیه طول میکشد. ۵۰ میلیثانیه از آن به عنوان زمان بلاک محاسبه میشود.
- تسک چهارم: این تسک ۶۰ میلیثانیه زمان میبرد. ۱۰ میلیثانیه آن به عنوان زمان بلاک در نظر گرفته میشود (یعنی ۶۰ میلیثانیه – ۵۰ میلیثانیه).
محاسبه مجموع زمان بلاک
حالا که زمان بلاک هر تسک را محاسبه کردیم، باید این زمانها را با هم جمع کنیم:
- زمان بلاک تسک اول: ۲۱۰ میلیثانیه
- زمان بلاک تسک سوم: ۵۰ میلیثانیه
- زمان بلاک تسک چهارم: ۱۰ میلیثانیه
با جمع کردن این زمانها، میبینیم که TBT کل برابر با ۲۷۰ میلیثانیه میشود.
چه تفاوتی بین TBT و TTI وجود دارد؟
در نگاه اول، ممکن است TBT و TTI به نظر برسند که کاملاً مشابه هستند؛ اما با وجود شباهتهایی که دارند، این دو معیار مقادیر مختلفی را اندازهگیری میکنند و هرکدام نقشی خاص در ارزیابی تجربه کاربری دارند.
TTI (Time to Interactive) چیست؟
TTI به شما میگوید که چقدر طول میکشد تا صفحهی شما به طور کامل تعاملپذیر شود. یعنی تا زمانی که کاربر بتواند با صفحه به راحتی تعامل داشته باشد و هیچ تأخیری در واکنشها وجود نداشته باشد. این معیار معمولاً به ثانیه سنجیده میشود و زمان دقیق لازم برای رسیدن به وضعیت «تعاملپذیری کامل» را اندازهگیری میکند.
TBT (Total Blocking Time) چیست؟
در مقابل، TBT مدت زمانی را اندازهگیری میکند که صفحه قادر به پاسخگویی به ورودیهای کاربر نبوده و در واقع، ورودیها مسدود شدهاند. این مسدود شدن به دلیل اجرا شدن تسکهای طولانی روی main thread است که مانع از تعامل فوری صفحه با کاربر میشود.
تفاوت اصلی بین TBT و TTI
در حالی که TTI به شما میگوید چقدر طول میکشد تا صفحه کاملاً تعاملی شود، TBT دقیقاً نشان میدهد که چقدر طول میکشد تا صفحه بتواند به ورودیهای کاربر پاسخ دهد، به ویژه زمانی که تسکهای سنگین در حال اجرا روی main thread هستند.
TBT به عبارتی، زمان بلاک شدن صفحه است که این زمان بین First Contentful Paint (FCP) و TTI رخ میدهد. یعنی TBT اندازهگیری میکند که چقدر طول میکشد تا صفحه پس از لود شدن محتوا، قادر به تعامل با کاربر شود. در این مدت، هرگونه تأخیر در واکنش صفحه به ورودیهای کاربر، به عنوان زمان بلاک در نظر گرفته میشود.
نقش FCP در این فرآیند
صفحه دقیقاً چه زمانی محتوای مفید را نمایش میدهد؟ این سؤال را FCP (First Contentful Paint) پاسخ میدهد. FCP زمانی را اندازهگیری میکند که اولین محتوای قابل مشاهده، چه به صورت متن و چه تصویر، روی صفحه نمایش داده میشود. برای سفارش تولید محتوا با کیفیت و هدفمند، آژانس بازاریابی مهام خدماتی متناسب با نیاز شما ارائه میدهد تا محتوای شما تأثیر بیشتری داشته باشد. پس از این زمان، TBT وارد عمل میشود و زمانی که بین FCP و TTI میگذرد، به عنوان زمان بلاک برای TBT محاسبه میشود.بازاریابی محتوا چیست و چرا برای کسبوکارها ضروری است؟ در این راستا، آژانس مهام به شما کمک میکند تا استراتژیهای مؤثر در بازاریابی محتوا را طراحی و اجرا کنید.
چرا TBT مهم است؟
در طول زمان بین FCP و TTI، اگر کاربر بخواهد با صفحه تعامل کند (مثلاً کلیک یا اسکرول کند) و main thread در حال اجرای تسکهای سنگین باشد، تاخیر قابل توجهی در واکنش به درخواست کاربر ایجاد میشود. اینجاست که TBT وارد میشود و کمک میکند تا شدت این تأخیرها کنترل شود و تجربه کاربری بهبود یابد.
چگونه TBT سایت خود را بهبود بدهیم؟
برای شروع، باید ببینیم که چه عواملی باعث ایجاد تسکهای طولانی میشود و چگونه میتوان آنها را شناسایی کرد. برای این کار، به Performance panel در DevTools کروم مراجعه کنید و فرآیندهای بارگذاری سایت خود را تجزیه و تحلیل کنید. از علل شایع تسکهای طولانی به موارد زیر اشاره میکنیم:
۱. بارگذاری، تجزیه یا اجرای غیرضروری جاوااسکریپت
یکی از رایجترین دلایل تسکهای طولانی، بارگذاری یا اجرای کدهای جاوااسکریپت غیرضروری است. در حین تجزیه و تحلیل کدهای خود در Performance panel، ممکن است متوجه شوید که main thread در حال انجام کارهایی است که برای بارگذاری صفحه الزامی نیستند. به عنوان مثال، ممکن است کدهایی که برای عملکرد صفحه لازم نیستند، هنوز در حال اجرا باشند و باعث کندی شوند.
برای بهبود این وضعیت، میتوانید اقدامات زیر را انجام دهید:
- تقسیم کدها: تقسیم کد جاوااسکریپت به بخشهای کوچکتر و بارگذاری آنها به صورت lazy load میتواند زمان اجرای main thread را کاهش دهد.
- حذف کدهای بلااستفاده: از بین بردن کدهای جاوااسکریپت غیرضروری که هیچ تاثیری بر عملکرد صفحه ندارند.
- بارگذاری کارآمد JavaScript های شخص ثالث: بهینهسازی نحوه بارگذاری کدهای Third-Party جاوااسکریپت و استفاده از روشهایی مانند async و defer میتواند کمککننده باشد.
۲. استیتمنتهای ناکارآمد در جاوااسکریپت
استیتمنتهای ناکارآمد جاوااسکریپت نیز یکی دیگر از عواملی است که میتواند باعث طولانی شدن تسکها و مسدود شدن main thread شود. بهعنوان مثال، ممکن است در هنگام تجزیه و تحلیل کد خود در Performance panel، با عبارتی مانند querySelectorAll(‘a’) روبهرو شوید که تمام لینکهای صفحه را پیدا کرده و ممکن است بیش از ۲۰۰۰ نود (node) را برگرداند. این نوع استیتمنتها که به جستجوی زیادی نیاز دارند، میتوانند باعث ایجاد تاخیر در پردازش و بارگذاری صفحه شوند.
برای بهبود این وضعیت، باید به کد خود نگاه دقیقتری بیندازید و آن را بهینه کنید:
- استفاده از سلکتورهای خاصتر: برای مثال، به جای استفاده از querySelectorAll(‘a’) که تمام لینکها را انتخاب میکند، میتوانید از سلکتورهایی استفاده کنید که تعداد کمتری نود برمیگرداند. مثلاً میتوانید به جای a فقط لینکهایی که دارای کلاس خاصی هستند را جستجو کنید (querySelectorAll(‘.special-link’)).
- این تغییرات به طور چشمگیری میتواند باعث کاهش زمان بلاکشدن صفحه و بهبود امتیاز TBT شما شود.
چگونه بررسی کنیم کدام تسکها باعث تاثیر منفی بر TBT میشود؟
برای تحلیل عملکرد صفحه و شناسایی تسکهای طولانی که تأثیر منفی بر TBT دارند، اولین قدم مراجعه به Performance panel در DevTools کروم است. مراحل زیر را دنبال کنید:
- به صفحهای که میخواهید تحلیل کنید بروید.
- روی صفحه راست کلیک کرده و گزینه «Inspect» را انتخاب کنید.
- از تبهای موجود، روی «Performance» کلیک کنید.
- حالا روی گزینه «Reload» کلیک کنید و منتظر بمانید تا کروم تحلیل خود را تکمیل کند.
کدام تسکها تأثیر منفی بر TBT دارند؟
بعد از بارگذاری کامل، تحلیلی دقیق از نحوه عملکرد صفحه خواهید دید. در بخش «main»، تسکها با رنگهای مختلف مشخص شدهاند. اگر تسکی را مشاهده کردید که به رنگ خاکستری است و بخش کوچکی از آن قرمز رنگ است، بدانید که یک تسک طولانی پیدا کردهاید. برای بررسی دقیقتر، نشانگر موس را روی این تسک ببرید تا زمان دقیق اجرای آن روی main thread نمایش داده شود.
استفاده از تب Network برای بررسی مشکلات TTI
برای درک بهتر مشکلات مرتبط با TTI، میتوانید از تب «Bottom-Up» در DevTools استفاده کنید. این بخش اطلاعاتی جامع درباره هر تسک ارائه میدهد و شما را با جزئیات عملکرد آنها آشنا میکند. از این بخش میتوانید تمام فعالیتهایی که باعث تأخیر میشوند را تحلیل کنید.
استفاده از Lighthouse Audit برای بررسی TTI و TBT
راهکار دیگر برای شناسایی مشکلات TBT و TTI، استفاده از ابزار Lighthouse Audit است. برای دسترسی به این ابزار:
- روی صفحه راست کلیک کرده و گزینه «Inspect» را انتخاب کنید.
- این بار از تبها، روی «Lighthouse» کلیک کنید.
- دستههایی که میخواهید بررسی کنید (مانند Performance) را انتخاب کرده و روی گزینه «Generate report» کلیک کنید.
Lighthouse گزارشی جامع از عملکرد سایت ارائه میدهد و پیشنهادهایی برای بهبود ارائه میکند. این گزارش معمولاً شامل نکاتی برای کاهش تأثیر Third-Party JavaScript و به حداقل رساندن لود main thread است. این پیشنهادها را میتوانید در بخش «Diagnostics» مشاهده کنید.
پیشنهادهایی برای بهبود TBT
- کاهش تأثیر کدهای Third-Party: یکی از دلایل اصلی کندی TBT، استفاده از کدهای شخص ثالث سنگین است که بار زیادی به مرورگر تحمیل میکنند.
- به حداقل رساندن لود Main Thread: با بهینهسازی کدها و حذف بخشهای غیرضروری میتوانید بار کاری main thread را کاهش دهید.
هر دو ابزار DevTools و Lighthouse اطلاعات ارزشمندی برای شناسایی تسکهای طولانی و مشکلات مرتبط با TBT ارائه میدهند. اگرچه Lighthouse جزئیات تسکها را به شما نشان نمیدهد، اما شما را با مشکلات اصلی و راهحلهای بهینهسازی آشنا میکند. استفاده از این ابزارها و اعمال تغییرات پیشنهادی میتواند تأثیر چشمگیری در بهبود امتیاز TBT و تجربه کاربری سایت داشته باشد.
چگونه امتیاز عملکرد کلی خود را بهبود بدهیم؟
تا زمانی که دلیل خاصی برای تمرکز روی یک معیار خاص نداشته باشید، بهترین رویکرد این است که عملکرد کلی سایت خود را بهبود دهید. برای اینکه متوجه شوید کدام تغییرات بیشترین تأثیر را بر عملکرد سایت شما دارند، میتوانید از قسمت Opportunities در گزارش Lighthouse استفاده کنید.
گزارش Opportunities به شما نشان میدهد که کدام قسمتهای سایت شما نیاز به بهبود دارند و چگونه میتوانید با انجام تغییرات خاص، عملکرد را ارتقا دهید. این گزارش پیشنهادهایی برای بهینهسازی TBT، LCP، FCP و دیگر معیارهای عملکردی ارائه میکند که میتوانند تأثیر زیادی در تجربه کاربری سایت شما داشته باشند. با توجه به این پیشنهادات، میتوانید به راحتی اولویتها را تعیین کرده و تغییرات مؤثری را اعمال کنید که عملکرد سایت شما را بهبود دهد و در نهایت، امتیاز کلی سایت شما در PageSpeed Insights افزایش یابد.
اهمیت معیار tbt در رتبه بندی سایتها
همانطور که از تعریف TBT (Total Blocking Time) مشخص است، این فاکتور ارتباط مستقیمی با تجربه کاربری دارد. از آنجا که تجربه کاربری (UX) برای موتورهای جستجو، بهویژه گوگل، اهمیت بالایی دارد، TBT میتواند تأثیر زیادی بر سئو و رتبهبندی سایت در صفحات نتایج جستجو (SERP) داشته باشد. برای توضیح بهتر این موضوع، TBT را از دو جنبه تجربه کاربری و سئو بررسی خواهیم کرد.اگر به دنبال مشاوره سئو هستید، متخصصین آژانس مهام آمادهاند تا استراتژیهای مناسب برای بهبود سایت شما را ارائه دهند.
TBT و تجربه کاربری
در دنیای دیجیتال امروز، تعامل سریع و بیدردسر با سایت یکی از اصلیترین نیازهای کاربران است. به همین دلیل، گوگل و سایر موتورهای جستجو به سایتهایی که تجربه کاربری روان و سریعتری ارائه میدهند، ارج مینهند. TBT دقیقاً نشان میدهد که سایت ما در برقراری ارتباط سریع با کاربر تا چه حد موفق است. هرچه مقدار TBT سایت کمتر باشد، یعنی تعامل بهتری با کاربر برقرار شده و تجربه کاربری بهبود مییابد. این امر به طور مستقیم با SEO در ارتباط است، چرا که گوگل سایتهایی را که تجربه کاربری رضایتبخشتری دارند، ترجیح میدهد.
دیجیتال مارکتینگ چیست و چگونه میتواند به کسبوکار شما کمک کند؟ آژانس مهام در این زمینه خدمات مختلفی ارائه میدهد که میتواند شما را در مسیر رشد آنلاین یاری کند.
TBT و سئو
TBT یکی از فاکتورهای Core Web Vitals گوگل است، که مجموعهای از معیارهای مهم برای ارزیابی عملکرد سایت به حساب میآید. از طرفی، تجربه کاربری نیز یکی از عوامل تعیینکننده در رتبهبندی سایتها است. وقتی TBT سایت را بهینه میکنید، تجربه کاربری بهتر میشود و گوگل هم این بهبود را در نظر میگیرد. به این ترتیب، امتیاز شما در شاخصهایی که برای رتبهبندی گوگل اهمیت دارند، بالا میرود و در نهایت میتوانید انتظار داشته باشید که رتبه سایت شما در نتایج جستجو بهبود یابد. اگر به دنبال آشنایی بیشتر با ارتباط بین تجربه کاربری و سئو هستید، پیشنهاد میکنیم مقالهی سئو فنی را مطالعه کنید.
بهترین مقدار TBT برای سئو سایت
برای بهینهسازی سئو و تجربه کاربری، مقدار TBT باید کمتر از ۳۰۰ میلیثانیه باشد. طبق ارزیابیهای گوگل و گزارشهای Google Lighthouse، اگر TBT سایت شما بین ۰ تا ۳۰۰ میلیثانیه باشد، نشاندهنده عملکرد عالی است که تجربه کاربری روان و بدون تأخیر را فراهم میکند. اگر TBT بین ۳۰۰ تا ۶۰۰ میلیثانیه باشد، سایت هنوز وضعیت خوبی دارد، اما نیاز به بهبود دارد. TBT بالای ۶۰۰ میلیثانیه میتواند بر تجربه کاربری و رتبهبندی سئو تأثیر منفی بگذارد و باید فوراً بهینهسازی شود.برای اطلاع از جزئیات سئو خارجی و تاثیر آن بر رتبه سایت خود، آژانس مهام مشاورههای تخصصی در این زمینه ارائه میدهد.
چرا کم بودن TBT مهم است؟
کاهش TBT باعث بهبود تجربه کاربری و کاهش زمان پاسخگویی به ورودیهای کاربر میشود، که به نوبه خود تأثیر مثبتی در رتبهبندی گوگل دارد. گوگل به سایتهایی که تجربه کاربری بهتری ارائه میدهند، اولویت میدهد، و سایتهای با TBT بالا میتوانند باعث افزایش نرخ پرش (bounce rate) شوند و به رتبهبندی منفی در نتایج جستجو منجر شوند.
برای یادگیری تکنیکهای آموزش طراحی سایت از صفر تا صد، آژانس بازاریابی مهام دورههای آموزشی متنوعی برای علاقهمندان به طراحی سایت برگزار میکند.
ابزارهای اندازه گیری tbt سایت
برای اینکه بدانید وضعیت TBT سایت شما چگونه است و بتوانید برنامهای برای بهبود آن تنظیم کنید، باید ابتدا مقدار Total Blocking Time سایت خود را اندازهگیری کنید. خوشبختانه، ابزارهای مختلفی برای انجام این کار وجود دارد. در اینجا به معرفی ابزارهایی میپردازیم که برای اندازهگیری TBT سایت معتبر و کاربردی هستند.
1. Google PageSpeed Insights
یکی از بهترین و معتبرترین ابزارها برای بررسی TBT سایت، Google PageSpeed Insights است. این ابزار به شما گزارشی دقیق از عملکرد سایتتان در قالب Core Web Vitals ارائه میدهد و میزان TBT را به طور شفاف نمایش میدهد.
2. Google Lighthouse
یکی از ابزارهای دیگر، ابزار Google Lighthouse است که به طور خاص برای بررسی عملکرد، دسترسیپذیری، سئو و دیگر فاکتورها طراحی شده است. Lighthouse میتواند اطلاعات دقیقتری درباره مشکلات و بهبودهای ممکن در TBT سایت به شما بدهد. برای آموزش ابزار Google lighthouse این مقاله از مهام را مطالعه کنید.
برای طراحی سایت در مشهد، آژانس بازاریابی مهام با ارائه خدمات حرفهای در این زمینه به شما کمک میکند تا سایت خود را به شکلی کاربرپسند و بهینه بسازید.
سایر ابزارهای مفید:
- GTMetrix
- Chrome DevTools
- WebPageTest
- Pingdom
- SpeedCurve
این ابزارها نیز میتوانند به شما کمک کنند تا میزان TBT سایت خود را اندازهگیری کرده و به صورت دقیقتری مشکلات موجود را شناسایی و رفع کنید.اگر هنوز نمیدانید که سئو چیست، آژانس مهام با ارائه توضیحات کامل و راهنماییهای کاربردی، شما را با این مفاهیم آشنا میکند.
معرفی 2 تکنیک سریع برای شناسایی عوامل افزایش tbt
برای اینکه بتوانیم تحلیل درستی از نحوه عملکرد صفحات سایت خود داشته باشیم و Long taskهایی که باعث افزایش TBT میشوند را شناسایی کنیم، دو روش سریع و کارآمد وجود دارد:
1. Lighthouse Audit در Google Chrome
اولین روش استفاده از Lighthouse Audit است که بهراحتی از طریق ابزار DevTools در گوگل کروم قابل دسترسی است. این ابزار به شما کمک میکند که دقیقاً ببینید کدام تسکها باعث بلاک شدن main thread میشوند و در نتیجه TBT را افزایش میدهند. برای استفاده از این ابزار:
- وارد صفحه مورد نظر در مرورگر کروم شوید.
- روی صفحه راست کلیک کرده و گزینه «Inspect» را انتخاب کنید.
- در پنجره باز شده، به تب Performance بروید.
- روی دکمه Reload کلیک کنید و منتظر بمانید تا کروم فرآیند تحلیل صفحه را به اتمام برساند.
پس از لود شدن، گزارشی دقیق از نحوه عملکرد صفحه به شما نمایش داده میشود. در این گزارش، شما میتوانید تسکهای مختلف را در بخش main مشاهده کنید.
- Long taskها با یک فلگ قرمز مشخص میشوند.
- با بردن موس روی هر تسک، مدت زمان اجرای آن تسک نمایش داده میشود.
- اگر بخواهید جزئیات بیشتری از هر تسک مشاهده کنید، میتوانید روی Bottom-Up کلیک کنید تا توضیحات دقیقتری از هر تسک به دست آورید.
پینهاد میکن مسری هم به مقاله سرچ کنسول چیست؟ از مهام برای کسب اطلاعات جامع در موردذ این ابزار که یکی از قویترین ابزارهایی است که میتواند در مسیر موفقیت وبسایتتان به شما کمک کند..
2. استفاده از DevTools Google Chrome
روش دوم استفاده از ابزار DevTools است. برای این کار:
- مانند روش قبلی، وارد صفحه سایت خود در کروم شوید و گزینه Inspect را انتخاب کنید.
- در پنجره باز شده، به بخش Lighthouse بروید.
- در این بخش میتوانید دستهای که میخواهید تحلیل کنید را انتخاب کنید (مثلاً Performance، SEO و غیره) و همچنین نوع نمایش گزارش (موبایل یا دسکتاپ) را تعیین کنید.
- بعد از انتخاب، روی Generate Report کلیک کنید تا کروم گزارشی کامل از عملکرد صفحه شما ارائه دهد.
این گزارش شامل پیشنهاداتی برای بهبود عملکرد صفحه شما خواهد بود. یکی از این پیشنهادات معمولاً کاهش TBT است. کروم به شما پیشنهاداتی میدهد که میتوانید از آنها برای کاهش زمان بلاک شدن و بهبود عملکرد سایت استفاده کنید.
با استفاده از این دو روش میتوانید بهطور مؤثر TBT سایت خود را شناسایی کنید و Long taskهایی که باعث افت عملکرد سایت شما میشوند را پیدا کرده و برطرف کنید. این اقدامات نهتنها به بهبود تجربه کاربری سایت شما کمک میکند، بلکه میتواند به افزایش سرعت بارگذاری و در نهایت بهبود رتبه سایت شما در نتایج جستجو نیز منجر شود.پیشنهاد میکنم سری هم به مقاله افزایش سرعت سایت از مهام بزنید.
راهکارهای بهینهسازی tbt سایت
در بخش قبل، ابزارهای مختلفی را برای شناسایی تسکهای طولانی و بررسی پیشنهادات گوگل برای بهبود TBT سایت معرفی کردیم. حالا که به این نکته پی بردیم که TBT ارتباط مستقیمی با تجربه کاربری و سئو دارد، وقت آن است که اقداماتی مؤثر برای بهبود آن انجام دهیم. یکی از مهمترین کارها برای کاهش TBT، اصلاح کدهای بلاکشدهای است که باعث ایجاد تسکهای طولانی میشوند. در اینجا به بررسی چند راهکار مهم و مؤثر برای بهینهسازی TBT میپردازیم:
آژانس مهام دورههای آموزش سئو را به صورت جامع برگزار میکند تا بتوانید دانش خود را در زمینه بهینهسازی موتور جستجو ارتقا دهید.
راهکار | شرح و توضیحات |
1. کاهش تعداد درخواستهای اسکریپتهای سایت | – استفاده از Lazy Loading برای بارگذاری اسکریپتها در زمان نیاز. – حذف اسکریپتهای غیر ضروری. |
2. کاهش سایز اسکریپتهای Main Thread | – فشردهسازی (Minify) کدها برای کاهش حجم فایلها. – استفاده از Tree Shaking برای حذف کدهای اضافی. – تقسیمبندی کدها به بخشهای کوچکتر (Code Splitting). |
3. کاهش تعداد Long Task در Main Thread | – شناسایی و بهینهسازی تسکهای طولانی با استفاده از ابزارهایی مثل Chrome DevTools. – استفاده از Web Workers برای پردازشهای سنگین. |
4. حذف کدهای جاوا اسکریپت و CSS غیر ضروری | – شناسایی و حذف کدهای جاوا اسکریپت و CSS که به صفحه مربوط نیستند. – فقط بارگذاری کدهای مورد نیاز برای هر صفحه. |
5. فشردهسازی فایلهای جاوا اسکریپت و CSS | – استفاده از ابزارهایی مانند UglifyJS یا Terser برای فشردهسازی جاوا اسکریپت. – استفاده از CSSNano برای فشردهسازی فایلهای CSS. |
6. اجرای کد اسپلیتینگ (Code Splitting) | – تقسیمبندی کدهای جاوا اسکریپت به قطعات کوچکتر. – استفاده از ابزارهایی مانند Webpack یا Parcel برای پیادهسازی کد اسپلیتینگ. |
1. کاهش تعداد درخواستهای اسکریپتهای سایت
یکی از اولین قدمها برای بهبود TBT، کاهش درخواستهای اضافی و اسکریپتهای غیر ضروری است. این درخواستها زمانی که در Main Thread بارگذاری میشوند، میتوانند باعث Long Task و تأخیر در بارگذاری سایت شوند. برای رفع این مشکل:
- از Lazy Loading برای بارگذاری اسکریپتها استفاده کنید.
- درخواستهای JavaScript و CSS را تنها زمانی ارسال کنید که به آنها نیاز دارید.
- اسکریپتهای غیر ضروری را شناسایی و حذف کنید.
2. کاهش سایز اسکریپتهای Main Thread
کاهش سایز اسکریپتهای Main Thread میتواند تأثیر زیادی در کاهش TBT داشته باشد. اگر کدهای جاوا اسکریپت یا دیگر اسکریپتها بیش از حد بزرگ باشند، بارگذاری آنها باعث مسدود شدن Main Thread و به وجود آمدن Long Task میشود. برای این کار:
- اسکریپتها را فشرده (Minify) کنید.
- از Tree Shaking استفاده کنید تا تنها کدهای مورد نیاز شما بارگذاری شوند.
- کدهای جاوا اسکریپت را تقسیم (Split) کرده و به بخشهای کوچکتر تقسیم کنید تا در زمان مناسب بارگذاری شوند.
3. کاهش تعداد Long Task در Main Thread
یکی دیگر از مهمترین نکات برای کاهش TBT، شناسایی و بهینهسازی Long Task است که بر روی Main Thread اجرا میشوند. با استفاده از ابزارهایی مانند Chrome DevTools و بررسی بخشهای مختلف Performance Panel، میتوانید تسکهایی که بیش از 50 میلیثانیه طول میکشند را شناسایی کنید و آنها را بهینهسازی کنید. برای کاهش Long Task:
- کدهای جاوا اسکریپت را به طور بهینه تقسیمبندی کنید.
- Asynchronous بارگذاری کنید، به طوری که بارگذاری اسکریپتها تا حد امکان غیرهمزمان باشد.
- از Web Workers برای پردازشهایی که نیاز به اجرای زیاد دارند، استفاده کنید تا بار اضافی از روی Main Thread برداشته شود.
4. حذف کدهای جاوا اسکریپت و CSS غیر ضروری
هر گونه کد جاوا اسکریپت و CSS که برای صفحه ضروری نیست، میتواند زمان بارگذاری سایت را افزایش دهد و باعث Long Task شود. برای بهینهسازی TBT:
- کدهای غیرضروری را شناسایی و حذف کنید.
- فقط کدهایی را که در صفحه نیاز است، بارگذاری کنید.
5. فشردهسازی فایلهای جاوا اسکریپت و CSS
Minify و فشردهسازی فایلهای JavaScript و CSS باعث کاهش حجم فایلها میشود که در نتیجه زمان بارگذاری سریعتر میشود. برای انجام این کار:
- از ابزارهایی مانند UglifyJS یا Terser برای فشردهسازی جاوا اسکریپت استفاده کنید.
- برای CSS از ابزارهایی مانند CSSNano استفاده کنید تا فایلها فشرده و سریعتر بارگذاری شوند.
6. اجرای کد اسپلیتینگ (Code Splitting) برای Assets جاوا اسکریپت
کد اسپلیتینگ به این معناست که شما کدهای جاوا اسکریپت خود را به قطعات کوچکتر تقسیم میکنید تا بارگذاری آنها تنها زمانی که به آن نیاز دارید انجام شود. این کار باعث میشود بارگذاری سایت سریعتر انجام شود و Main Thread مدت کمتری مسدود شود. برای پیادهسازی این تکنیک:
- از ابزارهایی مانند Webpack یا Parcel برای تقسیمبندی کد استفاده کنید.
- تنها بخشهای مورد نیاز در هر زمان بارگذاری شوند.
برای کاهش TBT و بهبود سئو و تجربه کاربری، باید تسکهای طولانی و بلاک شده را شناسایی کرده و اقدامات بهینهسازی لازم را انجام دهیم. این کار با کاهش تعداد درخواستهای اسکریپتها، کاهش سایز اسکریپتها، بهینهسازی کدهای جاوا اسکریپت و CSS، و استفاده از تکنیکهایی مانند Lazy Loading و Code Splitting امکانپذیر است. با استفاده از این روشها، میتوانیم TBT سایت خود را بهینه کنیم و تأثیر مثبت آن را در رتبهبندی سئو و تجربه کاربری مشاهده کنیم.برای یادگیری سئو داخلی و تکنیکهای بهینهسازی صفحات سایت خود، آژانس مهام به شما کمک میکند تا در جستجوگرها رتبه بهتری کسب کنید.
بهینهسازی TBT برای سئو: کلید سرعت و تجربه کاربری بهتر!
برای موفقیت در سئو و جلب رضایت کاربران، TBT (Total Blocking Time) یکی از مهمترین معیارهایی است که باید به آن توجه ویژهای داشته باشید. با کاهش TBT، صفحه شما سریعتر بارگذاری میشود و تعامل بهتری با کاربر برقرار میکند. این نه تنها تجربه کاربری را بهبود میبخشد، بلکه به رتبهبندی سایت در گوگل هم کمک میکند. برای بهبود TBT، از راهکارهایی مانند کاهش تعداد درخواستهای اسکریپت، فشردهسازی فایلها، و تقسیمبندی کد استفاده کنید تا بهترین نتیجه را بگیرید و سایت خود را در رقابتهای سئو به صدر برسانید.پیشنهاد میکنم به دلیل اهمیت سئو تصاویر در محتواهای سایت سری هم به مقاله سئو تصاویر چیست؟ از مهام بزنید.
سوالات متداول TBT چیست
TBT چیست و چرا برای سئو اهمیت دارد؟
TBT (Total Blocking Time) مدت زمانی است که صفحه نتواسته به ورودیهای کاربر پاسخ دهد. این معیار مستقیماً بر تجربه کاربری تاثیر میگذارد و در نتیجه بر رتبهبندی سایت در موتور جستجو، به ویژه گوگل، تاثیر دارد.
چه مقدار TBT برای سایت مناسب است؟
برای عملکرد بهینه، مقدار TBT باید کمتر از 300 میلیثانیه باشد. TBT بالای 600 میلیثانیه میتواند به تجربه کاربری و سئو آسیب بزند و باعث کاهش رتبه سایت در نتایج جستجو شود.
چگونه میتوان TBT سایت را بهینه کرد؟
بهینهسازی TBT شامل کاهش تعداد درخواستهای اسکریپت، فشردهسازی سایز اسکریپتها، تقسیم کد (Code Splitting)، حذف کدهای غیرضروری و استفاده از Lazy Loading است.
آیا ابزارهایی برای اندازهگیری TBT وجود دارند؟
بله، ابزارهایی مانند Google Lighthouse، Chrome DevTools، و GTMetrix میتوانند برای اندازهگیری و تحلیل TBT سایت شما استفاده شوند.