چگونه حجم کدهای CSS خود را با ابزارهای Purge تا ۹۰٪ کاهش دهیم؟

چرا کاهش حجم CSS اینقدر حیاتیه؟ (اهمیت)

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

سرعت بارگذاری سایت و تجربه کاربری (UX)

• اولین تاثیر: هر بایت اضافه در فایل CSS یعنی زمان بیشتر برای دانلود شدن اون فایل توسط مرورگر کاربر. این یعنی کاربر باید بیشتر منتظر بمونه تا سایتت به طور کامل نمایش داده بشه. آمارها نشون می‌دن که حتی تأخیر چند میلی‌ثانیه‌ای می‌تونه باعث فرار کاربرها بشه.
• First Contentful Paint (FCP) و Largest Contentful Paint (LCP): اینها معیارهای مهمی برای سنجش سرعت بارگذاری هستن. حجم بالای CSS مستقیماً روی این معیارها تاثیر منفی می‌ذاره و باعث میشه مرورگر دیرتر بتونه محتوای اصلی رو به کاربر نشون بده.
• نرخ پرش (Bounce Rate) بالاتر: وقتی سایتت کند باشه، کاربرها حوصله‌شون سر میره و قبل از اینکه صفحه رو ببینن، از سایتت میرن بیرون. این هم نرخ پرش رو بالا می‌بره و هم روی سئو سایتت تاثیر منفی می‌ذاره.

بهبود سئو و رتبه در گوگل

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

• بهبود Core Web Vitals: گوگل اهمیت زیادی به Core Web Vitals (مجموعه‌ای از معیارهای مربوط به سرعت و تعامل‌پذیری سایت) میده. بهبود FCP و LCP از طریق کاهش حجم CSS، مستقیماً به بهبود این معیارها کمک می‌کنه و رتبه سئوی سایتت رو بالا می‌بره.
• کراولرها و بودجه کراول: ربات‌های گوگل برای کراول کردن سایتت یک بودجه مشخص دارن. اگه فایل‌های سایتت سنگین باشن، ربات‌ها زمان بیشتری رو صرف دانلود و تحلیل CSSهای بی‌استفاده می‌کنن و ممکنه نتونن تمام صفحات مهم سایتت رو ایندکس کنن.

کاهش هزینه‌های سرور (ناگفته!)

شاید بهش فکر نکرده باشی، اما هر بار که کاربری سایتت رو لود می‌کنه، داده‌هایی از سرور تو دانلود میشن. اگه فایل‌های CSSت سبک‌تر باشن، پهنای باند کمتری مصرف میشه. این مورد مخصوصاً برای سایت‌هایی با ترافیک بالا یا هاست‌هایی که محدودیت پهنای باند دارن، می‌تونه منجر به صرفه‌جویی قابل توجهی در هزینه‌ها بشه.

CSS Bloat یا “کد اضافه” چیه و از کجا میاد؟

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

فریم‌ورک‌های CSS (بوت‌استرپ، تیل‌ویند)

این بزرگواران همونایی هستن که زندگی رو برامون راحت کردن، اما در عین حال، منبع اصلی CSS Bloat هم می‌تونن باشن. وقتی از فریم‌ورک‌های بزرگی مثل Bootstrap یا Materialize استفاده می‌کنی، تمام کامپوننت‌ها و استایل‌های پیش‌فرض اونها رو وارد پروژت می‌کنی، حتی اگه فقط از ۱۰٪شون استفاده کنی. بقیه ۹۰٪، میشه کد مرده‌ای که فقط حجم فایل نهایی رو زیاد کرده.

کدهای قدیمی و بدون استفاده (Legacy Code)

پروژه‌ها رشد می‌کنن، بخش‌های جدید اضافه می‌شن، و بعضی بخش‌های قدیمی حذف می‌شن. اما آیا کسی وقت می‌ذاره که CSSهای مربوط به اون بخش‌های حذف شده رو هم پاک کنه؟ معمولاً نه! این کدهای قدیمی روی هم انباشته می‌شن و یه کوه از استایل‌های بی‌مصرف رو تشکیل میدن که هیچ‌وقت نمایش داده نمی‌شن.

روش‌های توسعه نامنظم (Rapid Prototyping)

گاهی اوقات عجله داری و برای تست یه فیچر جدید، چند تا استایل سریع می‌نویسی و بعدش یادت میره که پاکشون کنی. این روش توسعه “سریع و کثیف” به مرور زمان باعث میشه کلی کد اضافی به پروژه اضافه بشه.

