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

Total Blocking Time یا TBT یکی دیگر از معیارهای مهم Core Web Vitals است. این معیار مدت زمانی را نشان می‌دهد که رشته اصلی مرورگر مسدود شده و نمی‌تواند به تعاملات کاربران پاسخ دهد. TBT یک اصطلاح کاملا تخصصی به شمار می‌رود و برای اینکه به طور کامل با آن آشنا شوید، به یک سری مقدمات نیاز دارید. به همین دلیل تصمیم داریم در ادامه این نوشته شما را به طور کامل با این معیار آشنا کرده و بگوییم که چه تاثیری در تجربه کاربری و سئو سایت می‌گذارد. گوگل برای TBT ارزش زیادی قائل است و تقریبا 30 درصد از امتیاز Performance سایت مربوط به این معیار است. بنابراین بهینه کردن زمان آن برای صاحبان سایت‌ها اهمیت بالایی دارد.

آشنایی با مفاهیم FCP, TTI و Main Thread و ارتباط آن‌ها با Total Blocking Time

قبل از پرداختن به آموزش کاهش مدت زمان TBT، بهتر است ابتدا با چند اصطلاح آشنا شویم. چرا که برای درک بهتر موضوع به آن‌ها نیاز خواهیم داشت.

1. FCP یا First Contentful Paint

به مدت زمانی که طول می‌کشد تا اولین المان یا عنصر در صفحه سایت نمایش داده شود، FCP می‌گویند. این عنصر می‌تواند یک عکس، ویدیو، متن یا هر چیز دیگری باشد. ما در مقاله جداگانه‌ای با عنوان «بهبود عملکرد وبسایت، آموزش افزایش سرعت FCP با Gtmetrix» این فاکتور را به طور کامل بررسی کرده‌ایم. توصیه می‌کنیم حتما آن را مطالعه کنید.

2. TTI یا Time to Interactive

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

3. Main Thread (رشته اصلی)

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

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

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

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

حال که با مباحث مطرح شده آشنا شدید، در ادامه به بررسی مفهوم TBT خواهیم پرداخت.

TBT یا Total Blocking Time چیست؟

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

هنگامی که تفسیر کدهای جاوا اسکریپت در Main Thread بیش از 50 میلی‌ثانیه طول بکشد، به آن تسک طولانی یا Long task گفته می‌شود. دقت داشته باشید، هنگامی که لانگ تسک در حال اجرا است، مرورگر نمی‌تواند آن را متوقف کند و در این شرایط به هیچ یک از تعاملات کاربران پاسخ داده نمی‌شود.

همانطور که در تصویر زیر مشاهده می‌کنید، اجرای دوتا از تسک‌ها بیش از 50 میلی‌ثانیه زمان برده است که به آن‌ها Long Task در Main Thread می‌گویند.

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

همانطور که در جدول زیر مشاهده می‌کنید، مدت زمان انجام همه تسک‌ها 560 میلی‌ثانیه طول کشیده است، اما تنها 345 میلی‌ثانیه از آن به عنوان TBT در نظر گرفته شده است.

	مدت زمان تسک	مدت زمان Total Blocking Time
تسک اول	250 میلی‌ثانیه	200 میلی‌ثانیه
تسک دوم	90 میلی‌ثانیه	40 میلی‌ثانیه
تسک سوم	35 میلی‌ثانیه	0
تسک چهارم	30 میلی‌ثانیه	0
تسک پنجم	155 میلی‌ثانیه	105 میلی‌ثانیه
Total Blocknig Time	345  میلی‌ثانیه

در صورتی که مدت زمان تحلیل کدها خیلی طول بکشد، گوگل شما را جریمه خواهد کرد. چرا که اینکار تجربه کاربری بسیار بدی را ایجاد می‌کند. برای حل این مشکل روش‌های زیادی وجود دارد که در ادامه به طور مفصل آن‌ها را بررسی خواهیم کرد.

TBT چه تفاوتی با TTI دارد؟

