آموزش رفع خطای Specify Image Dimensions در gtmetrix
جولای 5, 2020
آموزش رفع خطای Avoid bad requests درGTmetrix
جولای 8, 2020

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

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

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

 

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

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

  • فاصله (space) های غیرضروری در فایل‌ها
  • Line-break های غیرضروری در فایل‌ها
  • کدهای غیرضروری نوشته شده در فایل‌ها
  • سرعت بارگذاری و فشرده سازی را افزایش می دهد.
معنی لغوی Minify کردن، کوچک کردن و مختصر کردن است و در حوزه بهینه سازی موتورهای جستجو به معنای کاهش اندازه فایل‌های JavaScript، CCS و HTML یک سایت به کار می‌رود

رفع خطای minify css

علت خطای 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 برگردید ، بعد از کلیک بر روی minify css مشابه تصویر زیر میبینید که چه فایل‌هایی بهینه شده نیستند.

خطای minify css در gtmetrix

خطای 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 کلیک کنید. مطابق تصویر زیر :
به minifycode.com بروید و روی برگه minify CSS کلیک کنید. سپس کد CSS را در جعبه ورودی بچسبانید و روی دکمه Minify CSS کلیک کنید.

minify code

 

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

 

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

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 را دارند.

این مقاله رو هم بخونید
Error virtual memory low

تصویر زیر نحوه استفاده از پلاگین WP Fastest Cache را به ما نشان می دهد :

مطلب قبلی :

آموزش رفع خطای Specify Image Dimensions در gtmetrix

 

Aida Parvaresh
Aida Parvaresh
آیداپرورش هستم،علاقمند به تکنولوژی و تولید محتوا،مدتیه که با تیم خوب هفت وب همکاری دارم.

4 Comments

  1. zahra batool گفت:

    بدون شک سایت Gtmetrix یکی از محبوب ترین سایت ها برای بررسی سایت های اینترنتی است که اطلاعات مفید و گسترده ای را در این زمینه در اختیار کاربران قرار می دهد. فرآیند کوچک سازی می تواند 10٪ – 95٪ اندازه کد را کاهش دهد. برای کوچک سازی CSS نیز می توانید به آن لینک مراجعه کنید
    https://url-decode.com/tool/css-minifier

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *