فشرده‌سازی CSS _

نحوه عملکرد فشرده‌سازی CSS

فشرده‌ساز استایل‌شیت شما را با یک tokeniser آگاه از وضعیت پیمایش می‌کند که بین مناطق حفاظت‌شده (رشته‌های متنی و مقادیر url()) و فضاهای خالی قابل ویرایش که فشرده‌سازی و حذف آن‌ها ایمن است تمایز قائل می‌شود.

1. حفاظت از رشته‌ها و URLها. پیش از هر تبدیل دیگری، tokeniser هر رشته نقل‌قولی ("…" یا '…') و هر آرگومان url(…) را شناسایی کرده و عیناً ذخیره می‌کند. مراحل بعدی این بایت‌ها را هرگز لمس نمی‌کنند، بنابراین یک URL تصویر پس‌زمینه با فاصله یا یک ویژگی content با نقطه‌گذاری دقیقاً حفظ می‌شود.
2. حذف کامنت‌ها. بلوک‌های /* … */ هنگامی که گزینه فعال است حذف می‌شوند. اگر گزینه کامنت مجوز نیز فعال باشد، بلوک‌های /*! … */ باقی می‌مانند تا سرآیندهای مجوز MIT، Apache و BSD در خروجی موجود بمانند، آن‌گونه که این مجوزها الزام می‌کنند.
3. فشرده‌سازی فضاهای خالی. هر توالی از فاصله‌ها، tabها و خطوط جدید به یک فاصله واحد تبدیل می‌شود، سپس فضای خالی اطراف کاراکترهای ساختاری CSS {، }، ;، : و , کاملاً حذف می‌شود. لیست‌های selector و مقدار دقیقاً مانند آنچه پارسر مرورگر می‌خواند بازآرایی می‌شوند.
4. بهینه‌سازی مقادیر. مراحل اختیاری کدهای رنگ hex را به حروف کوچک تبدیل می‌کنند، کانال‌های hex شش‌رقمی جفتی را به shorthand سه‌رقمی فشرده می‌کنند (#aabbcc → #abc)، و واحدهای ابعادی از مقادیر صفر را می‌زدایند (0px → 0). مرحله zero-unit مقادیر داخل فراخوانی‌های transform() را که در آن واحدها مهم هستند نادیده می‌گیرد.
5. گزارش صرفه‌جویی در بایت. هر دو متن اصلی و فشرده‌شده با new TextEncoder().encode(…).byteLength اندازه‌گیری می‌شوند — همان شمارش بایت UTF-8 که یک CDN یا سرور HTTP روی شبکه می‌بیند. نوار متریک اندازه اصلی، اندازه فشرده‌شده، بایت‌های صرفه‌جویی‌شده و درصد صرفه‌جویی را نشان می‌دهد.

چرا CSS را فشرده کنیم

• بارگذاری سریع‌تر render-blocking. مرورگرها تا پایان تجزیه CSS حتی یک پیکسل هم نمی‌کشند. کاهش ۳۰ درصدی استایل‌شیت این انسداد را کوتاه می‌کند، First Contentful Paint را بهبود می‌بخشد و مستقیماً در نمره عملکرد Lighthouse شما منعکس می‌شود.
• کاهش هزینه‌های egress CDN. CloudFront، Cloudflare و Fastly همگی به ازای هر گیگابایت egress هزینه می‌گیرند. کاهش ۲۰ درصدی از استایل‌شیتی که در هر بازدید صفحه ارسال می‌شود وقتی ترافیک ماهانه از چند میلیون بازدید عبور کند تبدیل به یک ردیف واقعی در فاکتور می‌شود.
• embedهای کوچک‌تر و CSS ایمیل. قالب‌های ایمیل تراکنشی CSS خود را برای جلوگیری از مشکلات رندر Outlook و Gmail inline می‌کنند و هر بایت اضافه شما را به آستانه کلیپ ۱۰۲ کیلوبایتی Gmail نزدیک‌تر می‌کند. فشرده‌سازی پیش از inline کردن پیام را زیر این حد نگه می‌دارد.
• بدون وابستگی به build-tool. کارهای سریع یک‌باره، مخازن قدیمی بدون pipeline ساخت و محیط‌های air-gapped همیشه جایی برای یک toolchain نود ندارند. می‌توانید بدون نصب PostCSS، cssnano یا هر چیز دیگری این مرحله را اینجا اجرا کنید.

کاربردهای رایج

فشرده‌سازی CSS در انتهای تقریباً هر pipeline ساخت front-end و در چندین زمینه runtime که شمارش بایت اهمیت دارد ظاهر می‌شود.

• Pipeline‌های ساخت پروداکشن: Webpack، Vite، Rollup و Parcel همگی یک مرحله فشرده‌سازی CSS در پیش‌فرض‌های production mode خود دارند. اجرای این مرحله اینجا قبل از commit به شما امکان می‌دهد خروجی را بدون راه‌اندازی ساخت کامل اعتبارسنجی کنید.
• جاسازی CSS در تگ‌های <style>: فریم‌ورک‌های server-rendered که CSS بحرانی را به HTML document inline می‌کنند از همان صرفه‌جویی بایتی مانند استایل‌شیت‌های مستقل بهره می‌برند و CSS inline کوچک‌تر Time to First Byte را کاهش می‌دهد.
• ایمیل تراکنشی و بازاریابی: HTML ایمیل همه CSS را inline می‌کند، بنابراین هر کیلوبایت در استایل‌شیت به حجم کل پیام اضافه می‌شود. فشرده‌سازی پیش از inline کردن پیام‌ها را به خوبی زیر محدودیت‌های اندازه ESP نگه می‌دارد.

یک مثال عملی

یک مجموعه قانون ۱ کیلوبایتی با تورفتگی دو فاصله، خطوط خالی بین selectorها، یک بلوک کامنت مجوز در بالا و رنگ‌های hex verbose مثل #FFFFFF و marginهای zero-padded مثل margin: 0px الصاق کنید. با فعال بودن همه گزینه‌ها، خروجی به حدود ۶۰۰ بایت می‌رسد — صرفه‌جویی ۴۰ درصدی — در حالی که صفحه رندرشده کاملاً یکسان با سورس به نظر می‌رسد.

آیا فشرده‌سازی رفتار CSS من را تغییر می‌دهد؟

نه، با گزینه‌های پیش‌فرض. فشرده‌ساز فقط بایت‌هایی را حذف می‌کند که پارسر CSS پیشاپیش دور می‌اندازد — فضاهای خالی، کامنت‌ها، سمیکولون نهایی اختیاری — و از داخل transform() که واحدها در آن مهم هستند رد می‌شود. هر selector، ویژگی و مقدار حفظ می‌شود.

آیا با SCSS یا LESS کار می‌کند؟

فقط پس از کامپایل آن‌ها به CSS ساده. نحو SCSS و LESS (متغیرها، تودرتو، mixinها، & parent selectorها) CSS معتبر نیست و فشرده‌ساز آن را خراب می‌کند. ابتدا سورس preprocessor را کامپایل کنید، سپس خروجی کامپایل‌شده را اینجا الصاق کنید.

چرا کامنت‌های مجوز من حذف می‌شوند؟

«حذف کامنت‌ها» به‌طور پیش‌فرض روشن است و هر بلوک /* … */ را پاک می‌کند. برای نگه داشتن بلوک‌های شروع‌شده با /*!، گزینه «حفظ کامنت‌های /*! مجوز» را فعال کنید. MIT، Apache و BSD همگی الزام می‌کنند که سرآیند copyright با CSS توزیع‌شده همراه باشد.

چقدر می‌توانم صرفه‌جویی کنم؟

CSS دست‌نوشته معمولاً ۱۵ تا ۳۵ درصد کاهش می‌یابد. فایل‌های با کامنت‌های فراوان یا تورفتگی عمیق با بسیاری از رنگ‌های متنی می‌توانند به ۴۰ درصد برسند. خروجی کامپایل‌شده از Sass یا CSS-in-JS اغلب از پیش جزئی فشرده‌شده است و کمتر صرفه‌جویی می‌کند — معمولاً ۵ تا ۱۵ درصد.

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