این دو معیار از لحاظ معنایی ارتباط نزدیکی با یکدیگر دارند و هنگامی که آن‌ها را بهینه کنیم، سرعت و عملکرد سایت به طور قابل ملاحظه‌ای تغییر خواهد کرد. در واقع هر دو این معیارها، UX سایت را بهبود می‌بخشند تا کاربران تجربه خوبی را به دست آورند.

TBT زمانی را اندازه‌گیری می‌کند که رشته اصلی یا Main Thread مسدود شده و نمی‌تواند به تعاملات کاربران (مثل کلیک) پاسخ دهد. اما TTI زمانی را نشان می‌دهد که کاربران از آن لحظه به بعد قادر به تعامل با صفحه هستند. یعنی با کلیک کردن بر لینک‌ها، دکمه‌ها یا سایر المان‌ها، پاسخی دریافت می‌کنند.

همچنین Total Blocking Time بر حسب میلی‌ثانیه بوده ولی Time To Interactive بر حسب ثانیه محاسبه می‌شود. برای داشتن تجربه کاربری بهتر، باید مدت زمان TTI کمتر از 3.8 ثانیه باشد.

چطور مدت زمان TBT سایت را به دست آوریم؟

همانطور که اشاره شد، Total Blocking Time یکی از مهمترین معیارهای Performance سایت به شمار می‌رود. هنگامی که مرورگر شروع به تفسیر کدهای سایت می‌کند، باید تسک‌های زیادی را انجام دهد تا صفحه برای کاربران قابل مشاهده و تعامل باشد؛ کارهایی مثل رندر کردن کدهای HTML، تحلیل کدهای JS و CSS، ایجاد ساختار درختی (DOM) و ده‌ها کار دیگر که در پس زمینه انجام می‌شود.

ابزارهای مختلفی برای محاسبه مدت زمان TBT وجود دارد که از میان آن‌ها، GTmetrix و Google PageSpeed Insight جزو بهترین‌ها به شمار می‌روند. کار کردن با این ابزارها بسیار ساده بوده و تنها کاری که باید انجام دهید، وارد کردن آدرس کردن و زدن دکمه آنالیز است.

ما در مقاله جداگانه‌ای با عنوان «GTmetrix چیست؟ آموزش تست سرعت سایت با جی تی متریکس» کار کردن با GTmetrix را به طور کامل توضیح داده‌ایم.

• مشاهده زمان TBT با PageSpeed Insight

• مشاهده زمان TBT با GTmetrix

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

بهترین زمان برای Total Blocking Time چقدر است؟

برای اطمینان از تجربه کاربری خوب، همواره باید تلاش کنید تا زمان TBT کمتر از 200 میلی‌ثانیه باشد. در حالت کلی، دسته‌بندی زمان TBT به شکل زیر است.

• خوب (Good): TBT بین 0 تا 200 میلی‌ثانیه باشد.
• نیاز به بهینه سازی (Needs Improvement): بین 200 تا 600 میلی‌ثانیه
• ضعیف (Poor): بیشتر از 600 میلی‌ثانیه

البته باید اشاره کنیم که سایت GTmetrix دسته‌بندی دیگری برای بهترین زمان دارد که به صورت زیر است.

• خوب (لازم نیست کاری انجام دهید): 0 تا 150 میلی‌ثانیه
• اوکی (به کمی بهبود نیاز دارد): 150 تا 224 میلی‌ثانیه
• نیاز به بهبود: بین 224 تا 350 میلی‌ثانیه
• ضعیف: بیشتر از 350 میلی‌ثانیه

در جدول زیر می‌توانید درصد تاثیر هر یک از معیارهای Web Vitals در Performance سایت، مدت زمان و امتیاز مناسب هر کدام را مشاهده کنید.

معیار	درصد تاثیرگذاری	بهترین زمان و امتیاز
First Contentful Paint	10 درصد	0 تا 2 ثانیه
Speed Index	10 درصد	0 تا 4.3 ثانیه
Largest Contentful Paint	25 درصد	0 تا 2.5 ثانیه
Time to Interactive	10 درصد	0 تا 5 ثانیه
Total Blocking Time	30 درصد	کمتر از 200 میلی‌ثانیه
Cumulative Layout Shift	15 درصد	0 تا 0.1

