سلام همراهان عزیز میزفا
از مجموعه مقالات آموزش جی تی متریکس میزفا همراه شما هستیم. تو جلسه قبلی راهکارهای رفع خطای Minify JavaScript رو بررسی کردیم و در این جلسه به برطرف کردن خطای Minimize main-thread work در ابزار جی تی متریکس جدید می‌پردازیم. این ارور یکی از مهم‌ترین مباحث در افزایش سرعت سایت هست و باید بهش توجه ویژه‌ای بشه. البته که رفع ارور Minimize main-thread work ساده نیست و مثل خیلی از خطاهای دیگه نیاز به تخصص و تجربه و مهارت زیاد در برنامه نویسی داره. ابتدا درباره این صحبت می‌کنیم که main-thread چیه و بعد راهکارهای حل مشکل رو می‌گیم.
لطفا تا پایان با میزفا همراه باشید.
سرفصل‌های پست
خلاصه خطای Minimize main-thread work
میزان سختی: *****
روی چه مواردی تاثیر می‌ذاره: TTI و Avoid long main-thread tasks
علت ایجاد خطای Minimize main-thread work چیست؟
خطای Minimize main-thread work ارتباط نزدیکی با ارور Avoid long main-thread tasks داره که تو جلسه ۱۸ بررسی کرده بودیم. هر دو این خطاها به اهمیت بسیار زیاد main-thread اشاره می‌کنند. خطای Avoid long main-thread tasks اشاره به این داره که از کدهایی استفاده نکنیم که main-thread رو به مدت طولانی درگیر کنند. ارور Minimize main-thread work هم میگه وظایف مربوط به جناب main-thread رو تا حد ممکن کاهش بدیم. اما مگه این main-thread کیه یا چیه که اینقدر خاطرخواه داره؟
main-thread چیست؟
همونطور که تو جلسات قبلی هم اشاره کردیم، وظیفه مرورگر اینه که صفحات ما رو Render کنه. یعنی کدهای صفحه رو به پیکسل‌های قابل درک برای کاربران تبدیل کنه. برای انجام این فرآیند، مرورگر بیشتر کارها و وظایف رو به main-thread می‌سپاره. کارهایی مثل تجزیه سند HTML، ساختن DOM، تجزیه کدهای CSS، تجزیه JavaScript و اجرای اون فقط بخشی از کارهای main-thread در مرورگر هستند. از این گذشته، main-thread باید رویدادها و تعامل‌های ورودی کاربران (مثل کلیک کردن) رو هم پردازش کنه. برای همین نباید وظایف خیلی زیادی رو به main-thread بسپاریم و اینقدر سرش رو شلوغ کنیم که نتونه نسبت به درخواست‌های کاربران پاسخگو باشه. خلاصه که جناب main-thread عزیز نقش خیلی مهمی در لود شدن صفحه داره و ما باید تا جایی که میشه کارهاش رو کمتر کنیم و کارهای اضافی بهش نسپاریم. بنابراین رفع ارور Minimize main-thread work از طریق کدنویسی صحیح و اصولی امکان پذیره.
یه مثال خیلی خوب برای درک بهتر اهمیت main-thread اینه که اون رو مثل گارسون یا پیشخدمت اصلی یه رستوران شلوغ در نظر بگیریم. این گارسون وظایف مختلفی مثل گرفتن سفارش‌ها، تحویل سفارش به آشپزخانه، بردن غذا سر میز، تمیز کردن میزها و… داره. حالا اگه وظایف خیلی زیاد و غیرضروری به این گارسون عزیز بسپاریم، چه اتفاقی می‌افته؟ درسته، اون وقت به کارهای مهم دیگه نمی‌رسه و نمی‌تونه سفارش‌های مشتریان جدید رو دریافت کنه. پس باید طوری وظایف گارسون (main-thread) رو طراحی کنیم که رسیدگی به یک کار خاص، وقتش رو بیش از حد نگیره.
همین موضوعات ساده‌ای که مطرح کردیم، ماهیت ایجاد خطای Minimize main-thread work در جی تی متریکس جدید و Lighthouse هست. چون این خطا میگه کارهای main-thread رو کم کنید. بنابراین روش‌هایی که در ادامه برای حل مشکل Minimize main-thread work می‌گیم، مبتنی بر این هستند که کار main-thread رو کمتر کنند.
برطرف کردن این خطا روی معیار TTI هم تاثیر زیادی داره. چرا که هرچقدر کارهای main-thread رو کمتر کنیم، صفحه سریع‌تر قابل تعامل میشه و می‌تونه ورودی‌های کاربران رو بپذیره. بنابراین باعث کاهش زمان TTI میشه. اگه با این معیار مهم آشنایی ندارید، پیشنهاد می‌کنم مقاله Time to Interactive چیست رو مطالعه کنید.
چطور خطای Minimize main-thread work را برطرف کنیم؟
برای برطرف کردن خطای Minimize main-thread work نیازه چندین مورد مختلف رو بهینه سازی کنیم. چون همونطور که تو تعریف main-thread بررسی کردیم، دیدیم که وظایف مختلفی مثل اجرای JavaScript و تجزیه CSS و… بر عهده main-thread هست. پس بهینه سازی هر کدوم از این موارد می‌تونه باعث رفع ارور Minimize main-thread work بشه. همچنین رفع این خطا به شکل اصولی، تاثیر زیادی در افزایش سرعت سایت ما خواهد داشت.
این خطا در گزارش Structure جی تی متریکس برچسب N/A داره. یعنی با کلیک روی این خطا در گزارش Structure دسته بندی‌هایی رو می‌بینیم که صرفا جنبه اطلاع رسانی دارند. در واقع GTmetrix تمام منابعی که روی main-thread اجرا میشن و اون رو درگیر می‌کنند رو شناسایی می‌کنه و اونها رو در دسته بندی‌هایی قرار میده که تو عکس زیر مشخص شدند. همچنین مدت زمان سپری شده برای هر دسته بندی در مقابلش مشخص شده. این موضوع دید خیلی خوبی به ما میده که متوجه بشیم کدوم موارد بیشتر از بقیه main-thread عزیز ما رو درگیر کردند تا بهینه سازی اونها رو در اولویت کارمون قرار بدیم.
در ادامه راهکارهایی رو برای حل این مشکل به شما عزیزان آموزش می‌دیم.
۱. بهینه سازی JavaScript شخص ثالث (third-party)
یکی از اولین مواردی که برای رفع خطای Minimize main-thread work باید بهش توجه داشته باشیم، کدهای جاوا اسکریپتی هست که از سایر سایت‌ها تو صفحاتمون قرار دادیم. پیشنهاد می‌کنیم کدهای اضافی که تو صفحه‌تون قرار دارند (مخصوصا اگه از منابع و سایت‌های نامعتبر هستند) رو حذف کنید. همچنین میشه اجرای کدهایی که برای لود اولیه صفحه ضروری نیستند رو به تعویق بندازید.
با استفاده از Preconnect میشه با دامنه‌هایی که مهم‌تر هستند و وجود کدهاشون در صفحات ما ضروری‌تره، زودتر ارتباط برقرار کرد. تو جلسه بعدی درباره این موضوع و اهمیت خطای Preconnect to required origins صحبت می‌کنیم. همچنین راهکارهای مرتبطی رو در مقاله خطای Reduce the impact of third-party code برای شما عزیزان ارائه می‌دیم که باعث میشه اثر کدهای سایر سایت‌ها در سرعت صفحاتمون به‌طور کلی کمتر بشه.
۲. کاهش زمان اجرای JavaScript
از اونجایی که یکی از کارهای main-thread که معمولا بیشترین مشکل رو هم ایجاد می‌کنه اجرای JavaScript هست، اگه بتونیم زمان اجرای JavaScript ها رو کاهش بدیم، تاثیر زیادی در رفع ارور Minimize main-thread work خواهد داشت. روش‌هایی مثل فشرده سازی جاوا اسکریپت یا حذف جاوا اسکریپت‌های بدون استفاده می‌تونه موثر باشه. درباره این موضوع در مقاله مربوط به خطای Reduce JavaScript execution time بیشتر صحبت می‌کنیم. اما مطالعه مقالات زیر هم توصیه میشه:
- خطای Minify JavaScript (برای فشرده سازی JS)
- خطای Defer parsing of JavaScript (برای به تعویق انداختن تجزیه و یا اجرای JS)
به‌طور کلی هرچقدر JavaScript صفحات ما بیشتر باشه، زمان بیشتری برای بررسی اونها نیاز هست و main-thread بیشتر درگیر میشه. پس نباید از جاوا اسکریپت‌های اضافه در صفحات استفاده کنیم. همچنین استفاده بیش از حد از افزونه‌ها در سایت‌های وردپرس می‌تونه چنین مشکلاتی ایجاد کنه. وجود JS زیاد در صفحات باعث افزایش TTI میشه و کاربر تا مدت زمان نسبتا زیادی نمی‌تونه با صفحه تعامل داشته باشه و این یعنی یه تجربه کاربری ضعیف.
۳. بهینه سازی CSS
از اونجایی که دیگر وظیفه مهم main-thread مربوط به تجزیه و بررسی CSS ها میشه، بهینه سازی CSS هم در برطرف کردن خطای Minimize main-thread work اهمیت خودش رو داره. در اینجا هم مطالعه مقاله رفع خطای Minify CSS رو پیشنهاد می‌کنیم.
۴. عدم استفاده از non-composited animations
در جلسه ۲۰ آموزش جی تی متریکس جدید به‌طور مفصل درباره محرک‌های non-composited صحبت کردیم و مشکلات ناشی از اون رو بررسی کردیم. در مقابلش استفاده از ویژگی‌های Compositor باعث میشه کار main-thread کمتر بشه. چرا که این ویژگی‌ها روی compositor thread اجرا میشن و این یعنی کار main-thread کمتر میشه. مقاله ارور Avoid non-composited animations می‌تونه در اینجا به شما دید خوبی بده.
۵. سایر روش‌های برطرف کردن ارور Minimize main-thread work
روش‌های دیگه‌ای هم برای حل مشکل Minimize main-thread work وجود داره. در اینجا ۲ مورد دیگه رو بیان می‌کنیم که اولی کاملا تخصصی هست و فقط متخصصین برنامه نویسی می‌تونند اجراش کنند. مورد دوم عمومی‌تره و مربوط به استفاده از افزونه‌ها در وردپرس هست:
- به کارگیری Web workers (استفاده از Web workers باعث میشه کار main-thread کمتر بشه؛ اطلاعات دقیق‌تر درباره روش پیاده سازی رو می‌تونید در این مقاله مطالعه بفرمایید)
- با استفاده از تنظیمات برخی از افزونه‌ها شاید بشه خطای Minimize main-thread work رو کمی برطرف کرد. برای همین پیشنهاد می‌کنیم مقاله بهترین افزونه سرعت وردپرس رو مطالعه کنید. در این مقاله ۱۱تا از بهترین پلاگین های وردپرس برای بالا بردن سرعت لود وبسایت رو معرفی کردیم و توضیح دادیم.
۶. کار رو به یه متخصص بسپارید
اگه مقاله رو خوندید و خوب فکر کردید اما هنوز نتونستید ارور Minimize main-thread work رو برطرف کنید، پیشنهاد می‌کنیم کار رو به یه متخصص برنامه نویسی یا متخصص سئو بسپارید. اگه تیم خوب می‌شناسید که هیچ ولی اگه دنبال یک تیم حرفه‌ای و همینطور دنبال خدمات خوب در زمینه سئو می‌گردید، می‌تونید خدمات سئو میزفا رو بررسی کنید. کلی خدمات متنوع از جمله بهینه سازی سرعت سایت برای خدمت رسانی به شما عزیزان آماده کردیم.
جمع بندی
در این مقاله میزفا درباره روش برطرف کردن خطای Minimize main-thread work در جی تی متریکس جدید صحبت کردیم. اول درباره اهمیت و ارزش main-thread صحبت کردین و بعد اشاره کردیم که حل این مشکل اهمیت زیادی در افزایش سرعت سایت داره. در انتها روش‌هایی رو برای رفع خطا پیشنهاد کردیم. البته گفتیم برطرف کردن این ارور ساده نیست و نیاز به مهارت بالای برنامه نویسی داره. امیدوارم این آموزش برای شما مفید بوده باشه. تو جلسه بعدی درباره خطای Reduce the impact of third-party code صحبت خواهیم کرد.
اگه سوالی دارید در قسمت نظرات (پایین همین صفحه) بپرسید تا با کمال میل پاسخگوی شما عزیزان باشیم.
