بهینه سازی فایل css

بهینه سازی فایل CSS

به عنوان یک طراح سایت و یک CSS کار خیلی خیلی خیلی کار درست قطعا همیشه فایل CSS را minify می کنید. برای آنهایی که هنوز به مرحله “خیلی خیلی خیلی” نرسیدند و می خواهند بدانند معنی minify کردن چیست باید گفت عملیاتی است که روی یک فایل انجام می شود تا مواردی شامل کامنت ها, فضاهای خالی و اینترهای اضافی که در کد وجود دارند را حذف کند. در واقع با این کار ما فایل مورد نظر را تا جایی که امکان دارد می چلانیم تا به کم حجم ترین حالت ممکن برسد.

کد زیر را در نظر بگیرید:

 


h1::before, h1:before {
  margin: 10px 20px 10px 20px;
  color: #ff0000;
  -webkit-border-radius: 16px;
  border-radius: 16px;
  font-weight: normal;
  font-weight: normal;
}

 

اگر از یک minify کننده ساده استفاده کنیم نتیجه بصورت زیر خواهد بود:

 


h1::before,h1:before{margin:10px 20px 10px 20px;color:#ff0000;-webkit-border-radius:16px;border-radius:16px;font-weight:normal;font-weight:normal}

 

همانطور که مشاهده می کنید تنها اتفاقی که افتاد خذف فضاهای اضافی و اینترها بودند. اما آیا می توانیم خروجی بهینه تری داشته باشیم؟ در ادامه قصد داریم تا ابزارهایی را معرفی کنیم تا بتوانیم فایل مظلوم CSS را بیشتر بچلانیم:

 

CSSO

در سایت گیتهاب پروژه ای معرفی شده است به نام CSSO که پا را کمی فراتر می گذارد و با گروه بندی کردن انتخابگرها, کوتاه کردن سینتکس در جاهایی که امکان وجود دارد و مواردی دیگر, حجم فایل CSS را کمی بیشتر کاهش می دهد.

نمونه کد ما بعد از انجام بهینه سازی توسط این ابزار بصورت زیر خواهد بود:

 


h1::before,h1:before{margin:10px 20px;color:red;-webkit-border-radius:16px;border-radius:16px;font-weight:400}

 

اتفاقایی که افتاد به قرار زیر هستند:

  • مقدار ویژگی margin بهینه سازی شد. این بدین معنی است که این ابزار به خلاصه نویسی ویژگی ها و مقادیر آنها اهمیت می دهد.
  • ff0000# به red تبدیل شده است چون red تعداد کاراکترهای کمتری دارد.
  • مقدار normal برای ویژگی font-weight به 400 تبدیل شده است. (باز هم به دلیل کاهش کاراکترها)
  • دستور اضافه ای که نوشته شده (;font-weight:normal) حذف شده است.

این ها مواردی بودند که در این مثال وجود داشت, اما این ابزار بهینه سازی های دیگری هم انجام می دهد. که می توانید خودتان در آدرس زیر آزمایش کنید:

همینطور اگر در مراحل کاری خود از gulp و یا grunt و یا خود npm استفاده می کنید, این ابزار برای این موارد هم پلاگین دارد:

  • npm csso
  • gulp-csso
  • grunt-csso
  •  

    cssnano

    این ابزار هم بصورت متن باز در گیتهاب وجود دارد. cssnano نسبت به csso کمی گزینه های بیشتری برای بهینه سازی در اختیار ما قرار می دهد. در مثال ما نتیجه بهینه سازی بصورت زیر خواهد بود:

     

    
    h1:before{margin:10px 20px;color:red;border-radius:1pc;font-weight:400}
    
    

     

    مواردی که این ابزار بهینه می کند خیلی شفاف در اینجا توضیح داده شده است.

    همچنین مثل ابزار قبل می توانید با توجه به نحوه مراحل کاری خود از پلاگین های مختلفی که برای این ابزار نوشته شده اند استفاده کنید. از پلاگین ویرایشگر اتم گرفته تا gulp و grunt که توضیحات کامل در مورد نحوه استفاده از این ابزار را می توانید در سایت خودش مطالعه کنید.

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

     
    کمک هم خواستید تا جایی که وقت و سوادم اجازه بده در خدمتم. پس از همین امروز استفاده کنید خیالتون راحت 🙂

    • آمنه

      طبق معمول عالی!!!

    • محمد وفایی

      مجتبی جان خسته نباشی
      یکپارچه و بهینه شده توضیح دادی دست گلت درد نکنه

      حتما از این شیوه هم در طراحی مون استفاده می کنیم ببینیم این فایل بیچاره رو چقد باید چلوند …

      موفق و پیروز باشی

      • ممنون از لطف شما. در چلوندن هم برای شما آرزوی موفقیت می کنم 🙂

    • سامان

      مطلب فوق العاده ای بود، اما به نظرم وقتی از pre-proccessor هایی مثل sass استفاده می کنیم، شاید امکان استفاده از این کمپرسور ها نباشه مگر اینکه بعد از کامپایل و نهایی شدن کار دقیقا قبل از آپلود فایل اون ها رو بهینه کنی

      • ممنون از شما.

        در مورد بحثی که مطرح کردین:

        کافیه اگر از gulp یا امثالش استفاده می کنید یک تسک در قسمت خروجی گرفتن بنویسید که این کار رو انجام بده. هیچ مشکلی هم بوجود نمیاد. اگر هم منظورتون اینه وقتی این کار رو می کنید دیگه در زمان دیباگ کردن توی مرورگر خیلی بررسی کار سخت میشه. جواب فایل هایی هستند به اسم source maps که پسوند .map دارند.

        مثلا وقتی فایل css بهینه میشه خوب انتخابگرها با هم در خیلی جاها یکی میشن و بررسیشون توی devtools سخته. کار فایل map اینه که باعث میشه ما همون کدی که توی فایل sass نوشتیم رو توی مرورگر ببینیم نه کد بهینه شده و شلوغ رو و حتی از طریق مرورگر می تونیم فایل پیش پردازنده رو ویرایش کنیم.

        اولا پیشنهاد می کنم اگر مراحل کاریتون رو خودکار نکردین (مثلا همین کامپایل فایل Sass و یا بهینه سازی و غیره) با استفاده از ابزارهایی مثل gulp و یا grunt حتما انجام بدین. دوما حتما از فایل های map استفاده کنید.

        این مطلب رو ببنید: https://developer.chrome.com/devtools/docs/css-preprocessors

    • احسنت به شما و مطالب آموزنده تون
      فوق العاده بود