قسمت ۱۸ - کاهش زمان اجرایی جاوا اسکریپت

رفع خطای Reduce JavaScript execution time

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

خطای Reduce JavaScript execution time چیست؟

در هر صفحه از سایت معمولاً فایل‌های جاوا اسکریپت وجود دارند و به دلیل سنگین بودن این فایل‌ها، ممکن است بارگذاری صفحه با مشکل مواجه شود. برای آن که یک مرورگر بتواند محتوای یک صفحه از سایت را به شما نمایش دهد، باید حتماً آن را به صورت کامل خوانده، اطلاعات آن را تجزیه و تحلیل کرده و در نهایت، آن را در مرورگر کاربر نمایش دهد. در کدنویسی هر جا که پای فایل جاوا اسکریپت وسط باشد، باید از تگ <script> استفاده شود. در این تگ لینک مربوط به فایل جاوا اسکریپت وجود دارد و اگر مرورگر کاربر بخواهد آن را بخواند، باید تمام اطلاعات داخل آن فایل را دانلود و آنالیز کند.

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

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

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

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

آموزش رفع خطای Reduce JavaScript execution time در سایت

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

1.       پاک کردن کدهای اضافی و بدون استفاده

در نگاه اول، هنگامی که به کدهای سایت نگاه می‌کنیم فکر می‌کنیم که تمام کدهای آن قابل استفاده هستند! در حالی که اگر به صورت فنی و تخصصی به آن نگاه کنیم، متوجه می‌شویم که بسیاری از کدهایی که در صفحه وجود دارند، هیچ‌گونه کاربردی ندارند. بسیاری از کدهای CSS و جاوا اسکریپت در سایت‌های مختلف به همین صورت هستند و تنها باعث کاهش سرعت بارگذاری سایت می‌شوند. بنابراین اولین راه برای رفع خطای Reduce JavaScript execution time این است که کدهای اضافی و بدون استفاده را رفع کنید! اگر از وردپرس استفاده می‌کنید، فعال بودن پلاگین‌های بدون استفاده روی سایت باعث بروز چنین مشکلی می‌شود. بنابراین حتماً باید دقت کنید افزونه‌های بلا استفاده را از روی سایت خود حذف یا حداقل غیرفعال کنید.

البته در جی‌تی‌متریکس دو خطای Remove unused CSS و Remove unused JavaScript هم به چشم می‌خورد که دقیقاً مربوط به همین دو مورد می‌شود! بنابراین اگر سایت شما جاوا اسکریپت یا سی اس اس بدون استفاده داشته باشد، جی‌تی‌متریکس خطای آن را به شما نمایش داده و راه‌های بهینه‌سازی آن را هم در اختیار شما قرار می‌دهد. رفع این خطاها و در واقع رفع کدهای اضافی به شما کمک می‌کند تا بتوانید خطای Reduce JavaScript execution time را هم روی سایت خود از بین ببرید.

2.      جدا کردن کدها (code splitting)

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

این روش یک مزیت بسیار عالی دیگر هم دارد! آن هم این است که باعث می‌شود تا First Paint زودتر اتفاق بیفتد. البته انجام این روش نیازمند مهارت و تجربه بالایی در برنامه‌نویسی است و افراد مبتدی قادر به انجام آن نخواهند بود. بنابراین اگر شما تجربه کافی در زمینه برنامه‌نویسی ندارید، پیشنهاد می‌کنیم اصلاً دست به چنین کاری نزنید و حتماً از یک برنامه‌نویس ماهر استفاده کنید تا سایت شما با مشکل مواجه نشود. همچنین تهیه نسخه پشتیبان قبل از انجام هر گونه تغییری در سایت را فراموش نکنید تا اگر مشکلی به وجود، سریعاً نسخه اولیه آن را بازگردانی کنید.

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

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

·        Preload important JavaScript files

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

·        Rendering the First Paint as soon as possible

با First Paint آشنا هستید؟ این مسئله نشان می‌دهد که اولین تغییر قابل مشاهده در سایت بسیار مهم هستند و بارگذاری آن‌ها نباید به تعویق بیفتد. برای آن که بتوانید First Paint سریع‌تری داشته باشید، می‌توانید منابعی در سایت که render-blocking هستند را حذف کنید. این کار باعث افزایش  سرعت بارگذاری سایت و در نهایت بهینه‌سازی تجربه کاربری در سایت می‌شود. همچنین اگر فایل‌های جاوا اسکریپت خیلی ضروری هستند، می‌توانید آن‌ها را این‌لاین کنید تا سریع‌تر بارگذاری شود! البته توجه داشته باشید که تنها برای فایل‌های جاوا اسکریپت خود چنین کاری را انجام دهید و نیازی به استفاده از آن برای فایل‌های غیرضروری نیست.

·        Pre-caching assets

اگر در حوزه وب یا تکنولوژی فعالیت داشته باشید، حتماً با مفهوم کش (Cache) آشنا هستید! مفهوم کش به معنی ذخیره کردن بخشی از اطلاعات در سیستم کاربر است تا در هنگام بارگذاری مجدد سرعت بارگذاری افزایش پیدا کند. یکی دیگر از مفاهیمی که وجود دارد، Pre-cache است! این قابلیت نسبت به کش مزایای بیشتری دارد. به عنوان مثال با به کار گرفتن Service Worker هایی مثل PWA ها به شما کمک می‌کند تا منابعی که کاربر از آن استفاده نکرده را هم ذخیره کرده و حتی زمانی که کاربران آفلاین هستند بتوانند محتوای سایت شما را به صورت کامل ببینند. بنابراین استفاده از قابلیت Pre-cache به شما کمک می‌کند تا سرعت لود صفحات سایت تا حد زیادی افزایش پیدا کند. زیرا هنگام بازدید دوباره کاربران دیگر نیازی به دانلود دوباره فایل های جاوا اسکریپت نیست و فایل های کش شده به راحتی قابل فراخوانی هستند.

·        Lazy-loading JavaScript files

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

این 4 روش مربوط به الگوی PRPL هستند که کمک زیادی به رفع خطای PRPLReduce JavaScript execution time می‌کنند. البته شما نیازی به استفاده از همه آن‌ها ندارید و کافی است از آن‌هایی که نیاز است استفاده کنید.

4.      کاهش حجم یا فشرده کردن فایل‌های جاوا اسکریپت

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

5.     فعال کردن قابلیت G-Zip

یکی دیگر از روش‌های کاربردی برای رفع خطای PRPLReduce JavaScript execution time که بسیاری از سایت‌ها از آن استفاده می‌کنند، فعال کردن قابلیت G-zip است. این قابلیت به شما کمک می‌کند تا فایل‌های سایت خود را فشرده‌سازی کنید و با این کار به افزایش سرعت سایت خود کمک کنید. البته اگر از این روش استفاده می‌کنید، باید دقت کنید که نیازی به استفاده از روش مورد 5 نیست! زیرا فشرده‌سازی و از بین بردن خطوط اضافی کاملاً متفاوت هستند و کافی است از یکی از آن‌ها استفاده کنید.

6.      استفاده از Defer یا Async

یکی دیگر از مواردی که در رفع خطای PRPLReduce JavaScript execution time موثر است، استفاده از Defer یا Async است! دلیل آن هم این است که این دو قابلیت به اجرای بهینه فایل‌های جاوا اسکریپت کمک زیادی می‌کنند و می‌توانید به رفع این خطا کمک زیادی کنید.

با استفاده از این 6 روش به راحتی می‌توانید خطای موردنظر را رفع کنید و به افزایش سرعت بارگذاری سایت خود کمک کنید.

نتیجه‌گیری

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