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

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

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

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

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

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

• Line-break های غیرضروری در فایل‌ها
• کدهای غیرضروری نوشته شده در فایل‌ها
• سرعت بارگذاری و فشرده سازی را افزایش می دهد.

 

علت خطای Minify JavaScript

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

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

body { margin:10px; padding:15px; color:#d32f2e; font-size:18px; font-family:haftweb; background:#f7f7f7; } h1 { font-size:28px; color#f3f3f3; margin-bottom:5px; } اگر به کد بالا توجه کرده باشید برای درک بهتر کدنویسی از فضاهای خالی استفاده شده است ولی زیبانویسی تاثیری برای موتورهای جستجو و مرورگرها ندارد. Minify شده یک فایل CSS  همانند زیر است: body{margin:10px;padding:15px;color:#d32f2e;font-size:18px;font-family:haftweb;background:#f7f7f7;}.h1{font-size:28px;color#f3f3f3;margin-bottom:5px;} اگر دقت کرده باشید هر دو کدهای  CSS یک عمل را انجام می‌دهند ولی کد اولی فضای اضافه بیشتری نسبت به کد دومی دارد.  

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

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

اگر به صفحه تست سرعت سایت در GTmetrix برگردید ، بعد از کلیک بر روی minify css مشابه تصویر زیر میبینید که چه فایل‌هایی بهینه شده نیستند.

خطای minify css در gtmetrix اگه دقت کنید در انتهای آدرس هر فایل CSS یک عبارت Optimized Version قرار دارد که با کلیک کردن روی این عبارت میتوانید نسخه بهینه شده و فشرده شده همین فایل CSS را  دانلود کنید. تنها کاری که باید انجام دهید این است که بعد از دانلود فایل وارد هاست خود شوید و روی گزینه File Manager کلیک کنید. سپس بر اساس آدرس فایل، به مسیری که مربوط به این فایل است در public_html مراجعه کنید و فایل دانلودی را جایگزین فایل CSS قبلی کنید. علاوه بر این میزان فشرده سازی هر فایل هم قرار گرفته که میتواند  شما را در بهینه کردن فایل CSS ترغیب کند.  

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

برخی از CDN ها همانند Cloudflare تظیماتی مبنی بر فشرده سازی فایل‌ها دارند، اگر سایت شما بر روی چنین CDNهایی است می‌توانید از این تنظیمات در جهت بهینه سازی سایت خود استفاده نمایید. برای این کار ابتدا  DNS های دامنه خود را روی کلودفلر تنظیم کنید. سپس در پنل کاربری کلودفلر روی گزینه SPEED کلیک کرده و تیک سه گزینه javascript، css و HTML را فعال کنید.  

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

در این روش میتوانید با استفاده از سایت‌های آنلاین که برای فشرده سازی فایل‌های برنامه نویسی ابزاری را در اختیار شما قرار میدهند تا کدهای خودتان رو بهینه سازی کنید.در ادامه چندین ابزار را به شما معرفی می کنیم:

• cssminifier.com  و minifier.org: کدهای خود را جایگذاری کرده و سپس بر روی دکمه Minify کلیک کنید تا کد منفی شده خارج شود. شما حتی می توانید برای راحتی کار ، کد خروجی را به عنوان یک فایل بارگیری کنید.
• csscompressor.com  : پس از باز کردن این سایت در قسمت csscompressor محتوای فایل css خود را وارد نمایید و گزینه highest را انتخاب کنید ، سپس روی compress کلیک کنید تا فایل جدید را دانلود کنید و سپس در هاست خود آپلود نمایید.
• minifycode.com  : به minifycode.com بروید و روی برگه minify CSS کلیک کنید. سپس کد CSS را در جعبه ورودی بچسبانید و روی دکمه Minify CSS کلیک کنید. مطابق تصویر زیر :

minify code پس از تولید کد جدید، کد را کپی کنید.  

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

اگر از سیستم مدیریت محتوای وردپرس استفاده می‌کنید می‌توانید از پلاگین‌ رایگان Better WordPress Minify برای minify کردن فایل‌هایCSS استفاده کنید. سایر افزونه‌های دیگر هم وجود دارند به عنوان مثال یکی از کارهای پلاگین رایگان WP Super Minify که می‌تواند انجام دهد minify کردن فایل‌های سمت کاربر هست همچنین پلاگین  WP Rocketنیز امکانات بسیار خوبی برای بالا بردن سرعت سایت نیز دارد و یکی از کارهای آن minify CSS است، البته پلاگین WP Rocket نیز نسخه حرفه ای است.شما همچنین می توانید از افزونه های کش ، مانند WP Fastest Cache و W3 Total Cacheنیز امکان minify  کردن css را دارند. تصویر زیر نحوه استفاده از پلاگین WP Fastest Cache را به ما نشان می دهد: