رفع خطای Avoid long main-thread tasks در جی تی متریکس

اگه رگ مسدود بشه، مسلما روی جریان خون تاثیر داره و باعث میشه خون رسانی در بدن به خوبی قبل نباشه. long main-thread tasks هم دقیقا مثل مسدود شدن رگ بدن باعث میشه مرورگر نتونه صفحه سایت شما رو رندر کنه. در نتیجه، سرعت بارگذاری سایت به شدت میاد پایین و سایت شما تجربه کاربری بدی خواهد داشت. 

حالا چجوری باید از سرش خلاص شیم؟ تو این مقاله بهتون میگم.

  در این مقاله، در مورد اینکه main thread چیه؟ چیکار میکنه؟ و چه عناصری رو مسدود میکنه صحبت میکنیم. در نهایت هم روش رفع خطای Avoid long main-thread tasks رو بهتون میگم.

فهرست:

• Main thread چیست؟
• چه چیزهایی روی main thread تاثیر می گذارد؟
  • فایل های CSS بهینه نشده
  • منابع شخص ثالث
  • رندر در سمت کلاینت
• رفع خطای Avoid long main-thread tasks
  • تقسیم کد
  • کوچک کردن CSS و جاوا اسکریپت
  • بهینه سازی کد جاوا اسکریپت
  • بارگذاری تنبل منابع غیر بحرانی
  • بهینه سازی فونت ها
  • استفاده از وب ورکرها
  • استفاده از روش های بهتر رندر
• جمع بندی

Main thread چیست؟

Main thread بخشی از مرورگرِ که مسئول رسیدگی به رویدادهای کاربر، رندر کردن رابط کاربری و اجرای کد جاوا اسکریپت هستش. در واقع یکی از مهم ترین بخش های مرورگر محسوب میشه و میتونید اون رو به عنوان واحد پردازش مرکزی در مرورگر در نظر بگیرید.

همه‌ی مرورگرها به طور پیش فرض با یه دونه Main thread کار میکنند، بنابراین مرورگر نمیتونه چندین کار رو به طور همزمان انجام بده. Main thread برای اینکه فرایند اولیه بارگذاری صفحه سایت انجام بشه باید کارهای زیادی انجام بده، مثلا ساخت DOM tree، واکشی استایل های CSS و اعمالشون، تجزیه و تحلیل و اجرای کد جاوا اسکریپت، و تولید طرح بندی صفحه. در مجموع این وظایف باعث میشه که مرورگر یه صفحه رو به کاربر نشون بده. 

 main thread فقط میتونه این وظایف رو به صورت متوالی انجام بده یعنی قادر نیست اونها رو همزمان عملی کنه، بنابراین زمان بارگذاری وب سایت تحت تأثیر فایل هایی که پردازششون زمان بره قرار میگیره. اغلب به این وظایف میگن render-blocking resources که قبلا در موردشون صحبت کردیم. 

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

کاهش بار main thread برای جلوگیری از عدم پاسخگویی صفحات و اثرات منفی بر روی هسته حیاتی وب ضروریه. در نتیحه، اگه میخواین سئو سایتتون رو بهتر کنید باید بار main thread رو کاهش بدید. 

چه چیزهایی روی main thread تاثیر می گذارد؟

منابع مسدودکننده رندری که در ادامه معرفی میکنم، روی توانایی main thread برای تجزیه HTML، ساخت DOM، اعمال استایل های CSS و اجرای کد جاوا اسکریپت تأثیر میذارند.

فایل های CSS بهینه نشده

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

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

منابع شخص ثالث 

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

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

رندر در سمت کلاینت

وب‌سایت‌هایی که سمت کلاینت رندر میشن اغلب زمان بارگذاریشون کند هستش. مرورگر قبل از اینکه بخواد صفحه رو رندر کنه ابتدا کد جاوا اسکریپت لازم و پوسته HTML خالی رو واکشی میکنه. این فرآیند زمان رندر اولیه رو کند میکنه. علاوه بر اینکه چگونه رندر سمت کلاینت (CSR) میتونه روی main thread تأثیر بذاره، یکی دیگه از ضعف‌هاش اینه که برای سئو سایت بده و مشکلات امنیتی برای سایتتون به وجود میاره. 

رفع خطای Avoid long main-thread tasks 

هر چی main thread کمتر کار کنه، سریعتر میتونه رویدادها رو پردازش کنه، رابط کاربری رو رندر کنه و کد رو اجرا کنه. در ادامه استراتژی‌های مختلف برای رفع خطای Avoid long main-thread tasks رو معرفی میکنم.

تقسیم کد

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

