رفع خطای Minify JavaScript and CSS در YSlow جی تی متریکس

آموزش افزایش سرعت سایت با GTmetrix

 

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

 

خطای Minify JavaScript در Gtmetrix چیست

عبارت Minify در روند بهینه‌سازی‌سایت به معنای طراحی سایت با فایل‌های حجم پایین است. هدف از Minify کردن از بین بردن فضاهای خالی در بین کدها است. خط‌ها و کاراکترهای غیرضروری در سورس کدهای شما را در جهت بهینه سازی سرعت سایت از بین می‌برد. معمولا از این روش برای فایل‌هایی که سمت کاربر ارسال می‌شود، استفاده می‌کنند، فایل‌هایی از قبیل HTML ، CSS و جاواسکریپت. توجه داشته باشید که شما می‌توانید فایل‌های PHP را Minify کنید ولی PHP زبان برنامه نویسی سمت سرور است و Minify کردن آن تاثیری در بالا بردن سرعت سایت در سمت مرورگر کاربر ندارد.

عمل اصلی که در ٰMinify انجام می‌گیرد فشرده سازی فایل‌ها سمت کاربر است و مزیت آشکار این سریع‌تر لود شدن فایل‌ها و در نتیجه افزایش سرعت سایت است. نکته مهمی که باید به آن اشاره کنیم این است که عمل Minify کردن منابع (فایل‌ها) جدا از اینکه باعث بهبود تجربه کاربری (تجربه کاربری چیست) می‌شود موتورهای جستجو هم چنین فایل‌هایی با حجم کمتر را بیشتر دوست دارند.

 

روش سوم Minify JavaScript

اگر از سیستم مدیریت محتوای وردپرس استفاده می‌کنید می‌توانید از پلاگین‌ رایگان Better WordPress Minify برای minify کردن فایل‌های JS استفاده کنید. پلاگین‌های جامع دیگر هم هستند که جدا از minify کردن انواع فایل‌ها سمت کاربر، تنظیمات دیگری هم برای بالا بردن سرعت لود سایت در اختیار شما می‌دهند به عنوان مثال پلاگین رایگان WP Super Minify هم minify کردن فایل‌های سمت کاربر را انجام می‌دهد و هم نیز تنظیمات مختلف دیگر برای افزایش سرعت سایت شما در این پلاگین دیده می‌شود. همچنین پلاگین حرفه‌ای (غیررایگان) WP Rocket  هم امکانات بسیار خوبی برای بالا بردن سرعت سایت دارد و یکی از کارهای ان پلاگین قدرتمند minify Javascript است. (البته سایت میزفا بنا به درخواست کاربران این افزونه را به شکل اورجینال تهیه کرده، اگر تمایل دارید آموزش جامع این آموزش به همراه نسخه اورجینال آن را تهیه کنید دوره تنظیمات wp rocket را از دست دهید.)

روش چهارم Minify JavaScript

برخی از CDN ها همانند Cloudflare تظیماتی مبنی بر فشرده سازی فایل‌ها زیر دارند، اگر سایت شما بر روی چنین CDNهایی هست می‌توانید از این تنظیمات در جهت بهینه سازی سایت خود استفاده نمایید.

 

3. Minify javascript برای سایت‌های پویا

تو این حالت سایت شما با استفاده از CMS ها و سایت سازها طراحی شده که دیتابیس دارید و باید از افزونه‌های فشرده ساز استفاده کنید. برای این کار هم افزونه‌های مختلفی ساخته شده که هر کدوم قابلیت‌ها و امکانات خاصی رو به شما میده. اما پیشنهاد می‌کنم برای این کار از افزونه‌ای استفاده کنید که امکانات بیشتری در اختیارتون قرار بده که بتونید علاوه بر minify javascript وردپرس قادر باشید که فایل‌های دیگه مثل CSS و HTML رو هم فشرده کنید. تا به امروز چند افزونه در پایگاه دانش میزبان‌فا برای این کار معرفی کردم که میتونید با مراجعه به مقالات آموزش نحوه نصب افزونه wp rocket جهت افزایش سرعت سایت و آموزش فشرده سازی فایل‌ها در وردپرس و افزایش سرعت سایت با این افزونه‌ها آشنا شده و ازشون استفاده کنید.

4. استفاده از CDN

دو روش قبلی به شکلی بودن که میتونستید فایل‌ها رو بهینه کنید. اما یه حالتی هم وجود داره که با استفاده از این حالت علاوه بر اینکه میتونید همین کار فشرده سازی فایل‌های JS رو پیاده سازی کنید، به دلیل استفاده از شبکه توزیع محتوا CDN این امکان رو هم دارید که داده‌ها رو بر روی بستری به کاربران ارائه بدین که بر اساس موقعیت جغرافیایی از نزدیک‌ترین سرور براشون در دسترس بگیره. این کار میتونه باعث افزایش چند برابری سرعت سایت شما هم بشه.

برای این کار میتونید از کلودفلر استفاده کنید. قبل از هر کاری به راهنمای آموزش استفاده از Cloud Flare  مراجعه کنید و DNS های دامنه خودتون رو روی کلودفلر تنظیم کنید. سپس در پنل کاربری کلودفلر مشابه تصویر زیر روی گزینه SPEED کلیک کرده و تیک سه گزینه javascript، css و HTML رو فعال کنید.

 

روش رفع خطا (راه حل) :

برای رفع این خطا کافیست فایل های css و js و حتی استایل ها و کدهای js که در body یا head استفاده کردید رو به صورت زیر ویرایش کنید :

1. تمامی فاصله های خارج از پرانتز ها را حذف کنید .
2. تمامی اینتر ها (خط بعد) را حذف کنید (به صورتی که فایل نهایی کلا 1 الی 3 خط داشته باشد !) .

اگر هم حوصله این کارهارو ندارید (99% اوقات همینطوره) کافیه به سایت Minifier (کلیک کنید) برید و کد های css یا js خودتون رو بهش بدید تا براتون مرتب شده برگردونه .

 

اگر از سیستم مدیریت محتوا وردپرس (WordPress) استفاده میکنید میتونید با افزونه Autoptimize اینکار رو به سادگی هرچه تمام انجام بدید . (این افزونه کارهای زیاد دیگه ای هم انجام میده و عالی هستش) .

افزونه Autoptimize در مخزن وردپرس : https://enegah.com/link-building/

 

امیدوارم با مطالعه این پست مشکلتون حل شده باشه ! اگر همچان با این مشکل روبه رو هستید میتونید با بخش طراحی سیپنل آسیا در ارتباط باشید تا براتون این مشکل رو حل کنند