کدهای شخص ثالث (Plugins, Themes)

اگه با CMSهایی مثل وردپرس کار می‌کنی، حتماً با این مورد سروکار داشتی. هر پلاگین یا قالبی که نصب می‌کنی، کلی فایل CSS به پروژه اضافه می‌کنه که ممکنه خیلی از استایل‌هاش برای سایت تو اصلاً استفاده نشه. اینجا هم ابزارهای Purge به دادت می‌رسن.

ابزارهای Purge CSS چطور کار می‌کنن؟ (مفهوم بنیادین)

Purge به معنی “پاکسازی” یا “تصفیه” است. ابزارهای Purge CSS دقیقاً همین کار رو می‌کنن؛ فایل‌های CSS شما رو تصفیه می‌کنن. اما چطور؟

اسکن و شناسایی

این ابزارها (مثل PurgeCSS) کاری که می‌کنن اینه که کد‌های شما رو اسکن می‌کنن. نه فقط فایل‌های CSS، بلکه فایل‌های HTML، جاوااسکریپت و هر فایل دیگه‌ای که ممکنه کلاس‌های CSS رو تو خودش داشته باشه. هدفشون اینه که تمام سلکتورهای CSS (مثل کلاس‌ها، IDها، تگ‌ها) رو که واقعاً تو سورس کد HTML یا JS شما استفاده شدن، پیدا کنن و یه لیست ازشون تهیه کنن.

حذف کدهای مرده

بعد از اینکه لیست سلکتورهای “زنده” رو پیدا کردن، می‌رن سراغ فایل‌های CSS شما. هر سلکتوری که تو لیست “زنده” نباشه، به عنوان “کد مرده” یا “Unused CSS” شناسایی میشه و از فایل نهایی حذف میشه. به همین سادگی! بخش اعظمی از کاهش حجم دقیقاً همینجاست.

تفاوت با Minification

ممکنه بگی خب Minification هم حجم CSS رو کم می‌کنه. درسته! اما Minification فقط فضای خالی (مثل اینترها، اسپیس‌ها و کامنت‌ها) رو حذف می‌کنه و نام‌های سلکتورها رو کوتاه می‌کنه. *هرگز* کدهای استفاده نشده رو حذف نمی‌کنه. ابزارهای Purge مکمل Minification هستن؛ اول Purge کدهای مرده رو حذف می‌کنه و بعدش Minification، کدهای باقی‌مونده رو به بهترین و فشرده‌ترین شکل ممکن تبدیل می‌کنه. این دو با هم معجزه می‌کنن.

آماده‌سازی پروژه برای Purge (پیش‌نیازها و بهترین روش‌ها)

قبل از اینکه شروع به کدنویسی و ادغام ابزارهای Purge کنی، لازمه یه سری آمادگی‌ها رو انجام بدی تا کار راحت‌تر پیش بره و به مشکل نخوری.

پروژه‌های مبتنی بر ابزارهای بیلد (Webpack, Vite, Gulp)

اگه پروژت از ابزارهایی مثل Webpack، Vite، Gulp یا Parcel استفاده می‌کنه، کار خیلی راحت‌تره. این ابزارها محیطی رو فراهم می‌کنن که می‌تونی PurgeCSS رو به عنوان یک پلاگین یا PostCSS plugin به Pipeline بیلدت اضافه کنی. این روش بهترینه چون PurgeCSS فقط روی نسخه نهایی و Production سایتت اجرا میشه و تو مرحله Development می‌تونی با همه استایل‌ها کار کنی.

پروژه‌های ساده HTML/CSS

حتی اگه پروژت خیلی ساده است و از ابزارهای بیلد پیچیده استفاده نمی‌کنی، باز هم می‌تونی از PurgeCSS بهره ببری. در این حالت، می‌تونی از خط فرمان (CLI) PurgeCSS یا از طریق یک اسکریپت Node.js ساده، فایل‌های CSSت رو پردازش کنی.

تنظیمات اولیه و کانفیگ (Configuration)

مهم‌ترین قسمت، تنظیمات PurgeCSS هست. باید بهش بگی که دنبال فایل‌های حاوی سلکتورها (مثل HTML، JS، Vue، React) کجا بگرده و فایل‌های CSS برای پردازش کجا هستن. این کانفیگ معمولاً توی یه فایل مثل `purgecss.config.js` انجام میشه. نگران نباش، مثال‌هاشو در ادامه می‌بینیم.

