جلسه ۳۷ – رفع ارور Reduce JavaScript execution time

سلام همراهان عزیز میزفا
از مجموعه مقالات آموزش جی تی متریکس میزفا همراه شما هستیم. تو جلسه قبلی درباره رفع ارور Reduce initial server response time صحبت کردیم و در این جلسه به آموزش رفع خطای Reduce JavaScript execution time در جی تی متریکس می‌پردازیم. همونطور که از اسم این خطا هم مشخصه، باز هم پای فایل‌های JavaScript در میان هست. درک مفهوم و علت ایجاد ارور Reduce JavaScript execution time ساده ست؛ برای رفع این ارور هم چندین روش مختلف وجود داره که بعضی‌هاشون نیاز به تخصص و مهارت بالا در برنامه نویسی دارند.
لطفا تا پایان با میزفا همراه باشید.

خلاصه خطای Reduce JavaScript execution time

میزان سختی: *****
روی چه مواردی تاثیر می‌ذاره: TTI و First Paint و TBT

علت ایجاد خطای Reduce JavaScript execution time چیست؟

وقتی مرورگر موقع خوندن سند HTML به یه تگ <script> می‌رسه، فرآیند Render کردن صفحه رو موقتا متوقف می‌کنه و به دانلود، تجزیه و اجرای این تگ <script> و کد JavaScript داخل تگ می‌پردازه. می‌دونید مشکل این کار چیه؟ مشکل اینجاست که جاوا اسکریپت روی main-thread اجرا میشه. main-thread عنصر بسیار مهمی هست که تقریبا تمام کارهای مربوط به لود شدن صفحه رو انجام میده و اگه main-thread درگیر اجرای JavaScript بشه، فرآیند لود شدن صفحه متوقف میشه. حالا هرچقدر فایل‌های JavaScript حجیم‌تر باشند و اجرا (Execution) اونها بیشتر طول بکشه، لود شدن صفحه بیشتر به تعویق می‌افته. درحالیکه شاید اجرای اون کد JavaScript اصلا برای لود اولیه صفحه ضروری نباشه. این موضوع ماهیت و علت ایجاد خطای Reduce JavaScript execution time در جی تی متریکس جدید هست.

پس ارور Reduce JavaScript execution time و طولانی شدن زمان دانلود و اجرای JavaScript باعث افزایش زمان لود صفحه و تضعیف تجربه کاربری (UX) میشه. از طرفی فایل‌های JavaScript با حجم زیاد، زمان بیشتری برای دانلود شدن نیاز دارند. در این صورت اگه کاربری از یه اینترنت ضعیف هم استفاده کنه، این زمان براش خیلی طولانی‌تر از حالت عادی میشه. مشکل بعدی که خطای Reduce JavaScript execution time ایجاد می‌کنه، اینه که روی معیار Time to Interactive اثر مستقیم می‌ذاره و باعث میشه صفحه دیرتر برای کاربران قابل تعامل بشه. به‌عبارت ساده‌تر، تو این مدت زمان اگه کاربران کلیک یا هر ورودی مشابهی داشته باشند، پاسخی دریافت نمی‌کنند. چون مسئولیت رسیدگی به این نوع درخواست‌ها با main-thread هست که ایشون هم مشغول رسیدگی به اجرای JS هست و سرش شلوغ شده.

۲تا ویدئو زیر رو تماشا کنید تا بهتر متوجه بشید استفاده از فایل‌های JavaScript سنگین و یا غیرضروری چطور باعث کاهش سرعت لود صفحه میشه. بعدش به بررسی روش‌های برطرف کردن خطای Reduce JavaScript execution time در جی تی متریکس می‌پردازیم. ( منبع ویدئوها )

چطور خطای Reduce JavaScript execution time را برطرف کنیم؟

با علت ایجاد این مشکل آشنا شدیم و همونطور که ابتدای این مقاله هم گفته بودیم، درک مفهوم این خطا خیلی سخت نبود. حالا می‌خوایم روش‌هایی رو برای حل مشکل Reduce JavaScript execution time پیشنهاد کنیم. بیشتر این روش‌ها بر پایه و اساس موارد زیر هستند:

• کاهش حجم فایل‌های JavaScript
• بهینه سازی کدها
• حذف کردن کدهای بدون استفاده
• اجرای کدهای غیرضروری برای لود اولیه صفحه با کمی تاخیر

۱. حذف کدهای اضافی و بدون استفاده