معمولا Total Blocking Time ارتباط نزدیکی با FID (First Input Delay) دارد که در ادامه تفاوت آن‌ها را بررسی خواهیم کرد.

چه تفاوتی بین FID و TBT وجود دارد؟

تفاوت این دو معیار بسیار ساده است؛ TBT را می‌توان بدون نیاز به کاربران واقعی و در محیط آزمایشگاهی به دست آورد. اما برای به دست آوردن FID نیاز به کاربران واقعی داریم و در محیط آزمایشگاهی محاسبه نمی‌شود. این به چه معناست؟ در واقع Total Blocking Time مربوط به قبل از تعامل کاربر است. یعنی بدون اینکه کاربر تعاملی با سایت داشته باشد، مدت زمان مسدود شدن Main Thread را نشان می‌دهد.

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

در ژوئن سال 2021 هنگام بروزرسانی معیارهای تجربه کاربری سایت، FID به‌عنوان یک عامل در رتبه‌بندی سایت‌ها تبدیل شد. بنابراین تاثیر مستقیمی بر روی رتبه سایت دارد.

GTmetrix به جای FID معمولا TBT را سایت را محاسبه می‌کند. چرا که با بهینه‌سازی مدت زمان مسدودی، First Input Delay نیز بهتر می‌شود.

TBT چه تاثیری در عملکرد و پرفورمنس سایت دارد؟

در ورژن 5 Lighthouse این معیار وجود نداشت. اما گوگل از ورژن‌های بعدی معیار Total Blocking Time را اضافه کرد. در ژوئن سال 2021 نیز با روی کار آمدن ورژن 8، امتیاز خوب TBT به زیر 200 میلی‌ثانیه تغییر پیدا کرد؛ در حالی که تا قبل از آن، امتیاز زیر 300 خوب تلقی می‌شد.

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

از آنجایی که بهبود سرعت TBT بر سرعت FID تاثیر می‌گذارد، می‌توان نتیجه گرفت اگر مدت زمان مسدودی را کاهش دهیم، به طور غیرمستقیم بر رتبه‌بندی سایت در گوگل نیز اثر خواهد گذاشت.

اما چطور می‌توان مدت زمان TBT را به زیر 200 میلی‌ثانیه رساند؟ چه کارهایی را باید انجام دهیم؟ در ادامه همراه ما باشید تا شما را با روش‌های بهبود مدت زمان Total Blocking Time آشنا کنیم.

آشنایی با مهمترین عوامل افزایش سرعت Total Blocking Time

از میان دلایل مختلفی که در افزایش سرعت TBT تاثیرگذار هستند، مهمترین آن‌ها عبارتند از:

• اولویت‌بندی نکردن فایل‌های جاوا اسکریپت و CSS
• سنگین بودن کدهای جاوا اسکریپت سایت
• بیشتر بودن مدت زمان Main thread
• سنگین بودن و وجود موارد اضافی در کد شخص ثالث

برای اینکه بدانید کدام عوامل باعث کاهش TBT سایت شده‌اند، می‌توانید از ابزارهای GTmetrix یا Google PageSpeed Insghits استفاده کنید. به‌عنوان مثال اگر از طریق Gtmetrix سایت خود را تست کرده‌اید، وارد تب Structure شده و در بخش Show audits relevant to بر روی TBT کلیک کنید. اینکار باعث می‌شود تا نتایج فیلتر شده و مواردی را نشان دهد که باعث افزایش مدت زمان مسدودی شده‌اند. به‌طور مثال در عکس زیر دلایل کاهش TBT عبارتند از:

• Minimize main-thread work
• Reduce JavaScript Execution time

اگر با این مسائل آشنا نیستید، نگران نباشید، چرا که در ادامه همه آن‌ها را به طور کامل توضیح خواهیم داد.

چطور مدت زمان TBT را کاهش داده و آن را به زیر 200 میلی‌ثانیه برسانیم؟

برای بهتر کردن امتیاز Total Blocking Time و رساندن آن به زیر 200 میلی‌ثانیه، اولین قدم اولویت‌بندی بارگذاری فایل‌های JS و CSS است. همچنین باید تعداد درخواست‌های سایت را کاهش داده و فایل‌ها را بهینه‌سازی کنید.

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

