آموزش رفع خطای Minify JavaScript در GTmetrix

آموزش رفع خطای Minify JavaScript در GTmetrix

سایت Gtmetrix یکی از سایت های پرطرفدار برای بررسی سایت های اینترنتی می باشد که در این زمینه اطلاعات مفید و گسترده ای در اختیار کاربران قرار می دهد. یکی از خطاهایی که ممکن است نمایش داده شود خطا Minify JavaScript در Gtmetrix می باشد که مربوط  به قسمت کدنویسی قالب سایت شما و کد های سمت کاربر می باشد.  

Minify کردن یعنی چه؟

معنی لغوی Minify کردن، کوچک کردن و مختصر کردن است و در حوزه بهینه سازی موتورهای جستجو به معنای کاهش اندازه فایل‌های JavaScript، CCS و HTML یک سایت به کار می‌رود که باعث کاهش تعداد درخواست‌های HTTP می‌شود.

چرا Minify کردن مهم است؟ 

به دلیل آنکه یکی از موثرترین و محبوب‌ترین راه‌ها برای کاهش اندازه صفحات مورد نظر شما در یک وب سایت و در نتیجه بهینه سازی موتورهای جستجواست. Minify کردن فایل‌های یک وب سایت، المان‌های غیر ضروری را از این فایل‌ها حذف می‌کند. از المان‌هایی که شما با Minify کردن قادر خواهید بود با حذف آنها به میزان قابل توجهی سایز وب سایت خود را کاهش دهید، می‌توان به موارد زیر اشاره کرد:

• فاصله (space) های غیرضروری در فایل‌ها

• Line-break های غیرضروری در فایل‌ها

• کدهای غیرضروری نوشته شده در فایل‌ها

علت خطای Minify JavaScript

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

به مثال زیر توجه کنید:

var currentTime = new Date(), hours = currentTime.getHours(), minutes = currentTime.getMinutes(); if (minutes < 10) { minutes  = "0" + minutes; }   var suffix = "AM"; if (hours >= 12) { suffix = "PM"; hours = hours - 12; } if (hours == 0) { hours = 12; }   time = hours + ":" + minutes + " " + suffix;   document.getElientById("time").innerHTML = time; اگر به کد بالا توجه کرده باشید برای درک بهتر کدنویسی از فضاهای خالی زیر استفاده شده است ولی زیبانویسی تاثیری برای موتورهای جستجو و مرورگرها ندارد. Minify شده یک فایل Javascript همانند زیر است: var currentTime=new Date,hours=currentTime.getHours(),minutes=currentTime.getMinutes();minutes<10&&(minutes="0"+minutes);var suffix="AM";hours>=12&&(suffix="PM",hours-=12),0==hours&&(hours=12),time=hours+":"+minutes+" "+suffix,document.getElientById("time").innerHTML=time;

اگر دقت کرده باشید هر دو کدهای Javascript یک عمل را انجام می‌دهند ولی کد اولی فضای اضافه بیشتری نسبت به کد دومی دارد.

 

حال چگونه این خطا را رفع کنیم؟

روش اول : استفاده از افزونه ها و پلاگین در وردپرس :

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

روش دوم : استفاده از CDN :

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

روش سوم : استفاده از سایت GTmetrix  :

اگر به صفحه تست سرعت سایت در GTmetrix برگردید و عبارت Minify javascript رو با استفاده از کلیدهای ترکیبی CTRL + F جستجو کنید بعد از کلیک روی این گزینه مشابه تصویر زیر میبینید که چه فایل‌هایی بهینه شده نیستند. اگه دقت کنید در انتهای آدرس هر فایل یک عبارت Optimized Version قرار دارد که با کلیک کردن روی این عبارت میتوانید نسخه بهینه شده و فشرده شده همین فایل JS را دانلود کنید. تنها کاری که باید انجام دهید این است که بعد از دانلود فایل وارد هاست خود شوید و روی گزینه File Manager کلیک کنید. سپس بر اساس آدرس فایل، به مسیری که مربوط به این فایل هست درpublic_html مراجعه کنید و فایل دانلودی را جایگزین فایل JS قبلی بکنید. علاوه بر این میزان فشرده سازی هر فایل هم قرار گرفته است که میتواند شما را در بهینه کردن فایل JS ترغیب  کند.  

روش چهارم : استفاده از ابزارهای آنلاین :

شما می‌توانید از ابزارهای زیر برای فشرده سازی فایل‌ها استفاده کنید به این منظور وارد یکی از سایت‌های زیر شوید و تمام کدهای فایل غیرفشرده JavaScript را کپی و در سایت مذکور Paste کنید و سپس گزینه فشرده سازی را کلیک نمایید تا فایل فشرده شده JavaScript یا همان Minify JavaScript را به شما بدهد و سپس در هاست خود آپلود کنید. چند نمونه از این ابزارها : javascript-minifier refresh-sf jscompress