گاهی اوقات ممکنه تو صفحاتمون بعضی کدهای JavaScript یا CSS هیچ استفاده‌ای نداشته باشند. شاید این کدها برای انجام تست اضافه شده بودند و یا مربوط به ورژن‌های قبلی سایت یا افزونه‌ها هستند. اما به‌هرحال در حال حاضر هیچ استفاده‌ای ندارند. برای حذف کدهای بدون استفاده ۲تا خطای مجزا در GTmetrix وجود داره. ما تو جلسات ۴۰ و ۴۱ آموزش جی تی متریکس میزفا، خطای Remove unused CSS و Remove unused JavaScript رو دقیق‌تر بررسی خواهیم کرد. حذف این کدهای بدون استفاده باعث رفع ارور Reduce JavaScript execution time خواهد شد.

۲. جداسازی کدها یا code-splitting

code-splitting که یه روش خیلی موثر در برطرف کردن خطای Reduce JavaScript execution time جی تی متریکس محسوب میشه، به این معناست که فایل‌های بزرگ JavaScript رو به فایل‌های کوچکتر جداسازی کنیم. سپس در لود اولیه صفحه، فقط فایل‌هایی رو اجرا کنیم که ضروری هستند. یعنی فایل‌هایی که برای لود شدن قسمت above-the-fold و یا در پردازش تعامل‌های کاربران لازم هستند. در نتیجه حجم کمتری از کدها در لود اولیه صفحه اجرا میشه و کار main-thread کمتر میشه. این موضوع باعث میشه حتی First Paint هم زودتر اتفاق بیافته. اگرچه این روش برای حل مشکل Reduce JavaScript execution time خیلی موثره، اما انجام دادنش به دانش، مهارت و تجربه بالا در برنامه نویسی نیاز داره. بنابراین به متخصصین عزیز برنامه نویسی پیشنهاد می‌کنیم برای اطلاعات بیشتر از روش انجام این کار، این مقاله رو مطالعه کنند.

۳. استفاده از الگوی PRPL

الگوی PRPL شامل ۴ روش هست. خود عبارت PRPL هم از سرواژه سازی این ۴ مورد ایجاد شده. پیاده سازی این ۴ روش در رفع ارور Reduce JavaScript execution time تاثیر زیادی داره. پس بیایید این ۴ روش رو با هم بررسی کنیم:

Preload important JavaScript files

با استفاده از Preload یا لود اولیه برای جاوا اسکریپت‌های مهم، از مرورگر می‌خوایم که زودتر از حالت عادی اون فایل JavaScript رو دانلود کنه. در این صورت main-thread بیش از حد متوقف نمیشه و این باعث افزایش سرعت سایت میشه. اگه با استفاده از متد code-splitting جاوا اسکریپت‌ها رو جداسازی کرده باشیم، با استفاده از Preload میشه اسکریپت‌های مهم‌تر که برای لود اولیه صفحه ضروری هستند رو سریع‌تر دانلود کرد. این موضوع باعث بهینه سازی TTI هم میشه. برای آگاهی از روش صحیح استفاده از Preload مقاله ارور Preload key requests رو مطالعه بفرمایید.

Rendering the First Paint as soon as possible

First Paint که مشخص کننده ایجاد اولین تغییرات قابل مشاهده در صفحه (مثل نمایش رنگ پس زمینه) در صفحه هست، معیار مهمی محسوب میشه و نباید به تعویق بیافته. با حذف منابعی که render-blocking هستند، می‌تونیم First Paint سریع‌تری داشته باشیم و باعث بهبود تجربه کاربری در سایتمون بشیم. با inline کردن جاوا اسکریپت‌های ضروری و یا اجرای جاوا اسکریپت‌های غیرضروری با کمی تاخیر، میشه منابعی که Render شدن صفحه رو متوقف می‌کنند حذف کرد. اطلاعات بیشتر و دقیق‌تر درباره حل این مشکل رو در مقاله رفع خطای Eliminate render-blocking resources براتون نوشتیم.

Pre-caching assets

