آموزش بهینه سازی سرعت TBT در جی تی متریکس GTmetrix

بنابراین برای کاهش زمان صرف شده باید اندازه دارایی رو کاهش دهید که به‌نوبه خود اثر دارایی بر سرعت سایر کارهایی که در Main Thread انجام می‌شود رو کاهش میده. این وظایف شامل تجزیه اسکریپت HTML، محتوای یک صفحه وب (DOM) و اجرای کد CSS و جاوا اسکریپت (JS) است. برای جلوگیری از زمان مسدود شدن زیاد، مرورگر نباید هنگام تجزیه کد و ارائه صفحه با فایل‌های JS و CSS مواجه شود. برای اینکه وبسایت سریع کار کند، باید بگوییم مرورگر چه چیزی را اولویت بندی کند و چه چیزی را ابتدا بارگذاری کند. برای اطمینان از ارائه یک تجربه کاربری مثبت، معیارهای مختلفی وجود دارد که باید بر آنها تمرکز کرد، یکی از آنها TBT یا کل زمان انسداد است. این معیار در جی تی متریکس نزدیک به 25 درصد از کل نمره عملکرد محاسبه شده توسط Lighthouse را در اختیار دارد.

ما در مقاله PageSpeed Insights این ابزار را معرفی کرده و روش کار با آن را به طور کامل شرح دادیم. اولین و معتبرترین ابزار تست tbt ابزار رسمی گوگل یعنی Google Lighthouse است. برای استفاده از DevTools کروم باید وارد بخش Performance panel شویم. ابتدا در صفحه‌ی مورد نظر کلیک راست کرده و گزینه «Inspect» را انتخاب می‌کنیم. باید کمی منتظر بمانیم تا کروم صفحه‌ای مشاور تصویر پایین را نمایش دهد.

همچنین این را هم بدانید که اگرچه این دو فاکتور اهداف مشابهی دارند، اما TBT و TTI در ردیابی جنبه های مختلف پاسخگویی وب سایت متفاوت هستند. TBT مدت زمانی را محاسبه می کند که فاکتورهای اصلی سایت در پاسخگویی به تعاملات کاربر مسدود شده اند و TTI مدت زمانی را که طول می کشد تا یک صفحه کاملاً تعاملی شود اندازه گیری می کند. البته اگر TBT سایتی تا 300 میلی‌ثانیه هم باشد، از نظر گوگل بهینه و قابل قبول است و رنگ سبز را به آن نشان می‌دهد. گوگل برای صفحات وبی که TBT آن‌ها بین 300 تا 600 میلی‌ثانیه است، یک اخطار نارنجی رنگ در نظر می‌گیرد و سرعت سایت آن‌ها را متوسط اعلام می‌کند. در مقابل، صفحاتی کهTBT  بالاتر از 600 میلی‌ثانیه دارند، مطابق با معیارهای Lighthouse اوضاع نگران کننده و سرعت کندی دارند. بهترین روش برای به تعویق انداختن فایل‌های JS استفاده از ویژگی‌های defer و async در تگ‌های Script است.

Core Web Vitals یا همان هسته حیاتی وب، شامل معیارهایی برای سنجیدن تجربه کاربر در یک صفحه وب است که توسط گوگل ارائه شده است. اطلاعات مربوط به این بخش در سرچ کنسول و همچنین پلتفرم‌هایی مانند PageSpeed Insights که سرعت سایت را بر اساس این معیارها می‌سنجند، در اختیار شما قرار می‌گیرد. زمان انسداد کل به شدت با عملکرد جاوا اسکریپت مرتبط است و هر گونه پیشرفت در اجرای جاوا اسکریپت (به طور کلی، بهینه سازی‌هایی که TTI را بهبود می‌بخشد) احتمالاً TBT شما را کاهش می‌دهد. این مثال میتونه شما رو با اهمیت کار main thread مرورگر بیشتر آشنا کنه. شما به‌عنوان کارشناس سئو گاهی روزا پیش میاد که کلی کار دارید از تحقیق کلمات کلیدی گرفته تا انتشار محتوا و آنالیز سایت و … . اونوقت حتماً یه سری از کارهاتون رو باید با تأخیر انجام بدید و مخصوصاً اگه کاری باشه که باید به کارفرما ارائه یا گزارش بدید، مجبورید با تأخیر ارائه بدید که منجر به نارضایتی کارفرما میشه.

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

در مدت زمانی که main thread بلاک شده، درخواست‌ها و ورودی‌های کاربر انجام نمیشه. بنابراین کاربر گمان می‌کنه سایت شما مشکلی داره و از صفحه خارج میشه و تجربه کاربری بدی شکل می‌گیره به همین دلیل باید تا جای ممکن این خطای سرعت رو کاهش داد. توجه داشته باشید که افزایش معیار TBT باعث افزایش مقدار TTI هم میشه یعنی کاربر باید زمان بیشتری صبر کند تا تمام صفحه قابل تعامل شود که همونطور که گفتیم تاثیر منفی روی تجربه کاربری داره. یادآور می‌شویم که در کنار این ترفندها، ساخت سایت در بسترهای اصولی و با کدهای بهینه هم نقش بسیار موثری در جلوگیری از افزایش tbt ایفا می‌کند. اگر سایت خود را در بستر فروشگاه ساز شاپفا راه‌اندازی کنید، می‌توانید از بهینه بودن سرعت سایت و زیرفاکتورهایی آن آسوده خاطر باشید.

با کلیک بر روی Bottom-Up نیز می توانید توضیحات مربوط به هر تسک را مشاهده کنید. شاید بسیاری از افراد تفاوتی را بین TBT و TTI احساس نکرده و این دو معیار را یکسان بدانند.اما با تمام شباهت‌ هایی که دارند، این دو معیار مقادیر مختلفی را اندازه‌گیری می‌کنند. همینطور دو خطای مهم در بخش Structure داریم که اثر مستقیم داره و پیشنهاد میشه بخونید. در این مطلب سعی داریم که یکی از معیارهای non-Core Web Vitals به نام TBT را بررسی کنیم. البته، اگر سؤال یا تجربه‌ای درباره Total Blocking Time دارید، خوشحال می‌شویم در بخش کامنت‌ها با ما در میان بگذارید. واسه اینکه TBT رو بهتر درک کنید، بیاین ببینیم تا Main Thread چیست و چه زمانی بلاک میشه.

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

پیش بارگذاری DNS  می‌تواند وبسایت شما را کمی تقویت کند، زیرا زمان بارگذاری و منابع ناشی از وبسایت دیگر را به حداقل می‌رساند. به عبارت دیگر، پیش بارگذاری DNS  به شما امکان می‌دهد با اسکریپت‌های Third-Party ارتباطات اولیه ایجاد کنید، تأخیر را کاهش داده و نتایج کارآمدتری را به ارمغان بیاورید. برای درک تأثیر TBT بر عملکرد، بار دیگر باید آن را بر روی امتیاز Lighthouse بررسی کنیم. به عنوان معیار تجربه کاربری، TBT در حال حاضر تا 25 درصد از نمره عملکرد جهانی را در اختیار دارد. TBT در Lighthouse v5 وجود نداشت اما در حال حاضر 25 درصد از نمره کل Lighthouse v8 را نشان می‌دهد. اساساً، مرورگر از چیزی که نخ اصلی نامیده می شود برای تجزیه HTML، ساخت DOM، اجرای CSS و جاوا اسکریپت، پردازش رویدادهای کاربر و انجام سایر وظایف مهم استفاده می کند.

شما می‌توانید تمام فایل‌هایHTML ، CSS و JS خود را با هم فشرده کنید تا یک فایل کوچکتر به دست آورید و در نتیجه TBT را کاهش دهید. این گزارش نشان می‌دهد که هر خطا چقدر بر پس انداز تخمینی شما تأثیر می‌گذارد. این شکل از داده‌ها از منابع متعددی مانند Chrome User Experience Reports (CrUX) تهیه می‌شود، جایی که داده‌ها از کاربران دنیای واقعی جمع آوری شده است. برای شناسایی کارهای طولانی که در TBT شما نقش دارند، به دنبال بخش های خاکستری با رنگ قرمز باشید. TBT و FID همچنین از این نظر متفاوت هستند که پاسخگویی در زمان لود شدن را به ترتیب با داده های آزمایشی و میدانی اندازه گیری می کنند.

با این حال، به دلیل ماهیت جهانی اسکریپت‌ها، آنها همیشه بهینه سازی نشده‌اند. این عمل برای پردازش همۀ کد و استایل‌ها باید مؤثر عمل کند زیرا ما می‌خواهیم صفحه ما در اسرع وقت برای بازدیدکنندگان باز شود. ما می‌خواهیم تأثیر خوبی بر کاربران بگذاریم و به آنها نشان دهیم سرعت وب سایت ما چقدر سریع است. بهبود وضعیت بارگزاری سایت و تعامل با کاربر در سریع ترین زمان، از فاکتورهای مهمی است که امروزه گوگل اهمیت زیادی به آن می دهد. در اصل در فرایند بهبود سئو سایت از نظر فنی تمام تلاش شما باید بالابردن سرعت سایت باشد. اگر چه TBT یک فاکتور Core web vital نیست، اما ارتباط نزدیکی با یکی از آنها دارد و آن تاخیر ورودی اول یا First Input Delay (FID.) است.

این امر باعث شده است تا TBT به یک معیار برتر برای بهینه سازی تبدیل شود. با اینکه استفاده از شبکه‌های اجتماعی یا اسکریپت‌های تحلیلی مثل کدهای گوگل آنالیتیکس در سایت ضروری است، اما امکان دارد بر روی عملکرد سایت تاثیر گذاشته و مدت زمان TBT را افزایش دهند. برای جلوگیری از بروز چنین مشکلی، فایل‌های جاوا اسکریپتی که باعث کاهش سرعت سایت شده‌اند را شناسایی کرده و با قرار دادن ویژگی‌های defer یا async در تگ script، لود آن‌ها را به تعویق بیندازید. بهینه‌سازی TBT نیز تأثیر مستقیمی بر تجربه کاربری و افزایش رتبه‌بندی در موتورهای جستجو دارد. با بهبود سرعت بارگذاری وبسایت و کاهش TBT، وبسایت شما احتمالاً بهتر از رقبا در رتبه‌بندی موتورهای جستجو عمل خواهد کرد. الگوریتم‌های موتورهای جستجو اغلب سرعت بارگذاری را به عنوان یکی از عوامل تأثیرگذار در رتبه‌بندی می‌پذیرند، بنابراین بهینه‌سازی TBT می‌تواند به بهبود موقعیت وبسایت در نتایج جستجو کمک کند.

در وردپرس نیز می‌توانید از پلاگین‌هایی مثل autoptimize، Closure Compiler یا wp rocket استفاده کنید. در افزونه wp rocket و در بخش بهینه‌سازی فایل، تیک گزینه‌های فشرده‌سازی فایل‌های CSS و فشرده‌سازی فایل‌های جاوا اسکریپت را فعال کنید. یکی دیگر از کارهایی که برای بهبود سرعت Total Blocking Time می‌توانید انجام دهید، استفاده از قابلیت Prefetch DNS است. هنگامی که کاربر آدرس سایت ما را در مرورگر وارد می‌کند، یک درخواست ارسال شده (HTTP Request) و IP سایت به دست می‌آید. سپس یک درخواست دیگر توسط مرورگر  به سرور سایت ارسال شده و فایل‌ های آن درخواست می‌شود.

با این حال تصور نکنید به سادگی می‌توانید این فاکتور رو بهبود بدهید و باید بدانید برای بهینه سازی آن حداقل بالای ۲۰ مورد اثر گذار هست که ما تنها به تعداد کمی از آنها اشاره کردیم. معیار Total Blocking Time شبیه به معیار First Input Delay در Web Vitals هست. از میانه خردادماه 1400 بود که گوگل استفاده از این معیارها برای رتبه‌بندی صفحات را آغاز کرد. اما این تنها شروع کار بود و این معیارها از آن زمان به بعد بیشتر و بیشتر مورد توجه همه از جمله کارشناسان سئو قرار گرفت. معیارهای حیاتی وب به طور کلی به دو دسته Core Web Vitals و non-Core Web Vitals تقسیم می‌شوند. افزایش نرخ تولید و مصرف محتوا، هدایایی هستند که همچنان در دنیای امروز ما ادامه دارند.

