سلام همراهان عزیز میزفا
از مجموعه مقالات آموزش GTmetrix میزفا همراه شما هستیم. تو مقاله قبلی درباره رفع خطای Avoid large layout shifts صحبت کردیم و در این مقاله به آموزش برطرف کردن مشکل Avoid long main-thread tasks در ابزار GTmetrix جدید می‌پردازیم. خطای Avoid long main-thread tasks اشاره به این موضوع داره که نباید برای مرورگر وظایف (Tasks) طولانی تعریف کنیم و نباید از فایل‌های جاوا اسکریپتی استفاده کنیم که اجرای اونها باعث درگیر شدن طولانی مدت main thread بشه. رفع خطای Avoid long main-thread tasks کاملا سخت بوده و نیاز به مهارت بالای برنامه نویسی داره. برای رفع این خطا باید فایل‌های JavaScript و گاها CSS که باعث بروز این مشکل میشن رو شناسایی و بهینه سازی کنیم.
لطفا تا پایان با میزفا همراه باشید.
سرفصل‌های پست
خلاصه خطای Avoid long main-thread tasks
میزان سختی: *****
روی چه مواردی تاثیر میذاره: TBT و TTI و خطای Minimize main-thread work
علت ایجاد خطای Avoid long main-thread tasks چیست؟
برای اینکه ارور Avoid long main-thread tasks رو بهتر درک کنیم، لازمه اول با چند معیار مهم درباره مرورگر آشنا بشیم. پس بیایید در ابتدا ببینیم main thread چیه؟ همونطور که در مقاله گزارش Performance جی تی متریکس هم گفته بودیم، هنگامی که صفحه وبسایت در حال لود شدنه، لازمه منابع زیادی فراخوانی بشن و وظایف و عملیات گوناگونی پشت صفحه رخ میده. کارهایی مثل تجزیه فایل‌های HTML و CSS ، ساختن DOM ، اجرای فایل‌های JavaScript و… به زبون خیلی ساده، مرورگر از main thread برای اجرای این کارها یا درخواست‌های کاربر (مثل کلیک کردن) استفاده میکنه.
یه مثال خیلی خوب برای درک بهتر main thread اینه که main thread رو مثل گارسون رستوران در نظر بگیریم. این گارسون وظایف مختلفی مثل گرفتن سفارش‌ها، تحویل سفارش به آشپزخانه، بردن غذا سر میز، تمیز کردن میزها و… داره. حالا اگه یکی از کارهای این گارسون بیش از حد طول بکشه، چه اتفاقی می‌افته؟ درسته، به کارهای مهم دیگه نمی‌رسه. پس باید طوری وظایف گارسون (main thread) رو طراحی کنیم که رسیدگی به یک کار خاص، وقتش رو بیش از حد نگیره.
معیار بعدی که باید باهاش آشنا بشیم، Task هست. Task مفهوم پیچیده‌ای نداره. رویدادهایی مثل تجزیه سند HTML یا تجزیه CSS و همچنین تجزیه و اجرای JavaScript، هر کدوم یه Task یا وظیفه برای مرورگر محسوب میشن. نکته کلیدی که اینجا باهاش کار داریم، اینه که تعدادی از Task ها روی main thread اجرا میشن.
اگه به مثالمون برگردیم، هر کدوم از وظایفی که گارسون عزیز مسئولیت انجامش رو بر عهده داره، یه Task محسوب میشه. حالا اگه یه Task بیش از حد طولانی بشه، همونطور که گفتیم باعث میشه گارسون (مرورگر) کمی دیرتر به انجام سایر موارد ضروری برای لود کامل صفحه برسه. بنابراین صفحه دیرتر قابل تعامل میشه و این مستقیما روی Time to Interactive اثر میذاره. اگه نمی‌دونید معیار TTI چقدر در بهینه سازی سرعت سایت مهمه، کافیه مقاله Time to Interactive چیست رو مطالعه کنید. حل مشکل Avoid long main-thread tasks همچنین در بهینه سازی معیار First Paint هم موثره.
درباره اینکه خطای Avoid long main-thread tasks دقیقا چه زمانی ایجاد میشه، باید بگیم هروقت انجام یکی از Task ها بیش از ۵۰ میلی ثانیه طول بکشه، خطای Avoid long main-thread tasks ایجاد میشه. در عکس زیر از سایت GTmetrix این موضوع بهتر مشخص شده.
در عکس بالا، هر کدوم از موارد A تا E یه Task هستند که می‌تونه اجرای فایل‌های JavaScript یا یه فایل CSS یا چیز دیگه‌ای باشه. موارد A و B و E که با رنگ قرمز مشخص شدند، main thread رو بیش از ۵۰ میلی ثانیه متوقف می‌کنند. در نهایت این مسئله باعث کندی سرعت لود صفحه میشه.
چطور خطای Avoid long main-thread tasks را برطرف کنیم؟
همونطور که در ابتدای مقاله هم گفتیم، حل مشکل Avoid long main-thread tasks ساده نیست و نیاز به تجربه و مهارت بالا در برنامه نویسی داره. با کلیک کردن روی این خطا در گزارش Structure جی تی متریکس با صحنه‌ای شبیه عکس زیر مواجه می‌شیم. در اینجا GTmetrix لیستی از مواردی که بیش از ۵۰ میلی ثانیه main thread رو درگیر کردند نمایش میده. با بررسی این موارد باید اولویت بندی کنیم و ببینیم کدوم یکی از اونها قابلیت بهینه سازی رو دارند.
همونطور که ملاحظه می‌کنید ارور Avoid long main-thread tasks در سایت میزفا تا حد بسیار زیادی بهینه سازی شده. اما ممکنه در بعضی از سایت‌ها خطای Avoid long main-thread tasks یه مشکل جدی باشه و با درجه اهمیت بالا (High) باشه. مثل نمونه زیر که مشاهده می‌کنید.
همینطور که در عکس بالا هم مشاهده می‌کنید (و طبق تجربه ما در پروژه های بهینه سازی سرعت سایت در میزفا) اجرای فایل‌های JavaScript بیشترین مشکل رو در این زمینه ایجاد می‌کنند. پس برای برطرف کردن خطای Avoid long main-thread tasks در GTmetrix جدید باید حواسمون به جاوا اسکریپت‌ها باشه. مخصوصا فایل‌های سنگین جاوا اسکریپت که باید با روش‌های اصولی و توسط متخصص برنامه نویسی به قسمت‌های کوچکتر تقسیم بشن و اصطلاحا کدهاشون Split بشه که این مقاله منبع خوبی برای متخصصان برنامه نویسی در این زمینه محسوب میشه.
همچنین توجه به فایل‌های JavaScript که از سایت‌های دیگه در صفحات ما لود میشه خیلی مهمه. مخصوصا اگه این منبع نامعتبر باشند و یا استفاده از کدهای اونها در سایت ما غیرضروری باشه بهتره که حذفشون کنیم یا اجرای اونها رو به تعویق بندازیم. البته اگه این کدها برای سایت‌های معتبری مثل گوگل، فیسبوک و… باشند که سرورهای قوی دارند، جای نگرانی نیست. بلکه باید سایت‌هایی که اعتبار کمتری دارند رو بررسی کنیم.
در مجموع باید سعی کنیم تا جایی که امکان داره از Task های کوچکتر که کمتر از ۵۰ میلی ثانیه زمان نیاز دارند استفاده کنیم. اما یه روش خوب دیگه برای رفع ارور Avoid long main-thread tasks در GTmetrix اینه که از مسئولیت اجرای فایل‌های JavaScript رو از دوش main thread برداریم. همونطور که چندین بار در این مقاله اشاره کردیم، مشکل اصلی در خطای Avoid long main-thread tasks درگیر شدن طولانی و بیش از حد جناب main thread هست. پس اگه بتونیم اجرای JavaScript رو با روشی بدون درگیر شدن main thread انجام بدیم، باعث میشه این خطا تا حدی برطرف بشه. خوشبختانه این کار با استفاده از Web Worker ها امکان پذیره. اما چون صحبت کردن درباره روش انجامش بحث تخصصی برنامه نویسی هست و احتمالا از حوصله مخاطبان این مقاله میزفا خارج باشه، برای دوستانی که علاقه دارند اطلاعات بیشتری به‌دست بیارند، لینک مقاله رو قرار دادیم تا در صورت تمایل مطالعه کنند.
سایر روش‌هایی که می‌تونند به برطرف کردن خطای Avoid long main-thread tasks کمک کنند شامل موارد زیر هستند:
- کاهش حجم فایل‌های CSS
- کاهش حجم فایل‌های JavaScript
- استفاده از روش Defer parsing of JavaScripts و به تعویق انداختن اجرای جاوا اسکریپت‌های غیرضروری
- حذف CSS بدون استفاده و برطرف کردن خطای Remove unused CSS
- حذف JavaScript بدون استفاده و برطرف کردن خطای Remove unused JavaScript
- برای رفع این ارور در سایت های وردپرسی پیشنهاد میشه مقاله بهترین افزونه سرعت وردپرس مطالعه کنید و بهتون کمک زیادی برای رفع اکثر خطاهای سایت جی تی متریکس میکنه.
از یه متخصص SEO یا برنامه نویسی کمک بگیرید
مقاله رو خوندید؟ سایر سایت‌ها رو هم مطالعه کردید؟ آیا تلاش کردید تا بتونید براساس راهنمایی که کردیم کار رو انجام بدید و این مشکل رو حل کنید؟ اگه مشکل هنوز حل نشده، اجازه بدید یه تیم حرفه‌ای سئو براتون انجام بده؛ اگه تیم خوب می‌شناسید که هیچ ولی اگه دنبال یه تیم حرفه‌ای و همینطور دنبال خدمات خوب در زمینه سئو می‌گردید، می‌تونید خدمات سئو میزفا رو یک نگاهی بکنید، کلی خدمات متنوع برای بهینه سازی سرعت سایت و بهبود SEO در این صفحه هست که می‌تونه براتون خیلی مفید باشه.
جمع بندی
در این مقاله میزفا درباره حل مشکل Avoid long main-thread tasks در GTmetrix جدید صحبت کردیم. ما در ابتدا درباره اهمیت main thread صحبت کردیم و سپس دلیل ایجاد این خطا رو گفتیم. سپس روش‌هایی رو برای برطرف کردن این نوع خطا برای شما عزیزان بیان کردیم. امیدوارم این آموزش براتون مفید بوده باشه. تو مقاله بعدی درباره خطای Avoid multiple page redirects و اهمیتش در بهینه سازی سرعت صحبت خواهیم کرد.
اگه سوالی دارید می‌تونید در نظرات همین صفحه (پایین هست) بپرسید تا با کمال میل به شما پاسخ بدیم.