احتمالا با مفهوم کش (Cache) آشنا هستید. استفاده از Pre-cache هم مشابه Cache هست اما مزایای بیشتری داره. به‌کارگیری Service Worker هایی مثل PWA ها، باعث ایجاد یه کش خیلی سنگین میشن که می‌تونه حتی منابعی که کاربر ازشون استفاده نکرده هم کش کنه. بنابراین حتی در استفاده آفلاین هم این منابع لود میشن. در نتیجه استفاده صحیح از Pre-cache تا حد زیادی باعث بهبود سرعت لود صفحات میشه. چرا که در مراجعه‌های بعدی کاربر، نیازی نیست فایل‌های JavaScript دوباره از سرور دانلود بشن و در عوض، از فایل‌های کش شده استفاده میشه.

Lazy-loading JavaScript files

شاید فکر می‌کردید تکنیک Lazy Load یا همون لود تنبل فقط برای بهینه سازی تصاویر سایت باشه. اما میشه برای فایل‌های JavaScript غیرضروری هم از Lazy Load استفاده کرد. اگه از code-splitting به‌صورت اصولی استفاده کرده باشیم، می‌تونیم جاوا اسکریپت‌هایی که برای لود اولیه صفحه ضروری نیستند رو فقط در شرایطی که لازم باشه لود کنیم. البته این کار نیاز به دانش بالا در برنامه نویسی داره. برای متخصصین برنامه نویسی مطالعه این مقاله رو پیشنهاد می‌کنیم.

این ۴ موردی که گفتیم، الگوی معروف به PRPL رو تشکیل میدن. البته میشه براساس شرایط فقط از یک یا چند مورد از این ۴ روش استفاده کرد و لزومی نداره از حتما از همه‌شون استفاده کنیم.

۴. کاهش حجم JS یا Minify JavaScript

به حذف کردن فضاهای خالی بین کدها، حذف کامنت‌ها و کدهای زائد در صفحاتمون، اصطلاحا Minify کردن گفته میشه. حذف این موارد باعث کاهش حجم JavaScript میشه و مخصوصا برای سایت‌های که فایل‌های JS حجیم دارند، اثر مطلوبی داره. در مقاله مربوط به رفع ارور Minify JavaScript آقای آریافر توضیحات تکمیلی رو بیان کردند که پیشنهاد میشه مطالعه کنید. البته این روش به تنهایی اثر زیادی در برطرف کردن خطای Reduce JavaScript execution time نداره و یه روش تکمیلی (و البته مهم) در ادامه روش‌های قبلی هست.

۵. سایر روش‌ها

• فعال سازی Gzip یا Text Compression به‌طور کلی باعث فشرده سازی منابع سایت و افزایش سرعت سایت میشه. فعال کردن Text Compression همچنین روی برطرف کردن خطای Reduce JavaScript execution time هم موثره. نکته مهمی که باید بهش توجه داشته باشیم اینه که Compression اساسا با Minification متفاوته. اما خیلی افراد این ۲ موضوع رو یکی می‌دونند و فکر می‌کنند اگه روش بالا (Minify JavaScript) رو انجام بدن، نیازی به Text Compression نیست. برای اطلاعات بیشتر پیشنهاد میشه مقاله ارور Enable text compression رو مطالعه کنید.
• استفاده از Defer یا Async هم باعث اجرای بهینه فایل‌های JavaScript میشه. در این مورد مقاله رفع خطای Defer Parsing of JavaScript رو مطالعه کنید. کاملا درباره این مفهوم مهم توضیح دادیم.
• استفاده از پلاگین های سرعت در وردپرس در حل مشکل Reduce JavaScript execution time کمک کننده ست. بیشتر این افزونه‌ها تنظیمات اختصاصی برای بهینه سازی اجرای JavaScript دارند که مرتبط با این خطا هست. برای آشنایی با این افزونه‌ها حتما مقاله بهترین افزونه های سرعت وردپرس رو که خانم علیزاده نوشتند مطالعه کنید.

۶. کار رو به یه متخصص سئو یا تیم سئو بسپارید

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

جمع بندی

در این مقاله میزفا درباره روش رفع ارور Reduce JavaScript execution time در GTmetrix جدید صحبت کردیم. این خطا مربوط به بهینه سازی فایل‌های JavaScript و خصوصا بهینه سازی اجرای اونها هست تا از این طریق main-thread کمتر درگیر بشه و صفحه سریع‌تر Render بشه. امیدوارم این آموزش برای شما مفید بوده باشه. تو جلسه بعدی درباره خطای Reduce the impact of third-party code صحبت می‌کنیم.

اگه سوالی دارید در قسمت نظرات (پایین همین صفحه) بپرسید تا با کمال میل پاسخگوی شما عزیزان باشیم.