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

از سری مقالات آموزش کامل سایت gtmetrix به رفع خطاهای pagespeed سایت جی تی متریکس پرداختیم. در مقاله قبل به آموزش رفع خطای Leverage browser caching در سایت GTmetrix پرداختیم. امروز در بخش رفع خطاهای pagespeed به آموزش رفع ارور و خطای Minify CSS خواهیم پرداخت. در ادامه خواهیم گفت که خطای Minify CSS چیست . رفع ارور و خطای Minify CSS در gtmetrix موجب افزایش سرعت سایت و کاهش زمان بارگذاری سایت می‌شود که بشدت روی بهبود سئوی سایت تاثیر مثبت و خوبی دارد.

رفع خطای Minify CSS در سایت gtmetrix نسبتا ساده است و شما برای برطرف کردن آن مشکل خاصی نخواهید داشت. اگر سایت شما وردپرسی هست که براحتی می‌توانید با نصب افزونه آن را برطرف نمایید. در ادامه با ما همراه باشید تا  در خصوص خطای Minify CSS بیشتر توضیح دهیم.

این خطا جزو خطاهای پر اهمیت بخش Pagespeed در سایت GTmetrix است. رفع خطای Minify CSS به افزایش سرعت سایت کمک شایانی می‌نماید.

در این مقاله به موضوعات زیر خواهیم پرداخت :

1 خلاصه‌ی از خطای Minify CSS
2 خطای Minify CSS در سایت Gtmetrix چیست
3 تشخیص خطای Minify CSS
4 رفع ارور Minify CSS
4.1 روش اول استفاده از سایت Gtmetrix
4.2 روش دوم استفاده از ابزارهای فشرده آنلاین
4.3 روش سوم استفاده از افزونه در وردپرس
4.4 روش چهارم استفاده از تنظیمات CDN

خلاصه‌ی از خطای Minify CSS
نام: Minify CSS
نوع: مربوط به CSS
اولویت: بالا
میزان سختی: ساده
میانگین امتیاز: 94%

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

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

همانطور که می‌دانید وقتی یک کاربر سایت شما را در مرورگر دستگاه خود باز می‌نماید، فایل های مختلف سایت توسط مرورگر برای او دانلود می‌شود تا سایت شما برای او باز شود. حال در نظر بگیرید اگر حجم این فایل ها کم باشد چه میزان می‌تواند سرعت سایت شما را بالا ببرد. علاه بر این موتورهای جستجو نیز در زمان بررسی سایت شما تمایل دارند که فایل هایی با حجم پایین را بررسی نمایند.

مقاله آموزش رفع خطای Inline small CSS و خطای Inline small JavaScript را نیز مطالعه نمایید.

کمی دقیق‌تر درباره خطای Minify CSS صحبت کنیم، به مثال زیر توجه کنید:

body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}

h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}

اگر به کد بالا توجه کرده باشید برای درک بهتر کدنویسی از فضاهای خالی زیر استفاده شده است ولی زیبانویسی تاثیری برای موتورهای جستجو و مرورگرها ندارد. Minify شده کد CSS بالا همانند زیر است:

body{margin:20px;padding:20px;color:#333;background:#f7f7f7}h1{font-size:32px;margin-bottom:10px}

با یک نگاه ساده میتوانید کاملا متوجه این موضوع شوید که این 2 قطعه کد هر دو یک عمل را انجام میدهند، اما طبیعتا قطعه کد اول فضای بیشتری را اشغال کرده است. الان که متوجه شدیم خطای Minify CSS چیست ، در ادامه با ما همراه باشید.

تشخیص خطای Minify CSS در سایت Gtmetrix

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

رفع ارور Minify CSS

در این بخش 4روش را جهت آموزش رفع خطای Minify CSS به شما عزیزان معرفی خواهیم نمود. از این 4 روش روش سوم مخصوص سایت های وردپرسی است. روش های اول و دوم و چهارم علاوه بر سایت های وردپرسی برای سایت های php و ASP و جولا کاربرد دارد.

مقاله آموزش رفع خطای Combine images using CSS sprites را نیز مطالعه نمایید.

روش اول استفاده از سایت Gtmetrix

وقتی سایت Gtmetrix خطای minify CSS را به شما نشان می‌دهد فایل فشرده آن را هم قرار می‌دهد، همانند عکس زیر:

فایل فشرده را می‌توانید دانلود نمایید و به محل فایل مورد نظر روی سرور خود بروید و این فایل را جایگزین فایل قبلی نمایید.

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

شما می‌توانید از یکی از ابزارهای آنلاین استفاده نمایید تا کدهای خود را براحتی فشرده نمایید. برای این کار لازم است ابتدا وارد یکی از سایت های زیر شوید. سپس کد مدنظر خود را بصورت کامل کپی و در یکی از سایت های زیر paste نمایید. با کلیک روی دکمه فشرده سازی کدهای شما فشرده می‌شوند و اصطلاحا Minify می‌شوند. حال می‌توانید کدهای جدید را روی سرور خود آپلود نمایید.

cssminifier.com
csscompressor.com
minifier.org

روش سوم استفاده از افزونه در وردپرس

اگر شما از سایت های وردپرسی استفاده می‌نمایید، با نصب یک افزونه براحتی می‌توانید این مشکل مهم را در سایت خود برطرف نمایید. ما در ادامه چند افزونه به شما معرفی خواهیم کرد که می‌توانید بصورت کاملا دلخواه از یکی از آنها استفاده نمایید. استفاده از افزونه هایی مانند Autoptimize علاوه بر اینکه این مشکل از سایت شما را برطرف می‌کند. امکاناتی دارد که می‌تواند بسیاری از مشکلات سایت شما را نیز برطرف نماید.

افزونه Autoptimize (پیشنهادی)
افزونه WP Rocket
افزونه WP Super Minify

روش چهارم استفاده از تنظیمات CDN

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

نتیجه کار:

نتیجه کار Minify CSS نیز باید به شکل زیر باشد:

پایان

سعی شده در این آموزش با موضوع آموزش رفع خطای Minify CSS در gtmetrix به شما در بالا بردن سرعت سایت که یکی از فاکتورهای مهم در سئو می‌باشد، کمک شایانی کنیم.

ما در این مقاله توضیح دادیم که خطای Minify CSS چیست و خطای Minify CSS در سایت gtmetrix را نیز بیان کردیم.