آموزش جی تی متریکس | قسمت 11 - تعریف MTT یا Main thread task

برای اینکه یک صفحه برای کاربر  به نمایش دربیاید یک سری function انجام می‌شود و یا حتی فایل هایی فراخوانی می‌شوند، مثل CSS،Java Script که  پردازش همه این‌ها زمان می‌برد و روی FCPو TTI اثر می‌گذارد. عملا هر پردازشی که بالای 50 میلی ثانیه طول بکشد از نظر مرورگر و Lighthouse یک task طولانی است و زمانی که چند task کنارهم به این شکل قرار بگیرند باعث بزرگ شدن main thread می‌شوند.

آموزش ابزار جی تی متریکس (GTmetrix)

برای تشخیص و اصلاح MTT(main thread) به این شکل عمل می‌کنیم:

برای تشخیص thread های inspectore مرورگر را بازکنید در سربرگ performance و دکمه Reload را بزنید که نتایج حاصله Performance صفحه شماست.در قسمت Buttom up  می توانید مدت زمان هر task را به صورت میلی ثانیه ببینید. دقیقا نشان می‌دهد که کدام فایل مدت زمان زیادی را سپری کرده است. معمولا مقصر اصلی در افزایش MTT اول جاوا اسکریپت است و بعد CSS و خود داکیومنت است.

تعریف معیار Main-Thread

به حداقل رساندن معیار Main Thread یکی از توصیه‌های PageSpeed ​​است که در بخش تشخیص گزارش عملکرد جی تی متریکس ارائه شده است. هنگام تست سایت احتمالاً به چنین Main-Thread برخورد خواهید کرد اما چگونه می‌توانید آن را ارزیابی کنید؟ پس بیایید کشف کنیم که موضوع اصلی از چه قرار است و چگونه این معیار بر عملکرد سایت شما تأثیر می‌گذارد.

Main Thread چیست؟

برای درک Main Thread، باید یک قدم به عقب برداریم و توضیح دهیم که وقتی می‌خواهید محتوای صفحه را بارگذاری کنید، چه اتفاقی میفتد. اول از همه، مرورگر درخواستی از سرور می‌کند. هنگامی که سرور محتوای درخواست شده را ارسال کرد، مرورگر می‌تواند آنالیز کد HTML و ایجاد درخت DOM را آغاز کند. در این مرحله، مرورگر می‌تواند محتوا را رندر کرده و نمایش دهد.

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

مرورگر نباید هنگام آنالیز کد و نمایش صفحه با این فایل‌ها مواجه شود زیرا JS (جاوا اسکریپت) و CSS مسدود کننده رندر هستند و باید حذف شوند. با مشاهده گزارش جی تی متریکس می‌توانید نمای واضحی از نحوه تاثیر Main Thread  داشته باشید. می‌توانید در عکس زیر ببینید کدام دسته بیشترین تأثیر را بر عملکرد دارد.

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

•   ارزیابی اسکریپت
•  تجزیه و تدوین اسکریپت
•   تجزیه HTML و CSS

این بخش‌ها همه مربوط به تجزیه و اجرای کد هستند، دقیقاً زمانی است که Main Thread در صورت مواجه شدن با منابع مسدود کننده رندر مشغول می‌شود.

به حداقل رساندن Main Thread چگونه بر عملکرد وبسایت تأثیر می‌گذارد؟

به حداقل رساندن Main Thread مرورگر شما را آزاد می‌کند تا کارهای دیگری را که برای بارگذاری صفحه ضروری هستند انجام شود. مواردی مانند تجزیه HTML/CSS، اجرای جاوا اسکریپت و سایر موارد، Main Thread را از تمایل به کارهای غیرضروری منع می‌کند.

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

چرا باید Main Thread  را به حداقل رساند؟

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

اولین تأخیر ورودی یکی از معیارهای Core Web Vitals است و از طریق داده‌ها و تعامل کاربران واقعی اندازه گیری می‌شود و جایگزین TBT در نمره عملکرد Lighthouse می‌شود. TBT در حدود 25 درصد از نمره کل عملکرد را به خود اختصاص می‌دهد و به همین دلیل است که نمی‌توانید Main Thread را نادیده بگیرید و اگر می‌خواهید عملکرد سایت خود را افزایش دهید، باید توصیه جی تی متریکس را گوش دهید.

نحوه به حداقل رساندن Main Thread  چگونه است؟

پنج روش اصلی برای به حداقل رساندن Main Thread Work به شرح زیر هستند:

1- JS را به تعویق بیندازید (Defer)

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

در اینجا نمونه ای از ویژگی Defer آمده است:

