فشرده‌سازی CSS یعنی چه؟
وقتی CSS می‌نویسیم، برای خوانایی از تورفتگی، خط جدید، فاصله و کامنت استفاده می‌کنیم. مرورگر به هیچ‌کدام از این‌ها نیازی ندارد. Minify کردن یعنی حذف همه‌ی کاراکترهای اضافه بدون تغییر در معنی کد؛ نتیجه فایلی کم‌حجم‌تر است که سریع‌تر دانلود و پردازش می‌شود. چون CSS «منبع مسدودکننده‌ی رندر» است، یعنی صفحه تا دانلود آن نمایش داده نمی‌شود، هر کیلوبایت کمتر مستقیم روی سرعت نمایش اولیه اثر دارد.
این ابزار چه کارهایی می‌کند؟
- حذف کامنت‌ها، خط‌های خالی و تورفتگی
- حذف فاصله‌ی اطراف
{ } : ; , >بدون خراب کردنcalc() - حذف آخرین نقطه‌ویرگول هر بلوک
- کوتاه کردن رنگ‌های شش‌رقمی، مثل
#ffcc00به#fc0 - حذف واحد از صفر، مثل
0pxبه0 - دست نزدن به رشته‌ها و
url()، حتی اگر data URI طولانی باشند
بعد از فشرده‌سازی
نسخه‌ی خوانا را برای ویرایش نگه دار و فقط نسخه‌ی .min.css را روی سایت بگذار. با اضافه کردن شماره‌ی نسخه به آدرس، کاربرها بعد از هر تغییر حتماً فایل جدید را می‌گیرند:
<link rel="preload" href="/css/style.min.css" as="style">
<link rel="stylesheet" href="/css/style.min.css?v=12">اگر پروژه‌ات Node دارد، می‌توانی فشرده‌سازی را خودکار کنی:
npx lightningcss --minify --bundle style.css -o style.min.cssفشرده‌سازی کافی نیست
بزرگ‌ترین صرفه‌جویی معمولاً از حذف CSS استفاده‌نشده می‌آید؛ قالب‌های آماده و صفحه‌سازها اغلب صدها کیلوبایت CSS دارند که بیشترش در هیچ صفحه‌ای استفاده نمی‌شود. فعال بودن Gzip یا Brotli روی سرور را هم چک کن. در پروژه‌های تبدیل طرح به HTML کد CSS از اول تمیز و فقط به اندازه‌ی نیاز نوشته می‌شود. برای ساخت بخش‌هایی از کد هم سازنده‌ی سایه، سازنده‌ی گرادیان و راست‌چین کردن CSS را ببین.