معرفی ابزارهای Purge محبوب و نحوه استفاده از اون‌ها

PurgeCSS (پادشاه حذف کدهای مرده)

این همون قهرمان داستان ماست! PurgeCSS یه ابزار قدرتمند و فوق‌العاده منعطفه که می‌تونه به روش‌های مختلفی تو پروژت ادغام بشه.

npm install --save-dev purgecss

yarn add --dev purgecss

module.exports = {
  content: [
    './src/**/*.html',
    './src/**/*.js',
    './src/**/*.jsx',
    './src/**/*.ts',
    './src/**/*.tsx',
    './public/**/*.html'
  ],
  css: ['./src/styles/**/*.css'],
  output: './dist/optimized.css',
  safelist: ['html', 'body', /^fa-/] // نگه داشتن تگ‌های اصلی و کلاس‌های Font Awesome
};

ادغام با ابزارهای بیلد (Webpack, PostCSS)

معمولاً PurgeCSS به عنوان یک پلاگین PostCSS یا در مرحله نهایی بیلد (production build) اجرا میشه.

module.exports = {
  plugins: [
    require('autoprefixer'),
    process.env.NODE_ENV === 'production' &&
      require('@fullhuman/postcss-purgecss')({
        content: [
          './public/**/*.html',
          './src/**/*.html',
          './src/**/*.vue', // برای پروژه‌های Vue
          './src/**/*.js',
          './src/**/*.jsx', // برای پروژه‌های React
          './src/**/*.ts',
          './src/**/*.tsx'
        ],
        defaultExtractor: content => content.match(/[w-/:]+(?<!:)/g) || [],
        safelist: {
          standard: ['html', 'body'],
          deep: [/router-link-active/, /some-dynamic-class-/] // مثال برای کلاس‌های داینامیک
        }
      })
  ].filter(Boolean)
};

توضیح Safelist و Blocklist

• Safelist: این لیستی از سلکتورهاست که شما به PurgeCSS میگی “اینا رو به هیچ وجه پاک نکن، حتی اگه تو فایل‌های HTML/JS پیداشون نکردی”. این برای کلاس‌هایی که به صورت داینامیک با جاوااسکریپت اضافه میشن یا کلاس‌هایی که تو محتوای دیتابیس (مثلاً وردپرس) ذخیره شدن، حیاتیه. می‌تونی از رگولار اکسپرشن (Regex) هم برای Safe کردن الگوهای خاص استفاده کنی، مثل /^fa-/ برای Font Awesome.
• Blocklist: برعکس Safelist، این لیست برای سلکتورهایی استفاده میشه که شما می‌خوای حتماً حذف بشن، حتی اگه PurgeCSS فکر می‌کنه استفاده شدن (که البته کمتر پیش میاد و Safelist کاربردی‌تره).

Tailwind CSS JIT / PostCSS JIT (یک رویکرد متفاوت)

اگه با Tailwind CSS کار می‌کنی، احتمالاً نیازی به PurgeCSS به شکل سنتی ندرای. Tailwind با معرفی حالت Just-In-Time (JIT) و در نسخه‌های جدیدتر، این مکانیزم رو به صورت پیش‌فرض تو خودش ادغام کرده.

• چرا تیل‌ویند نیازی به PurgeCSS به شکل سنتی نداره؟ Tailwind JIT در زمان توسعه، فقط اون استایل‌هایی رو تولید می‌کنه که شما واقعاً تو فایل‌های HTML یا کامپوننت‌هات استفاده کردی. این یعنی از ابتدا دیگه کد مرده‌ای تولید نمیشه که بخواد Purge بشه. این رویکرد خیلی کارآمدتره و فایل CSS نهایی رو از همون اول کوچک نگه می‌داره.
• مزایا و عملکرد: سرعت بیلد بسیار بالا، حجم فایل CSS بسیار کوچک (معمولاً در حد چند کیلوبایت)، و تجربه توسعه عالی. اگر از Tailwind استفاده می‌کنی، مطمئن شو که از آخرین نسخه‌ها و قابلیت JIT (یا معادلش در نسخه‌های جدید) بهره می‌بری.

UnCSS (یک گزینه دیگر)

