از مجموعه مقالات آموزش جامع GTmetrix در خدمت شما هستیم قصد داریم در این دوره وبسایتی بهینه توسط ابزارهای آنلاین تست سرعت سایت مثل جی تی متریکس یا Pagespeed گوگل ایجاد کنیم. در جلسه قبل درباره رفع ارور Minify CSS صحبت کردیم. در این جلسه قصد داریم درباره مشکل Minify JavaScript و حل آن در GTmetrix صحبت کنیم. هر چند راه حلهای این دو ارور بسیار شبیه هم هستند و شما اگر هر دو خطای Minify CSS و Minify JavaScript دارید میتوانید همین مقاله را فقط بخوانید تا هر دو خطا رفع شود. البته حل ارور Minify JavaScript شاید کمی سختتر از Minify CSS باشد چرا که ممکن است گاهی تداخل پیش بیایید ولی اگر کدنویسی به شکل اصولی باشد نباید خیلی نگران این موضوع شوید.
خلاصهی از خطا Minify JavaScript
اولویت: بالا
میزان سختی: ساده
میانگین امتیاز: 87%
خطای Minify JavaScript در Gtmetrix چیست
عبارت Minify در روند بهینهسازیسایت به معنای طراحی سایت با فایلهای حجم پایین است. هدف از Minify کردن از بین بردن فضاهای خالی در بین کدها است. خطها و کاراکترهای غیرضروری در سورس کدهای شما را در جهت بهینه سازی سرعت سایت از بین میبرد. معمولا از این روش برای فایلهایی که سمت کاربر ارسال میشود، استفاده میکنند، فایلهایی از قبیل HTML ، CSS و جاواسکریپت. توجه داشته باشید که شما میتوانید فایلهای PHP را Minify کنید ولی PHP زبان برنامه نویسی سمت سرور است و Minify کردن آن تاثیری در بالا بردن سرعت سایت در سمت مرورگر کاربر ندارد.
مطالب خواندنی : رفع خطای Make JavaScript and CSS external در YSlow جی تی متریکس
عمل اصلی که در ٰMinify انجام میگیرد فشرده سازی فایلها سمت کاربر است و مزیت آشکار این سریعتر لود شدن فایلها و در نتیجه افزایش سرعت سایت است. نکته مهمی که باید به آن اشاره کنیم این است که عمل Minify کردن منابع (فایلها) جدا از اینکه باعث بهبود تجربه کاربری (تجربه کاربری چیست) میشود موتورهای جستجو هم چنین فایلهایی با حجم کمتر را بیشتر دوست دارند.
کمی دقیقتر درباره خطای Minify Javascript صحبت کنیم، به مثال زیر توجه کنید:
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.getElementById("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.getElementById("time").innerHTML=time;
اگر دقت کرده باشید هر دو کدهای Javascript یک عمل را انجام میدهند ولی کد اولی فضای اضافه بیشتری نسبت به کد دومی دارد. حال که درک بهتری نسبت به Minify Javascript پیدا کردیم باید چگونه متوجه شویم که کدام فایلهای Javascript ما Minify شده است؟
رفع ارور Minify JavaScript
روش اول Minify JavaScript
پیدا کردن ارور Minify JavaScript نیز به سادگی تمام است، شما کافی است به یکی از ابزارهای تست سرعت سایت همانند Gtmetrix مراجعه کنید و اگر خطای Minify Javascript مشاهده کردید یک فایل برای دانلود خوده سایت Gtmetrix برای شما قرار میدهید که آن فایل Minify شده Javascript است و میتوانید دانلود کنید و در هاست آپلود کنید.
روش دوم Minify JavaScript

minify javascript
شما میتوانید از ابزارهای زیر برای فشرده سازی فایلها استفاده کنید به دین منظور وارد یکی از سایتهای زیر شوید و تمام کدهای فایل غیرفشرده JavaScript را کپی و در سایت مذکور Paste کنید و سپس گزینه فشرده سازی را کلیک نمایید تا فایل فشرده شده JavaScript یا همان Minify JavaScript را به شما بدهد و سپس در هاست خود آپلود کنید.
- javascript-minifier
- refresh-sf
- jscompress
- jsmini
روش سوم Minify JavaScript
اگر از سیستم مدیریت محتوای وردپرس استفاده میکنید میتوانید از پلاگین رایگان Better WordPress Minify برای minify کردن فایلهایJS استفاده کنید. پلاگینهای جامع دیگر هم هستند که جدا از minify کردن انواع فایلها سمت کاربر، تنظیمات دیگری هم برای بالا بردن سرعت لود سایت در اختیار شما میدهند به عنوان مثال پلاگین رایگان WP Super Minify هم minify کردن فایلهای سمت کاربر را انجام میدهد و هم نیز تنظیمات مختلف دیگر برای افزایش سرعت سایت شما در این پلاگین دیده میشود. همچنین پلاگین حرفهای (غیررایگان)WP Rocket هم امکانات بسیار خوبی برای بالا بردن سرعت سایت دارد و یکی از کارهای ان پلاگین قدرتمند minify Javascript است. (البته سایت میزفا بنا به درخواست کاربران این افزونه را به شکل اورجینال تهیه کرده، اگر تمایل دارید آموزش جامع این آموزش به همراه نسخه اورجینال آن را تهیه کنید دوره تنظیمات wp rocket را از دست دهید.)
روش چهارم Minify JavaScript
برخی از CDN ها همانند Cloudflare تظیماتی مبنی بر فشرده سازی فایلها زیر دارند، اگر سایت شما بر روی چنین CDNهایی هست میتوانید از این تنظیمات در جهت بهینه سازی سایت خود استفاده نمایید.

clouldflare css
نتیجه کار Minify JavaScript:
نتیجه کار Minify JavaScript را میتوانید بعد از Minify کردن در قالب یک عکس مشاهده کنید:

Minify JS before after
در این آموزشها با بالا بردن سرعت سایت که یکی از فاکتورهای مهم در سئو میباشد، کمک شایانی کنیم، اگر سوالی داشتید حتما در انجمن سایت میزفا مطرح کنید. این جلسه از آموزش GTmetrix که مربوط به رفع ارور Minify JavaScript بود، هم به پایان رسید در جلسه بعد به معرفی خطای Minify HTML در PageSpeed گوگل میپردازیم. با ما همراه باشید.