TBT چیست؟
یکی از مهمترین معیارها در Lighthouse که وزن سی درصدی در پرفورمنس دارد، Total Blocking Time (TBT) است. TBT مدت زمانی است بین FCP تا TTI که Main Thread بلاک شده و هیچ FID رخ نمیدهد. به عبارت سادهتر، وقتی صفحهای را باز میکنید و FCP شکل میگیرد، اجرای Main Thread صفحه به خاطر وجود فرایندهای زمانبر، آنقدر طول میکشد که لود صفحه به نحوی که قابلیت اینتراکشن با آن را داشته باشید، کامل نمیشود و طول میکشد. کل این زمان، TBT محسوب میشود.
Main Thread مسئول کنترل فرایندهای اصلی است که در لود صفحه نقش دارند. فرایندهایی همچون فرایند لود داکیومنت HTML صفحه و فرایند لود منابعی مثل CSS ،JS و فونت. تلاش کنید که هر یک از این فرایندها را بیش از 50 میلی ثانیه زمان نبرد.
فرض کنید که Main Thread شامل 5 فرایند A,B,C,D,E با زمان اجرای 220،70،25،20،145 میلیثانیه باشد. از این بین فقط فرایندهای C,D در زمان مناسبی اجرا میشوند و باقی Over Time دارند که جمع این زمان، همان TBT را شکل میدهد که در این مثال 285 میلیثانیه میشود.
باید تسکهای زمانبر به چندین تسک کوتاه تقسیم کنید تا بین زمان اجرای این تسکها، قابلیت اینتراکشن با صفحه فراهم گردد.
راهکارهای بهبود TBT
در بخش Diagnostic ابزار PageSpeed چک کنید که در چه قسمتهای هشدار دارید.
• Minimize main-thread work
معمولاً مشکل از کدهای جاوا اسکریپت است که میتواند در سایت شما یا Third-Party باشد. تلاش کنید فقط Third-Party JSهایی استفاده کنید که واقعاً به آنها نیاز دارید.
اگر مقدور است کد Third-Party JS را روی سرور خودتان بارگذاری کنید. اگر مقدور نیست، این کدها را Pre Connect یا Pre Fetch کنید. در این صورت کانکشن در Main Thread انجام میشود و موقع فراخوانی کد، فقط Parse و اجرا انجام میشود.
معمولاً این کدها قابل کش هم نیستند. با Pre Fetch میتوانید لود کد را در Main Thread انجام دهید. بهتر است این کار را فقط برای دو یا سه کد مهم انجام دهید. CSSهای غیرضروری را از Main Thread خارج کنید.
• Reduce JavaScript execution time
کد جاوا اسکریپت برای اجرای کامل، سه مرحله را طی میکند:
فراخوانی معمول کد JS با <script >: همزمان با آغاز دانلود اسکریپت، HTML Parsing متوقف میشود تا دانلود، Parse و اجرای کد JS تکمیل شود پس از آن است که HTML Parsing پی گرفته میشود.
فراخوانی کد JS با تگ <script async>: در این صورت زمان دانلود اسکریپت همزمان با HTML Parsing انجام میشود، اما در هنگام اجرای کد JS فرایند HTML Parsing با وقفه مواجه میشود.
فراخوانی کد JS با تگ <script defer>: در این حالت هم، دانلود اسکریپت همزمان با HTML Parsing انجام میشود، اما اجرای کد JS پس از تکمیل فرایند HTML Parsing انجام میشود. غالباً ما نیاز داریم که کد JS پس از لود کامل صفحه اجرا شود.
• Avoid excessive DOM size
مرورگر، تمام اِلمانهای صفحه را به عنوان Object در نظر گرفته و آنها را در صفحه جایگذاری میکند. به این روش Document Object Model (DOM) میگویند. هر چه تعداد اِلمانها بیشتر باشد، تعداد DOM هم افزایش مییابد. تعداد DOM براساس فاکتورهای زیر اندازهگیری میشود:
Total DOM Element: عدد بهینه آن 900 است اما تا 1500 هم مناسب است.
Maximum DOM Deep: تعداد المنتهای سلسهمراتبی که میتوانید داشته باشید. مثلا <div>های تو در تو. تعداد بهینه آن 16 عدد است.
Maximum Child DOM Element: تعداد المنتهای داخلی یک المنت سلسله مراتبی چند تا میتواند باشد. مثلاً تعداد <li>های یک <ul> تعداد بهینه آن 32 است.
نکته) Matomo ابزار کد باز جایگزین گوگل آنالیتیکس است که میتوانید درباره آن بیشتر مطالعه کنید.