1. لود فایل‌های JS را به تعویق بیندازید (Defer JS)

Defer JS یعنی اینکه بارگذاری فایل‌های جاوا اسکریپت را تا زمان مشخصی به تعویق بیندازیم. در وب‌سایت‌های مدرن، معمولا فایل‌های JS حجم بسیار بیشتری نسبت به فایل‌های دیگر مثل CSS یا HTML دارند. به همین دلیل پردازش آن‌ها به مدت زمان زیادی نیاز دارد. در صورتی که همه فایل‌های اسکریپت را در بالای صفحه قرار داده باشید، ایجاد DOM در صفحه متوقف شده و کدهای اسکریپت پردازش می‌شوند.

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

نکته: با به تعویق انداختن لود جاوا اسکریپت می‌توانید برخی از خطاهای موجود در GTmetrix مثل « Eliminate render-blocking resources» یا «Avoid chaining critical requests» را نیز برطرف کنید.

روش استفاده از دستور Defer در جاوا اسکریپت برای کاهش زمان TBT

بهترین روش برای به تعویق انداختن فایل‌های JS استفاده از ویژگی‌های defer و async در تگ‌های Script است. دستور defer به مرورگر می‌گوید که فایل‌های جاوا اسکریپت را در پس زمینه لود کرده و بعد از لود کامل صفحه آن‌ها را اجرا کند. هنگامی که یک اسکریپت با ویژگی defer لود می‌شود، موجب مسدود شدن صفحه نشده و در نتیجه مدت زمان TBT کاهش پیدا خواهد کرد.

<script src=”code.js” defer></script>

نکته: ویژگی defer فقط برای فایل‌های جاوا اسکریپت اکسترنال کاربرد دارد.

در حالت عادی، اسکریپت‌های صفحه به ترتیب اجرا می‌شوند. به طور مثال اگر 10 تا فایل اسکریپت داشته باشید، تا زمانی که فایل اولی اجرا نشود، نوبت به بقیه نمی‌رسد؛ حتی اگر بقیه زودتر دانلود شده باشند. اما اگر از ویژگی async استفاده کنید، هر فایلی که زودتر دانلود شود، زودتر اجرا می‌شود.

<script src=”code.js” async></script>

از مهمترین کاربردهای اتریبیوت async، لود فایل‌های اسکریپت third-part است. third-part به فایل‌هایی می‌گویند که از دامنه دیگری در سایت ما دانلود ‌می‌شوند. به طور مثال هنگامی که نماد اعتماد الکترونیکی دریافت می‌کنید، به شما یک کد داده می‌شود که در سایت خود قرار دهید. یا هنگامی که سایت خود را در گوگل آنالیتیکس ثبت می‌کنید، یک کد به شما داده می‌شود که در هدر سایت قرار دهید.

دقت داشته باشید اگر از سیستم مدیریت محتوای وردپرس استفاده می‌کنید، با نصب افزونه‌هایی مثل Asset CleanUp یا wp rocket می‌توانید اینکار را به راحتی انجام دهید. به طور مثال در افزونه wp rocket کافی است در بخش بهینه‌سازی فایل JS و CSS گزینه تاخیر اجرای جاوا اسکریپت یا load javascript deferred را بزنید.

2. کاهش زمان اجرای جاوا اسکریپت (Reduce JavaScript execution time)

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

با بهبود زمان اجرای جاوا اسکریپت یا همان Reduce JavaScript execution time، عملکرد سایت به طور قابل ملاحظه‌ای بهبود خواهد یافت. اگر به ویدیو اول نگاه کنید، فایل‌های جاوا اسکریپت بهینه نشده‌اند و بررسی آن‌ها طول می‌کشد.

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

برای اینکه بدانید کدام فایل‌ های اسکریپت ایراد دارند، می‌توانید از سایت GTmetrix کمک بگیرید.

برای کاهش JavaScript execution time کارهای زیر را انجام دهید.