تقسیم کد همچنین بارگذاری جاوا اسکریپت غیر ضروری رو هنگام رندر کردن صفحات کاهش میده. در عوض، صفحات میتونند فقط جاوا اسکریپتی که برای رندر نیاز دارند رو بارگیری کنند. به عنوان مثال، با تقسیم کد، مسیر /user و مسیر /blog فقط کد مورد نیاز رو بارگذاری می کنند و این کار باعث میشه عملکرد صفحه شما بهتر بشه.

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

کوچک کردن CSS و جاوا اسکریپت

مرورگر باید فایل‌های CSS و JavaScript رو قبل از رندر کردن صفحه وب دانلود کنه. با این حال، اگه این فایل‌ها بزرگ باشند، main thread رو مسدود می‌کنند و بارگذاری صفحه سخت میشه.

حذف کدهای اضافی و کاراکترهای غیر ضروری مانند نظرات، برگه‌ها یا فضاهای خالی میتونه اندازه فایل رو به شدت کاهش بده.

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

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

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

بارگذاری تنبل منابع غیر بحرانی

بارگذاری تنبل به ما اجازه میده تا بارگذاری منابع غیر بحرانی رو به تعویق بیندازیم و باعث میشه بار کاری روی main thread کمتر بشه. تصاویر و اسکریپت‌های شخص ثالث برای تبلیغات و … رو میتونید بارگذاری تنبل کنید تا بار کاری روی main thread کمتر بشه.

بهینه سازی فونت ها

فونت ها بخش حیاتی رندر وب سایت هستند و میتونند زمان بارگذاری وب سایت رو کاهش بدن. فونت‌هایی که بهینه نباشند روی فاکتورهای Core Web Vitals مثل Cumulative Layout Shift (CLS) و Largest Contentful Paint (LCP) تأثیر میذارند.

میتونید فونت‌های مسدودکننده رندر رو با بارگذاری اولیه اونه ها و ارائه نسخه‌های بازگشتی اصلاح کنید.

با این کد میتونید به صورت دستی فونت ها رو از قبل بارگذاری کنید:

<!-- Add the link tag with a preload attribute to the head of your HTML -->
<head>
  <link
    rel="preload"
    href="https://fonts.googleapis.com/css2?family=Nunito&display=swap"
    rel="stylesheet"
  />
</head>

/* then add the font declaration in the external stylesheet */
@font-face {
  font-family: "Nunito", sans-serif;
  font-style: normal;
  font-weight: ۴۰۰;
  font-display: optional;
}

استفاده از وب ورکرها

هرچه یه وب سایت یا برنامه وب پیچیده تر باشه، main thread باید عملیات بیشتری رو انجام بده. وب ورکرها به ما اجازه میدن کد رو خارج از main thread اجرا کنیم و از کار بیش از حد main thread جلوگیری میشه.

میتونید از وب ورکرها برای اجرای وظایف فشرده CPU استفاده کنید که اگه روی main thread انجام بشه، رابط کاربری رو مسدود میکنه.

استفاده از روش های بهتر رندر

رندر سمت سرور (SSR) و تولید سایت ایستا (SSG) کاستی های رندر سمت کلاینت که در موردش صحبت کردیم رو با مدیریت رندر روی سرور به جای مرورگر برطرف میکنه.

این روش‌های رندر به‌جای بارگذاری فایل‌های ضروری در مرورگر، فایل HTML تکمیل‌شده رو قبل از ارسال به مرورگر روی سرور تولید میکنند. دور کردن فرآیند رندر از مرورگر، main thread رو آزاد میکنه و حجم کاریش رو کاهش میده.

جمع بندی

به حداقل رسوندن کار main thread برای توسعه وب سایت های کارآمد و ارائه بهترین تجربه کاربری خیلی مهمه. میتونید وظایف main thread رو با استفاده از روش‌های رندر کارآمدتر، استفاده از وب‌ ورکرها، بهینه‌سازی فونت‌ها، بارگذاری تنبل، کوچک‌سازی CSS و جاوا اسکریپت و تقسیم کد به تکه‌های کوچک‌تر بهینه کنید.

با استفاده از این استراتژی و ایجاد تجربه کاربری بهتر، سئو و عملکرد سایتتون به طور قابل توجهی بهبود پیدا میکنه.

در این مقاله در مورد روش رفع خطای Avoid long main-thread tasks صحبت کردیم. ممنون که تا انتهای مقاله همراه من بودید در صورتی که حس میکنید مطلبی هست که گفته نشده حتما در قسمت نظرات با ما به اشتراک بگذارید. در صورت داشتن هرگونه سوال با تیم پشتیبانی پارس اوستا در ارتباط باشید.