UnCSS یه ابزار دیگه با کارایی مشابهه، اما رویکردش کمی متفاوته. این ابزار به جای اسکن سورس کد، می‌تونه صفحات HTML رو تو یک مرورگر مجازی باز کنه و بعد از اینکه جاوااسکریپت‌ها اجرا شدن و DOM کامل شد، استایل‌های استفاده شده رو شناسایی و باقی‌مونده رو حذف کنه. این قابلیت برای سایت‌هایی که heavily به جاوااسکریپت وابسته هستن یا استایل‌ها به صورت داینامیک اضافه میشن، می‌تونه مفید باشه. البته کانفیگ و استفاده از PurgeCSS معمولاً رایج‌تر و منعطف‌تره.

راهنمای گام به گام: پیاده‌سازی PurgeCSS در یک پروژه واقعی

سناریو: پروژه React با Webpack

فرض کن یه پروژه React داری که با Webpack بیلد میشه. برای ادغام PurgeCSS مراحل زیر رو دنبال کن:

1. نصب پکیج‌های لازم:

   npm install --save-dev css-loader style-loader postcss-loader autoprefixer @fullhuman/postcss-purgecss

   کپی کردن کد

2. ایجاد فایل postcss.config.js: در ریشه پروژت این فایل رو بساز و محتوای زیر رو داخلش بذار:

   const purgecss = require('@fullhuman/postcss-purgecss')({
     content: [
       './public/**/*.html',
       './src/**/*.html',
       './src/**/*.js',
       './src/**/*.jsx',
       './src/**/*.ts',
       './src/**/*.tsx',
     ],
     defaultExtractor: content => content.match(/[w-/:]+(?<!:)/g) || [],
     safelist: ['html', 'body', 'btn', 'active', /nav/, /^modal-/], // نمونه Safelist
   });
   
   module.exports = {
     plugins: [
       require('autoprefixer'),
       ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
     ],
   };

   کپی کردن کد

3. تنظیم webpack.config.js: تو فایل کانفیگ وپکت، قسمت module.rules رو برای فایل‌های CSS اینطوری تنظیم کن:

   module.exports = {
     // ... سایر تنظیمات
     module: {
       rules: [
         {
           test: /.css$/,
           use: [
             'style-loader', // یا MiniCssExtractPlugin.loader در production
             'css-loader',
             'postcss-loader', // این مهمه!
           ],
         },
         // ... سایر لودرها برای JS, تصاویر و غیره
       ],
     },
     // ...
   };

   کپی کردن کد

4. اجرا: حالا وقتی پروژه رو با npm run build (یا معادلش) برای Production بیلد می‌کنی، PurgeCSS به صورت خودکار اجرا میشه و فایل CSS نهاییت به طرز چشمگیری سبک میشه. حواست باشه که NODE_ENV رو برای Production روی 'production' تنظیم کنی. مثلاً تو package.json:

   "scripts": {
     "start": "webpack serve --mode development",
     "build": "NODE_ENV=production webpack --mode production"
   }

   کپی کردن کد

سناریو: پروژه ساده HTML/CSS

حتی برای یه پروژه ساده هم می‌تونی از PurgeCSS استفاده کنی، فقط باید یه اسکریپت ساده بنویسی:

1. نصب PurgeCSS:

   npm install --save-dev purgecss

   کپی کردن کد

2. ایجاد فایل purge.js: یه فایل Node.js بساز (مثلاً تو پوشه scripts) با محتوای زیر:

   const purgecss = require('purgecss');
   const fs = require('fs');
   
   async function runPurgeCSS() {
     const result = await new purgecss().purge({
       content: ['./index.html', './about.html', './js/*.js'], // فایل‌های HTML و JS شما
       css: ['./css/style.css', './css/bootstrap.min.css'], // فایل‌های CSS اصلی شما
       safelist: ['active', 'hidden', /^js-/, 'menu-open'], // کلاس‌های مورد نیاز
     });
   
     // نتیجه رو تو یه فایل جدید ذخیره کن
     fs.writeFileSync('./dist/optimized-style.css', result[0].css);
     console.log('CSS purged and saved to dist/optimized-style.css');
   }
   
   runPurgeCSS();

   کپی کردن کد

3. اضافه کردن اسکریپت به package.json:

   "scripts": {
     "purge": "node scripts/purge.js"
   }

   کپی کردن کد

4. اجرا: با npm run purge اسکریپت رو اجرا کن و فایل optimized-style.css رو تو پوشه dist (یا هر جا که مشخص کردی) پیدا کن. حالا می‌تونی این فایل رو به جای فایل‌های CSS اصلیت تو HTML لینک کنی.

نکات طلایی برای بهینه‌سازی حداکثری و جلوگیری از مشکلات

اهمیت Safelisting