یک راه سریع‌تر و ساده‌تر برای به تعویق انداختن  JS، استفاده از ویژگی Load Javascript Deferred ارائه شده توسط WP Rocket است. این ویژگی یک گزینه قوی است که به شما این امکان را می‌دهد تا فایل‌های JS را در کوتاه ‌ترین زمان به تعویق بیندازید. در برگه File Optimization، به قیمت Load Javascript Deferred بروید و گزینه مورد نظر را علامت گذاری کنید.

2- اسکریپت‌های تأخیری و استفاده نشده را حذف کنید

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

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

با تأخیر منابع جاوا اسکریپت، مرورگر این فایل‌ها را تا اولین تعامل کاربر بارگیری نمی‌کند. یکبار دیگر،Main Thread  مشغول و مسدود نمی‌شود. به عنوان یک کاربر وردپرس، شما گزینه‌های متفاوتی دارید. می‌توانید افزونه‌ای مانند مانند WP Meteor یا Flying Scripts را انتخاب کنید که JS را به تأخیر میندازد. همچنین می‌توانید از افزونه Asset Manager برای انتخاب محل بارگیری فایل‌های خاص JS استفاده کنید. برخی دیگر از افزونه‌های وردپرس شلملPlugin Organizer ،Gonzales ، Perfmatters و Asset CleanUp هستند.

ساده‌ترین و سریع‌ترین راه برای مقابله با  JS، استفاده از WP Rocket و ویژگی اجرای Delay JS  در این افزونه است. در برگه بهینه سازی فایل، گزینه‌ای را برای به تعویق انداختن همۀ فایل‌های JS پیدا خواهید کرد. البته، همچنین می‌توانید فایل‌های خاص JS را نیز از تأخیر حذف کنید، همانطور که در تصویر زیر مشاهده می‌کنید:

این یک راه ساده و مؤثر برای مدیریت JS و صرفه جویی در وقت و تلاش است.

3- جاوا اسکریپت را به حداقل برسانید

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

با حذف Line Breaks، کامنت‌ها و فضاهای سفید، حجم فایل‌های JS را کاهش می‌دهید. می‌توانید از یک ابزار کوچک سازی JS یا از WP Rocket استفاده کنید. در کنار ویژگی‌های قدرتمند عملکرد وب، WP Rocket  به شما این امکان را می‌دهد تا JS  را در کمترین زمان و بدون هیچ تلاشی کوچک کنید. فقط به برگه بهینه سازی فایل بروید و Minify فایل‌های جاوا اسکریپت را پرچم گذاری کنید.

4- CSS را به حداقل برسانید

در کنار JS، باید فایل‌های CSS را نیز کوچک کنید تا به ارزیابی اسکریپت و تجزیه HTML و CSS بپردازید. با کوچک کردن CSS، حجم کد را کاهش می‌دهید تا روند بارگذاری سریع‌تر شود. یکبار دیگر، می‌توانید از یک ابزار یا افزونه برای کوچک سازی CSS استفاده کنید.

5-  Non-Critical CSS را به تعویق بیندازید

اگر می‌خواهیدMain Thread  را به حداقل برسانید و HTML & CSS را آدرس دهی کنید، باید  Non-Critical CSS را به تعویق بیندازید. این فایل‌ها همان هایی هستند که در بالای صفحه قرار ندارند و برای ارائه صفحه مورد نیاز نیستند. هدف این است که  Non-Critical CSS را تنها پس از بارگذاری مرورگر و نمایش مناسب‌ترین محتوا بارگذاری کنیم.

می‌توانید فایل‌های CSS را به روش‌های مختلفی به تعویق بیندازید. اولین چیزی که باید بدانید این است که به تعویق انداختن  Non-Critical CSS همراه با درون خطی CSS مهم است، پرونده‌هایی که باید در اسرع وقت بارگذاری شوند. به همین دلیل است که شما باید CSS مهم را در کد HTML شناسایی و دسته بندی کنید. می‌توانید با استفاده از CSS Critical Path  این کار را انجام دهید.

6- عملکردهای دیگر را بهینه سازی کنید

همانطور که در توصیه به حداقل رساندن Main Thread توجه کرده‌اید، دسته‌های دیگری نیز وجود دارند که باید آن‌ها را بهینه سازی کنید:

• Style and layout
• Rendering
• Garbage Collection

Style and Layout و Rendering به ساختار طرح و درخت DOM مربوط به آنالیز کد HTML مربوط می‌شود. گوگل توصیه می‌کند از طرح بندی‌های بزرگ و پیچیده و خراب شدن چیدمان اجتناب کنید.

کلام آخر

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