بهینه‌سازی CSS

چرا بهینه‌سازی CSS مهم است؟

CSS بزرگ و غیربهینه، سرعت بارگذاری سایت را کاهش می‌دهد و تجربه کاربری را خراب می‌کند.

۱. Minify کردن

/* قبل — خوانا */
    .box {
        color: #3498db;
        background: #ffffff;
    }
    
    /* بعد — فشرده */
    .box{color:#3498db;background:#fff}

۲. کاهش HTTP Request

• فایل‌های CSS را ادغام کنید
• از CSSهای غیرضروری حذف کنید
• Critical CSS را inline کنید

۳. استفاده از CSS Variables

:root {
        --primary: #3498db;
        --spacing: 1rem;
    }
    
    /* تغییر در یک جا */
    :root { --primary: #e74c3c; }

۴. انتخابگرهای کارآمد

/* ❌ کند — تودرتو عمیق */
    .div .container .row .col .btn { }
    
    /* ✅ سریع — کلاس مستقیم */
    .btn { }

۵. Shorthand استفاده کنید

/* ❌ طولانی */
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
    
    /* ✅ خلاصه */
    margin: 10px 20px;

۶. حذف کد مرده

• کلاس‌های استفاده‌نشده را حذف کنید
• ویژگی‌های override شده را پاک کنید
• از ابزارهایی مثل PurgeCSS استفاده کنید

۷. بارگذاری بهینه

<!-- Critical CSS inline -->
    <style>body { ... }</style>
    
    <!-- بقیه async -->
    <link rel="preload" href="style.css" as="style">

ابزارهای بهینه‌سازی

ابزار	کاربرد
cssnano	Minify
PurgeCSS	حذف کد مرده
PostCSS	پردازش و بهینه‌سازی
Autoprefixer	افزودن پیشوندها
Critical	استخراج Critical CSS

بهترین شیوه‌ها

• CSS را Minify کنید
• کد مرده را حذف کنید
• از CSS Variables استفاده کنید
• Critical CSS را inline کنید
• از ابزارهای_build استفاده کنید

نکات مهم

• CSS بخشی از render-blocking resources است
• کاهش حجم CSS، مستقیماً روی FCP تأثیر دارد
• انتخابگرهای کوتاه‌تر سریع‌تر match می‌شوند
• will-change برای عناصر انیمیشنی