فشرده سازی فایل های css چگونه و به چه منظور انجام می شود؟

ساعت : ۱۹:۰۷

تاریخ : ۷ بهمن ۱۳۹۷

فشرده سازی فایل های css

سرعت بارگذاری سایت یکی از فاکتورهای مهم موتورهای جستجو برای رتبه بندی سایت ها هست و میتونه تاثیر زیادی در رتبه سایت شما داشته باشه. فشرده سازی فایل های css یکی از کارهاییه که برای افزایش سرعت بارگذاری سایت انجام میشه که به اصطلاح به اون MINIFY کردن گفته میشه. تو این مقاله از سری مقاله های آموزش CSS قصد داریم شما رو با نحوه فشرده سازی فایل های css و دلایل نیاز به انجام این کار آشنا کنیم.

فشرده سازی فایل های css

فشرده سازی فایل های css به معنی از بین بردن فاصله موجود در بین کدهای css سایت شما هست و به منظور افزایش سرعت بارگذاری سایت شما انجام میشه. در واقع زمانی که شما فاصله بین دستورات css سایت رو از بین ببرید، حجم فایل های css تا حد زیادی کاهش پیدا میکنه و این موضوع اثرات مثبت زیادی روی سرعت سایت میزاره. برای مثال به کدهای مقابل توجه کنید :


html{
    height: 100%;
    direction: rtl;
}

body {
    font-size: 15px;
    padding: 0;
    margin: 0;
    background-color: #fff;
}

زمانی که ما این کدها رو فشرده سازی کنیم، به شکل زیر در میاد :


Html{height:100%;direction:rtl;}body{font-size:15px;padding:0;margin:0;background-color:#fff;}

اهمیت این موضوع زمانی بیشتر میشه که ما بدونیم فایل های css به صورت پیش فرض، render blocking هستند و بین دستورات این فایل ها فاصله زیادی هست که همین موضوع باعث کند شدن سایت شما میشه. البته از بین بردن فاصله بین دستورات تنها کاری نیست که میتونید برای افزایش سرعت سایتتون انجام بدید. شما میتونید قبل از فشرده سازی فایل ها، حجم تصاویر سایتتون رو کاهش بدید و دستورات و استایل های اضافی رو حذف کنید تا به بهینه تر شدن سایتتون کمک بیشتری کرده باشید.

فشرده سازی فایل های css

فشرده سازی فایل های css چگونه انجام می شود؟

برای minify کردن فایل های css راه های مختلفی پیش روی شما هست که در ادامه ۴ روش رو معرفی می کنیم.

  • روش اول در فشرده سازی فایل های css

    اولین روش برای فشرده سازی فایل های CSS اینه که شما زمانی که مشغول کدنویسی هستید، کدهاتون رو به صورت فشرده بنویسید و هیچ فاصله ای بین کدهاتون نزارید. این کار مطمئنا زمان و تمرکز بالایی می طلبه و یک راه خسته کننده هستش و ما هم این روش رو توصیه نمی کنیم.

  • روش دوم در فشرده سازی فایل های css

    دومین روش برای فشرده سازی فایل های css اینه که از ورژن فشرده فریمورک ها استفاده کنید. البته این برای زمانیه که شما از یکی از فریمورک های css استفاده می کنید. برای مثال اگر از فریمورک بوت استرپ استفاده می کنید، میتونید از ورژن فشرده شده بوت استرپ به نام bootstrap.min.css استفاده کنید.

  • روش سوم در فشرده سازی فایل های css

    روش سوم اینه که از سرویس های minifierاستفاده کنید. این سرویس ها به صورت آنلاین توسط وب سایت های مختلف ارائه میشن و میتونید با وارد کردن کدهاتون، کدهای minify شده رو تحویل بگیرید. سایت tutorialspoint.com یکی از سایت هایی هستش که میتونید برای فشرده سازی فایل های css استفاده کنید.

  • روش چهارم در فشرده سازی فایل های css

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

مزایای فشرده سازی فایل های css :

  • باعث بهبود سرعت بارگذاری سایت میشه.

  • با افزایش سرعت بارگذاری سایت، رتبه سایت شما رو نزد موتورهای جستجو بهبود میبخشه.

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

در صورتی که به آموزش html css و یا آموزش jquery و یا آموزش bootstrap علاقه دارید میتونید از آموزش های پروژه محور و کاربردی سی اس اس پارک استفاده کنید که ضمانت بازگشت وجه هم داره.



  • فشرده سازی فایل های css چگونه و به چه منظور انجام می شود؟
    نام نویسنده : امیرمسعود طالاری
  • فشرده سازی فایل های css چگونه و به چه منظور انجام می شود؟
    نام نویسنده : رضا ابولحسن زاده
  • فشرده سازی فایل های css چگونه و به چه منظور انجام می شود؟
    نام نویسنده : رضا ابولحسن زاده
  • فشرده سازی فایل های css چگونه و به چه منظور انجام می شود؟
    نام نویسنده : رضا ابولحسن زاده

درباره نویسنده : برنامه نویس وب و کارشناسی ارشد رشته نرم افزار

پاسخی بگذارید

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