• کدها را به فایل‌ های کوچک تقسیم کرده و آن‌هایی که واجب و ضروری هستند را ابتدا بارگذاری کنید. بقیه فایل‌ها را نیز با استفاده از ویژگی defer به تعویق انداخته و در آخر لود کنید.
• کدهای اضافی را پاک کنید.
• فایل‌ های جاوا اسکریپت را فشرده کنید.
• از قابلیت Lazy load برای بارگذاری فایل‌های JS استفاده کنید.

3. استفاده از قابلیت پیش واکشی DNS یا Prefetch DNS برای بهبود سرعت TBT

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

با اینکه ارسال یک درخواست زمان بسیار کمی نیاز دارد، اما اگر تعداد درخواست‌ها زیاد باشد، باعث ایجاد مشکل در سایت و بیشتر شدن مدت زمان مسدودی یا TBT خواهد شد. برای حل این مشکل، یکی از بهترین راه‌ها استفاده از قابلیت DNS Prefetching است. در این روش، به یکباره همه دامنه‌ها به IP متناظر خود تبدیل شده و در سیستم کاربر کش می‌شود. بنابراین برای هر کدام درخواست جداگانه‌‌ای ارسال نمی‌شود.

دقت داشته باشید که از این قابلیت نباید برای لینک‌های سایت خود استفاده کنید. چرا که سایت شما همان ابتدا کش می‌شود. این روش برای سایت‌های Third Part مناسب است.

<link rel=”dns-prefetch” href=”//yourdomain.com”>

نکته: برای درک بهتر موضوع توصیه می‌کنیم حتما در مورد DNS و رابطه آن با IP تحقیق کنید.

اگر از وردپرس استفاده می‌کنید، این قابلیت در افزونه‌های Perfmatters و wp rocket وجود دارد. در افزونه wp rocket کافی در بخش پیش بارگذاری و قسمت «پیش دریافت درخواست DNS»، لینک سایت‌ها را وارد کنید.

4. کاهش حجم فایل‌های جاوا اسکریپت و CSS

معمولا در داخل کدهای اسکریپت یا CSS کامنت‌ها، فاصله، کدهای اضافی و موارد دیگری وجود دارد. هر کدام از این موارد باعث بیشتر شدن حجم این فایل‌ها شده و در نتیجه دانلود و رندر کردن آن‌ها به زمان زیادی نیاز دارد. هر چقدر هم پردازش فایل‌های JS یا CSS بیشتر شود، مدت زمان TBT یا Total Blocking Time بیشتر خواهد شد.

بنابراین باید همه موارد اضافی را پاک کرده و فقط کدهای اصلی و مورد نیاز را نگه دارید. در حال حاضر بسیاری از قالب‌های آماده وردپرس این قابلیت را دارند و لازم نیست کاری انجام دهید. حتی کدنویس‌ها نیز سعی می‌کنند کدهای خود را فشرده کنند. اما اگر کدهای سایت شما فشرده نیستند، می‌توانید از ابزارهای آنلاین برای اینکار استفاده کنید. کافی است عبارت Minify JS یا Minify CSS را در گوگل جستجو کنید.

در وردپرس نیز می‌توانید از پلاگین‌هایی مثل autoptimize، Closure Compiler یا wp rocket استفاده کنید. در افزونه wp rocket و در بخش بهینه‌سازی فایل، تیک گزینه‌های فشرده‌سازی فایل‌های CSS و فشرده‌سازی فایل‌های جاوا اسکریپت را فعال کنید.

اگر فایل‌های شما به صورت فشرده نباشد، احتمالا با یکی از خطاهای زیر در GTmetrix مواجه خواهید شد.

• Minify JS
• Minimize main thread work
• Minify CSS

علاوه بر فشرده کردن، توصیه می‌کنیم حتما فایل‌ها را نیز با یکدیگر ادغام کنید تا درخواست کمتری به سرور ارسال شود. به‌عنوان مثال اگر 10 فایل CSS دارید، آن‌ها را جمع کرده و در 2 فایل قرار دهید؛ یکی برای کدهای CSS ضروری و دیگری سایر کدها. اینکار موجب می‌شود تا به جای 10 درخواست، 2 درخواست به سرور ارسال شود.

5. Gzip را فعال کنید

