۱۴۰۰-۱۲-۰۴ 
۷ دقیقه 
۲ 
اگر در ابزارهای سنجش سرعت سایت با خطای minimize main thread work مواجه شده‌اید، قول نمی‌دهیم که با یک یا دو راه‌کار بتوانید این خطا را برطرف کنید. درواقع این ارور می‌تواند دلایل زیادی داشته باشد. از کدهای بلااستفاده‌‌ی CSS و جاوا اسکریپت گرفته تا مسائل مربوط شخص ثالث و… همه می‌توانند در بروز این ارور ثأثیرگذار باشند. اما معمولاً این خطا در نهایت به یکی از قالب‌ها یا افزونه‌های وردپرس بر می‌گردد. تا انتهای مطلب همراه لیمومگ باشید و ۵ روش رفع خطا minimize main thread work در وردپرس را بخوانید.
اصلاً Main-thread چیست؟
برای آن که بتوانیم خطا را با آگاهی و بدون آسیب‌رساندن به سایر بخش‌ها انجام دهیم، باید درک کاملی از Main Thread Work داشته باشیم. اجازه بدهید از ابتدای ماجرا شروع کنیم. تمام فایل‌ها و کدهایی که شما برای سایت خود تعریف می‌کنید بایستی در نهایت به شکل پیکسل‌های قابل درک به کاربران نمایش داده شوند. مرورگر کاربر این وظیفه را انجام می‌دهد.
به این ترتیب که ابتدا مرورگر درخواستی را به سرور ارسال می‌کند. سرور محتوای درخواست شده را به مرورگر می‌فرستد. سپس مرورگر می‌تواند کدهای جاوا اسکریپت، CSS و HTMLرا تجزیه کند و ساختار درختی DOM را ایجاد کرده، محتوا را رندر کند و نمایش بدهد.
تمام فرآیندهایی این چنینی مثل تجزیه و رندر، main thread یا به فارسی «رشته‌ی اصلی» مرورگر هستند.
چرا با خطای minimize main-thread work مواجه می‌شویم؟
با توجه به آن چه که در قسمت قبل گفته شد، زمانی که مرورگر با منابع مسدودکننده رندر مواجه می شود که روند را کند می‌کنند، رشته اصلی مشغول و مسدود می شود. در نتیجه، صفحه نمی تواند تعاملی باشد و نمی تواند به تعاملات کاربر پاسخ دهد. این اتفاق معمولاً زمانی می‌افتد که افزونه، قالب یا فریمورک سنگینی را به سایت وردپرسی خود اضافه کرده باشید. دلیل دیگر بروزاین خطا، به عدم بهینه‌سازی صحیح تصاویر مربوط می‌شود. بنابراین بهتر است که قبل و بعد از نصب هر افزونه یا قالب، سرعت سایت خود را تست کنید. در مقالات پیشین لیمومگ درباره‌ی این دو مورد به تفصیل صحبت کرده‌ایم. بنابراین اجازه بدهید به سراغ راه‌حل‌ها برویم.
مرحله‌ی صفر: پیش از هر اقدامی منشا اصلی خطا را پیدا کنید
برای این که ببینیم چرا این خطا را دریافت کرده‌ایم بایستی گزارش‌های ابزارهایی مثل GT Metrix و PageSpeed Insights را با دقت بخوانید. در این گزارش‌ها معمولاً قید می‌شود که زمان سپری‌شده برای تحویل هریک از فایل‌ها و کدها (جاوا اسکریپت، CSS و غیره) و منابع شخص ثالث (Third-party) چقدر است.
همانطور که می بینید، توصیه‌های PageSpeed به هفت بخش مختلف تقسیم می‌شود. می‌توانید ببینید کدام دسته بیشترین تأثیر را بر عملکرد دارد.معمولاً دسته‌ٔبندی‌های زیر بیشترین تاثیر را در بهبود سرعت دارند:
- ارزیابی اسکریپت
- تجزیه و کامپایل اسکریپت
- HTML و CSS
چطور خطای minimize main thread work را برطرف کنیم؟
همانطور که گفته شد main thread شامل تجزیه و رندر کدهای CSS و HTML و جاوا اسکریپت است بنابراین برای رفع خطای minimize main-thread work بایستی هریک از این موارد را بهینه‌سازی کرد.
در این بخش ۵ روش ساده برای برطرف کردن این خطا را بررسی خواهیم کرد:
۱. جاوا اسکریپت را به تعویق بیندازید
زمانی که کاربران وب سایت شما را در مرورگر باز می کنند، مرورگر محتوای سایت را از سرور دریافت می‌کند و کد را از بالا به پایین بارگیری می‌کند. در صورتی که جاوا اسکریپت را دریافت کند، روند لود شدن صفحه تا زمانی که بارگیری جاوا اسکریپت کاملا شود، قطع می‌شود. بنابراین منطقی‌ترین کار به تعویق انداختن جاوا اسکریپت‌هاست. یعنی اسکریپت‌های JS پس از ارائه‌ی مرتبط‌ترین محتوا، بارگذاری شوند.
اگر می‌خواهید JS را به‌طور دستی به تعویق بیندازید، ابتدا باید اسکریپت‌ها را از طریق گزارش PageSpeed Insights شناسایی کنید. سپس، باید ویژگی defer را به هر فایل جاوا اسکریپت اضافه کنید تا اسکریپت‌ها تا زمانی که رندر صفحه کامل نشده است، تجزیه و بارگذاری نشوند. به این نمونه ای از ویژگی defer توجه کنید:
<script defer src=”/example-js-script”></script>
راه سریع‌تر و ساده‌تر برای به تعویق انداختن جاوا اسکریپت، استفاده از افزونه است. قابلیت Load Javascript Deferred در افزونه‌ی WP Rocket با یک کلیک به سادگی این کار را انجام می‌دهد. کافی است این افزونه را نصب کنید و در تب File Optimization به Load Javascript Deferred رفته و گزینه مورد نظر را علامت گذاری کنید.
۲. فایل‌های CSS و جاوا اسکریپت استفاده نشده را حذف کنید
برخی قالب‌ها، اسکریپت‌ها و فایل‌هایی را روی صفحات سایت شما فعال می‌کنند که در بسیاری از این صفحات کاربرد ویژه‌ای ندارند و غیرفعال کردن آن‌ها مشکلی به وجود نمی‌آورد. برای غیرفعال کردن این اسکریپت‌های استفاده نشده می‌توانید از افزونه‌هایی مثل Asset CleanUp و Perfmatters استفاده کنید. این پلاگین‌ها به شما اجازه می‌دهند فایل‌های CSS و جاوا اسکریپت را که در هر صفحه یا پست ببینید و مواردی را که در محتوای خاصی استفاده نمی شوند غیرفعال کنید.
پس از فعال سازی این افزونه‌ها، با ویرایش برگه یا پست می‌توانید فایل‌های بلا استفاده را ببینید و حذف کنید. مثلاً اگر افزونه‌ای دارید که فرم‌تماس می‌سازد، بایستی آن را در صفحاتی که نیاز به فرم تماس ندارند غیرفعال کنید.
یک روش دیگر برای حذف اسکریپت‌های استفاده نشده
در کنار تمام مواردی که گفته شد، ابزارهای دیگری هم برای حذف CSSهای بلااستفاده وجود دارند. بنابراین اگر مشکل شما با آن‌چه در پاراگراف قبلی توضیح دادیم، برطرف نشد ابزاری مثل PurifyCSS را دانلود و نصب کنید. سپس یک CSS حیاتی بازگشتی (مثلاً در WP Rocket) تنظیم کنید.ابزارهای پولی دیگری مثل RapidLoad by Autoptimize هم به خوبی می‌توانند CSSهای بلا استفاده را تشخیص دهند.
اگر سایت ووکامرسی دارید، اسکریپت‌ها و استایل‌های ووکامرس را در صفحات غیرفروشگاهی غیرفعال کنید. با حذف CSS و جاوا اسکریپت استفاده نشده، مدت زمان تحویل رشته اصلی سایت وردپرس خود را نیز به حداقل می رسانید.
۳. فشرده‌سازی جاوا اسکریپت
سومین و آخرین راه برای مدیریت این مشکل، فشرده سازی فایل‌های جاوا اسکریپت است. این کار به شما امکان می دهد از دسته بندی های ارزیابی اسکریپت و تجزیه و کامپایل اسکریپت مراقبت کنید.
هدف از فشرده‌سازی جاوا اسکریپت این است که کد را سبک‌تر و سریع‌تر کنیم. با حذف خطوط شکسته، نظرات و فاصله های سفید، اندازه فایل های جاوا اسکریپت را کاهش می دهید.
برای این کار هم می‌توانید از WP Rocket استفاده کنید. در کنار ویژگی های قدرتمند عملکرد وب، WP Rocket به شما امکان می دهد جاوا اسکریپت را در کمترین زمان و بدون هیچ تلاشی کوچک کنید. فقط به تب File Optimization بروید و فایل های Minify JavaScript را علامت گذاری کنید
۴. فشرده سازی CSS کاملاً در minimize main thread work موثر است!
بهتر است در کنار فایل‌های جاوا اسکریپت، فایل‌های CSS را نیز فشرده سازی کنید تا به دسته‌های PSI مربوط به ارزیابی اسکریپت و تجزیه HTML و CSS رسیدگی کنید. درست به همان دلیل قبلی این روش هم می‌تواند بسیار موثر واقع شود: فشرده سازی باعث کاهش اندازه‌ی کد و بارگذاری سریع‌تر می‌شود. برای فشرده‌سازی CSS ابزارهای زیادی طراحی شده‌اند. می‌توانید کد را روی ابزارهای آنلاینی مثل minifier.org بگذارید و فشرده‌ی آن را دریافت کنید. اما راه ساده‌تر استفاده از افزونه‌های بهینه‌سازی است.
۵. CSS های غیر ضروری را به تعویق بیندازید
روش دیگر برای به حداقل رساندن وظایف Main thread این است که در ممیزی PSI، فایل‌های CSS غیر ضروری را هم به تعویق بیندازید. فایل‌های CSS که در بالای صفحه نیستند و برای ارائه صفحه نیازی به آن‌ها نیست، غیرضروری هستند.
با استفاده از این روش، مرورگر فقط پس از رندر محتوای مرتبط، این CSSها را بارگیری می‌کند. برای به تعویق انداختن فایل های CSS، چند انتخاب دارید:
- روش اول:
افزونه‌هایی مثل WP Rocket را نصب کنید و با استفاده از ویژگی Optimize CSS روی گزینه‌ی گزینه Remove unused CSS کلیک کنید و فایل‌های CSS غیر ضروری را به تعویق بیندازید.
- روش دوم:
در صورت تمایل می‌توانید خودتان به روش دستی و بدون کمک افزونه، این کار را انجام دهید. یعنی با استفاده از ابزارهایی مثل DevTools یا ژنراتورهایی مثل sitelocity فایل‌های CSS ضروری را شناسایی کنید و آن‌ها را در یک کد HTML درج کنیدو کلاس‌های ضروری را در یک بلوک <style> در سر صفحه قرار دهید:
<style type=”text/css”>
.accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
</style>
سپس، با اعمال الگوی زیر، بقیه کلاس ها را به صورت ناهمزمان بارگذاری کنید:
<link rel=”preload” href=”styles.css” as=”style” onload=”this.onload=null;this.rel=’stylesheet'”>
<noscript><link rel=”stylesheet” href=”styles.css”></noscript>
نکته: link rel=”preload” as=”style” شیوه نامه را به صورت ناهمزمان درخواست می کند.
پیشنهاد مطالعه: خطای http را در آپلود فایل در وردپرس، ۶ راه رفع ارور http
سخن پایانی
به احتمال خیلی زیاد با این روش‌ها ارور « minimize main thread work» در گزارش‌های page speed insight برطرف می‌شود. در صورتی که این روش‌ها برایتان کارساز نبود احتمالا مشکل از استایل و Layout سایت شماست که بایستی با بالابردن دقت طراحی آن را بهبود ببخشید. احتمال آخر مشکل در رندرینگ است که بایستی با روش‌های خاص خود برطرف شود. در صورتی که هنوز سوالی درباره‌ی هریک از مطالب در ذهن دارید می‌توانید از بخش نظرات زیر همین پست از ما بپرسید و پاسخ بگیرید. فراموش نکنید که با دنبال کردن صفحه اینستاگرام لیموهاست می‌توانید همواره از جوایز و تخفیف‌های ما باخبر باشید!
لیمو مگ خیلی خوب توضیج میدی . مرسی
🌸🌸🌸