این بخش رو دست کم نگیر! Safelist کردن کلاس‌ها و تگ‌هایی که به صورت داینامیک توسط جاوااسکریپت اضافه میشن (مثل کلاس‌های اکتیو، تولتیپ‌ها، مودال‌ها، یا کلاس‌های تولید شده توسط فریم‌ورک‌های JS) یا کلاس‌هایی که تو دیتابیس ذخیره شدن و PurgeCSS نمی‌تونه اون‌ها رو تو فایل‌های کد پیدا کنه، از نون شب هم واجب‌تره. یک اشتباه تو این قسمت می‌تونه کل استایل‌های سایتت رو بهم بریزه و یه تجربه تلخ رو برات رقم بزنه. همیشه با دقت کافی این بخش رو پر کن و از رگولار اکسپرشن (regex) برای الگوهای مشابه استفاده کن.
اگر دنبال کدهای آماده و اسنیپت‌های کاربردی برای Safelist هستی، حتماً یه سر به بلاگ ما بزن.

مراقبت از کدهای داینامیک

وقتی از JavaScript برای اضافه کردن کلاس‌ها یا تغییر استایل‌ها استفاده می‌کنی، PurgeCSS ممکنه نتونه اون کلاس‌ها رو شناسایی کنه. مثلاً اگه یه کلاس is-active داری که فقط با کلیک کاربر اضافه میشه، PurgeCSS اگه اون رو تو سورس HTML پیدا نکنه، حذفش می‌کنه. راه حل همون Safelisting هست. یا اینکه سعی کنی اسامی کلاس‌ها رو تو فایل‌های JS به صورت کامل و قابل تشخیص نگه داری، نه اینکه اون‌ها رو با رشته‌سازی‌های پیچیده بسازی.

تست و اعتبارسنجی بعد از Purge

بعد از هر بار اعمال PurgeCSS، حتماً سایتت رو به طور کامل تست کن. تمام صفحات، کامپوننت‌ها و حالت‌های مختلف UI (مثلاً باز و بسته شدن مودال‌ها، منوهای کشویی، حالت‌های خطا) رو بررسی کن. بهتره این کار رو تو محیط Staging یا Production انجام بدی، چون PurgeCSS معمولاً فقط تو محیط Production اجرا میشه. همیشه یه نسخه بکاپ از فایل‌های CSS اصلیت داشته باش که اگه مشکلی پیش اومد، بتونی برگردی.

ترکیب با Minification و Gzip

همونطور که گفتیم، PurgeCSS کد مرده رو حذف می‌کنه، اما Minification بقیه کد رو فشرده می‌کنه. همیشه این دو رو با هم استفاده کن. بعد از این مراحل، مطمئن شو که سرور تو از فشرده‌سازی Gzip یا Brotli برای فایل‌های CSS استفاده می‌کنه. این مرحله نهایی برای کاهش حجم فایل‌های ارسالی به مرورگره و می‌تونه معجزه کنه.

عیب‌یابی سریع (Troubleshooting)

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

سخن پایانی و نگاه به آینده

رفیق برنامه‌نویس، امیدوارم حالا دید بهتری نسبت به اهمیت و نحوه کار با ابزارهای Purge CSS داشته باشی. همونطور که دیدی، با پیاده‌سازی درست این ابزارها می‌تونی یه تغییر چشمگیر تو سرعت و عملکرد سایتت ایجاد کنی. این بهینه‌سازی فقط یه “کار خوب” نیست، بلکه یه ضرورت تو دنیای امروز و رقابت سئوست.

• خلاصه فواید: سایت سبک‌تر، سرعت بارگذاری بیشتر، تجربه کاربری بهتر، بهبود چشمگیر سئو و رتبه در موتورهای جستجو، و حتی کاهش هزینه‌های سرور.
• اهمیت مستمر بهینه‌سازی: بهینه‌سازی یه فرآیند مداومه، نه یه کار یک‌باره. همیشه کد‌های جدید رو با دقت بنویس و ابزارهای بهینه‌سازی رو تو فرآیند بیلدت حفظ کن.

حالا وقتشه که این دانش رو عملی کنی و سایتت رو به اوج سرعت برسونی! اگه سوالی داشتی یا نیاز به راهنمایی بیشتری داشتی، تیم ما همیشه آماده کمکه. می‌تونی از طریق صفحه تماس با تیم فنی با ما در ارتباط باشی. یادت نره برای آخرین اخبار و ابزارهای بهینه‌سازی، به صفحه اصلی fa-tools.ir سر بزنی.