Gzip یکی از بهترین روش‌ها برای کاهش حجم فایل‌ها است. با استفاده از این قابلیت می‌توانید حجم فایل‌های HTML, Js و CSS را به طور قابل ملاحظه‌ای کاهش دهید تا مدت زمان ارسال آن‌ها از سرور به سایت سریع‌تر شود. هنگامی که فایل‌ها با سرعت بالایی توسط مرورگر دریافت شوند، آن‌ها را سریع‌تر پردازش کرده و در نتیجه باعث کاهش مدت زمان TBT خواهد شد.

اگر این قابلیت در سایت فعال نباشد، احتمالا با خطای Enble text Compression در GTmetrix مواجه خواهید شد.

6. کاهش مدت زمان TTFB یا Time to First Byte

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

• حتما از یک هاست یا سرور با کیفیت استفاده کنید.
• کش مرورگر و سایت را فعال کنید. برای اینکار می‌توانید از افزونه‌های کش مثل wp rocket استفاده کنید.
• در صورت امکان از CDN استفاده کنید.

7. استفاده از سایت‌های سوم شخص یا third part را به حداقل برسانید

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

بهبود امتیاز TBT با استفاده از افزونه wp rocket در وردپرس

در این بخش از آموزش بهینه‌سازی سرعت سایت قصد داریم شما را با روش افزایش زمان Total Blocking Time با استفاده از افزونه wp rocket آشنا کنیم. در این افزونه تنها با انجام چند کار ساده می‌توانید تا حد زیادی زمان TBT را افزایش دهید. در تصویر زیر ما یک سایت را قبل از بهینه‌سازی بررسی کرده‌ایم که مدت زمان TBT آن 480 میلی‌ثانیه است. البته سایر فاکتورها نیز وضعیت خوبی ندارند.

این سایت مشکلات زیادی دارد که در تصویر زیر می‌توانید به طور کامل آن‌ها را مشاهده کنید.

برای برطرف کردن این مشکلات باید در افزونه wp rocket برخی از گزینه‌ها را فعال کنید که عبارتند از:

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

• استفاده از قابلیت DNS Prefetch که در بالا به طور کامل توضیح دادیم.
• پری لود کردن فونت‌ها: فایل‌های سایت معمولا به صورت ردیفی و یکی یکی دانلود می‌شوند. یعنی موقعی که یک فایل دانلود شد، مرورگر سراغ فایل بعدی می‌رود. اما اگر از قابلیت PreLoad استفاده کنید، فایل مورد نظر قبل از رسیدن نوبت، دانلود و سریع‌تر در سایت بارگذاری می‌شود. در واقع یکی از ارورهای پرفورمنس در جی تی متریکس (preload key request) مربوط به لود فونت‌ها است که با قابلیت preload می‌توان مشکل را برطرف کرد. در افزونه wp rocket کافی است وارد بخش پیش بارگذاری شده و در قسمت پیش بارگذاری فونت‌ها، آدرس فونت‌هایی که در سایت استفاده کرده‌اید را وارد نمایید.

در نهایت، بعد از انجام کارهای بالا نتیجه به شکل زیر شد.

---

جمع‌ بندی

با روی کار آمدن Web Vitals بهینه‌ سازی سایت دستخوش تغییرات زیادی شد. به همین دلیل برای بهبود معیارهایی همچون TBT به مهارت و تخصص بالایی نیاز داریم. البته اگر از سیستم مدیریت محتوای وردپرس استفاده کنید، به مراتب کار راحتی خواهید داشت. توجه داشته باشید که حتی کوچکترین تغییر در عملکرد سایت، تاثیر زیادی بر روی رتبه‌ تان در گوگل خواهد داشت. چرا که سایت‌ها با فاصله نزدیکی از یکدیگر قرار دارند و کوچکترین تغییر می‌تواند رتبه‌ها را تغییر دهد.

در این نوشته سعی کردم نکات مهم Total Blocking Time و ارتباط آن با سایر معیارها را بررسی کنم. امیدوارم مورد رضایت شما عزیزان واقع شده باشد. در انتها، اگر در این رابطه سوال یا نقطه نظری داشتید، خوشحال می‌شوم آن را در بخش نظرات با ما مطرح کنید.