قبل از تعریف TBT بد نیست که دو اصطلاح دیگر را هم مختصر معرفی کنیم تا بهتر متوجه مفهوم اصلی شوید. 1- Chrome DevTools را با کلیک راست روی «Inspect» در صفحه ای که می خواهید آنالیز کنید، یا Ctrl+Shift+I  در Windows و Command+Option+I در Mac را باز کنید. TBT یکی از موارد حیاتی وب و جایگزینی برای معیار تاخیر ورودی (FID) فقط-میدانی است که در PageSpeed ​​Insights دیده می‌شود. این باعث می شود TBT یک معیار مستقل و پرمایه و یک معیار همراه مفید برای TTI باشد. روزهای آخر سال که همه مردم به فکر خرید هستند، یک فرصت طلایی برای کسب‌وکارهاست.

سپس باید روی «Generate report» کلیک کنیم و منتظر پیشنهادها کروم برای بهبود tbt سایت بمانیم. اگر سایتتون رو در میزفا تولز خزش کرده باشید تمام تصاویر با حجم بالا رو برای شما پیدا میکنه و نمایش میده. البته در ابزار کاوش میتونید تمام خطاهای سایتتون رو در کمترین زمان تشخیص بدید و با استفاده از راهکارهای ارائه شده در ابزار، خطاها رو به سرعت برطرف کنید. یکی دیگه از مزایای این ابزار، اولویت بندی خطاهاست تا بتونید اول خطاهای اصلی و مهم رو رفع کنید. در ادامه مهمترین راهکارهای عملی برای بهینه‌سازی زمان مسدود کردن کل صفحه وب رو بررسی می‌کنیم.

این گزارش به شما تفکیک دقیقی از وظایف ارائه نمی دهد، اما شما را به مشکلات عملکردی خاص راهنمایی می کند. همچنین می‌توانید روی «پایین به بالا» کلیک کنید تا شرح مفصلی از هر کار را ببینید. روی دکمه «بارگذاری مجدد» کلیک کنید و منتظر بمانید تا Chrome کار خود را انجام دهد. در نگاه اول، TBT درست مانند Time To Interactive (TTI) به نظر می رسد. اما با وجود مشابه بودن، هر دو معیار در نهایت چیزهای متفاوتی را اندازه گیری می کنند.

در ظاهر، tbt و tti کاملاً شبیه یکدیگر هستند، ولی این دو معیار مقادیر مختلفی را اندازه‌گیری می‌کنند. Tti به ما می‌گوید که چقدر طول می‌کشد تا صفحه کاملاً تعاملی شود، ولی tbt مدت زمانی است که صفحه محتوای مفید را به کاربر نمایش داده و به ورودی‌های او پاسخ می‌دهد. این معیار به تعامل کاربر با صفحه توجه داره و به مجموع زمان‌های بین FCP و TTI که main thread شلوغ بوده و بلاک شده، Total Blocking Time یا مجموع زمان بلاک شدن گفته میشه. پیش بارگذاری DNS تلاشی برای حل نام دامنه قبل از درخواست منابع است. این مهم چه زمانی مفید است؟ اگر در وبسایت خود یک کد Third-Party  دارید مانند یک ویدیو که در Vimeo میزبانی شده است یا برخی از فونت‌های گوگل!

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

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

زمانی که باز شدن المان های یک صفحه طول بکشد کاربر بخشی از وقت خود را تلف شده می پندارد و ممکن است خیلی منتظر باز شدن صفحه ما نماند. چرا که برای او بسیار مهم است که بعد از وارد شدن به صفحه ای، به سرعت به خدمات مختلف آن دسترسی داشته و تعامل مورد نظر خود را ایجاد کند. اما مسدود بودن بیش از حد رشته اصلی و عدم پاسخگویی مرورگر، کاربر را در نهایت خسته می کند و سایت ما را به راحتی ترک می کند. این خود یکی از مواردی است که تجربه کاربری سایتی را در اولین برخورد با کاربرانش، به شدت پایین می آورد. از طرفی دیگر گوگل TBT را که یکی از فاکتورهای مهم Core Vital Web در بهبود تجربه کاربر می داند و علاوه بر آن برخی دیگر الگوریتم های خود را مامور بررسی همین رضایت خاطر کاربران کرده است. این موضوع مثل دیگر عوامل موثر بر سرعت، در رتبه بندی سایت اهمیت داشته و گوگل برای آن امتیازی ویژه قائل می شود که همگی بر بهینه سازی سایت یا SEO تاثیرگذار است.