فشردهساز CSS رایگان: فشردهسازی و بهینهسازی کد CSS آنلاین
کد CSS را بلافاصله فشرده کنید و اندازه فایل را تا 40٪ کاهش دهید. فشردهساز CSS آنلاین رایگان فاصلههای خالی، نظرات را حذف میکند و نحو را برای عملکرد سریعتر وبسایت بهینه میسازد.
کاهش حجم CSS
کاهش فوری حجم کد CSS تا 40٪ و بهبود سرعت بارگذاری وبسایت.
درباره کاهش حجم CSS
کاهش حجم CSS حذف کاراکترهای غیرضروری از فایلهای CSS بدون تغییر عملکرد، کاهش حجم فایل و بهبود عملکرد وبسایت.
- حذف نظرات، فاصلهها و خطهای جدید
- حذف سمیکالنها و واحدهای صفر غیرضروری
- بهینهسازی مقادیر رنگ و اعلامیهها
- بهبود سرعت بارگذاری صفحه و رتبهبندی SEO
مستندات
کوچککنندهٔ CSS چیست؟
کوچککنندهٔ CSS ابزاری است که با حذف نویسههایی که مرورگرها به آنها نیاز ندارند، حجم یک فایل CSS (شیوهنامههای آبشاری) را کاهش میدهد. این ابزار نظرها، فاصلههای اضافی و شکستهای خط را حذف میکند و چند الگوی رایج را کوتاهتر میسازد، بدون آنکه ظاهر صفحه را تغییر دهد. نتیجه فایلی کوچکتر است که مرورگر میتواند آن را سریعتر بارگیری و تجزیه کند.
کوچکسازی CSS چگونه کار میکند
توسعهدهندگان وب CSS را با نظرها، تورفتگی و خطهای خالی مینویسند، چون این موارد خواندن و ویرایش کد را آسانتر میکنند. مرورگرها همهٔ این قالببندیها را نادیده میگیرند. کوچککننده آنها را، همراه با چند بایت دیگر که هدف بصری ندارند، حذف میکند و فایلی فشرده باقی میگذارد که برای استفاده در محیط تولید مناسب است، نه ویرایش.
این ابزار تغییرات زیر را اعمال میکند:
- نظرها را حذف میکند. هر بلوک
/* ... */حذف میشود. - فاصلههای خالی را یکپارچه میکند. دنبالههای فاصله، تب و شکست خط بین قواعد به هیچ تبدیل میشوند یا هرجا فاصله معنا داشته باشد، به یک فاصله کاهش مییابند؛ برای نمونه، بین
.parentو.childدر انتخابگر فرزندی. - فاصلههای اطراف علائم نگارشی را حذف میکند. فاصلههای کنار
{،}،:،;و,حذف میشوند. - نقطهویرگولهای اضافی را حذف میکند. نقطهویرگولهای تکراری به یکی کاهش مییابند و نقطهویرگول نهایی پیش از
}بستهشونده حذف میشود. - رنگهای هگزادسیمال را کوتاهتر میکند. رنگ ششرقمی مانند
#ffffff، هنگامی که هر جفت رقم با جفت متناظر خود یکسان باشد (قرمز، سبز و آبی)، به#fffتبدیل میشود. رنگ هشترقمی دارای آلفا، مانند#ffaa00cc، نیز وقتی هر چهار جفت یکسان باشند، به همین شکل کوتاه میشود. - واحد را از مقادیر با طول صفر حذف میکند.
0px،0emو0remبه0تبدیل میشوند. مقادیر درصدی دستنخورده میمانند، چون0%همیشه قابل جایگزینی با0ساده نیست؛ برای نمونه، در یک گامflex-basisیا@keyframes. - صفر ابتدایی اعداد اعشاری را حذف میکند.
0.5به.5تبدیل میشود.
برای جلوگیری از خراب شدن فایل، ابزار سه نوع محتوا را دستنخورده باقی میگذارد: متن داخل نقلقولها، مقدار داخل url() بدون نقلقول و محتوای توابع ریاضی مانند calc()، clamp()، min() و max(). فاصلهگذاری داخل calc(100% - 20px) برای مرورگر مهم است، بنابراین ابزار آن را دقیقاً حفظ میکند.
این ابزار انتخابگرهای تکراری را ادغام نمیکند، بلوکهای قاعدهٔ خالی را حذف نمیکند و رنگهای rgb() را به هگز تبدیل نمیکند. ابزارهای دیگر این بهینهسازیهای معتبر را انجام میدهند، اما این کوچککننده بر تغییرات فهرستشده در بالا تمرکز دارد.
فرمول درصد کاهش
ابزار گزارش میدهد که حجم فایل بهصورت درصدی چقدر کاهش یافته است:
1reduction % = ((original length − minified length) / original length) × 100
2هر دو طول بر اساس تعداد نویسهها محاسبه میشوند. نتیجه تا دو رقم اعشار گرد میشود.
مثال حلشده
CSS اصلی (۱۹۳ نویسه):
1/* Navigation Styles */
2.nav-menu {
3 display: flex;
4 justify-content: space-between;
5 padding: 20px 0px;
6 background-color: #ffffff;
7}
8
9.nav-item {
10 margin-right: 15px;
11 color: #000000;
12}
13خروجی کوچکشده (۱۲۹ نویسه):
1.nav-menu{display:flex;justify-content:space-between;padding:20px 0;background-color:#fff}.nav-item{margin-right:15px;color:#000}
2با اعمال فرمول: (۱۹۳ − ۱۲۹) / ۱۹۳ × ۱۰۰ = ۳۳٫۱۶٪. نظر حذف شده، تورفتگی و شکستهای خط حذف شدهاند، 0px به 0 تبدیل شده و #ffffff/#000000 به #fff/#000 تبدیل شدهاند.
درصد دقیق به ورودی بستگی دارد. CSS فشردهای که نظرهای کمی دارد، کمتر کاهش حجم پیدا میکند. CSS دارای نظرهای فراوان و تورفتگی عمیق ممکن است کاهش بیشتری داشته باشد. شیوهنامههای معمولی که با این ابزار کوچکسازی میشوند، تقریباً ۲۰٪ تا ۴۰٪ کاهش حجم دارند.
چگونه از این ابزار استفاده کنیم
- کد CSS را در کادر ورودی سمت چپ جایگذاری کنید.
- نسخهٔ کوچکشده بهطور خودکار در سمت راست ظاهر میشود و نیازی به فشردن دکمه نیست.
- درصد کاهش نمایشدادهشده بالای خروجی را بررسی کنید.
- گزینهٔ «کپی در کلیپبورد» را انتخاب کنید تا CSS کوچکشده کپی شود، سپس آن را در فایل پروژه جایگذاری کنید.
- گزینهٔ «پاک کردن» را انتخاب کنید تا هر دو کادر پاک شوند و از ابتدا شروع کنید.
هیچچیزی که در ابزار تایپ شود به سرور ارسال نمیشود؛ کوچکسازی در مرورگر انجام میگیرد.
چه زمانی CSS را کوچکسازی کنیم
تیمهای توسعه معمولاً CSS را بهعنوان مرحلهای از فرایند ساخت خود کوچکسازی میکنند و از ابزارهایی مانند Webpack یا اسکریپتهای npm بهره میبرند تا این تغییر پیش از هر استقرار بهطور خودکار انجام شود. فایل منبع خوانا و دارای نظر در سیستم کنترل نسخه باقی میماند؛ فقط ساخت تولیدی کوچکسازی میشود. مکانهای رایج استفاده از CSS کوچکشده عبارتاند از:
- وبسایتهای بزرگ، مانند فروشگاههای آنلاین، که در آنها شیوهنامهٔ کوچکتر به معنای بارگیری سریعتر صفحه است.
- برنامههای تکصفحهای ساختهشده با چارچوبهایی مانند React یا Vue، که در آنها CSS در کنار جاوااسکریپت بستهبندی میشود.
- صفحههای وب موبایل، که کاربران آنها بیشتر ممکن است اتصال کندتری داشته باشند.
- ایمیلهای HTML، که اغلب محدودیتهای سختگیرانهای برای اندازه دارند.
کوچکسازی CSS و سرعت صفحه
فایل CSS کوچکتر سریعتر بارگیری و تجزیه میشود و میتواند زمان پیش از قابلمشاهده شدن صفحه را کوتاه کند. گوگل اعلام کرده است که سرعت صفحه یکی از سیگنالهای مورد استفاده در رتبهبندی جستوجو است؛ بنابراین صفحهٔ سریعتر میتواند یکی از عوامل کوچک، در میان عوامل متعدد، در عملکرد سایت در نتایج جستوجو باشد. کوچکسازی بهتنهایی تغییر رتبه را تضمین نمیکند؛ این کار یکی از چندین بهینهسازی است که فشردهسازی تصویر و زمان پاسخگویی سرور را نیز شامل میشود.
کوچککنندهٔ CSS در برابر زیبانمای CSS
کوچککننده کد را برای محیط تولید فشرده میکند. زیبانما برعکس عمل میکند: CSS فشرده را میگیرد و با افزودن تورفتگی و شکستهای خط، قالببندی آن را بهگونهای تغییر میدهد که دوباره برای انسان خوانا شود. زیبانما نمیتواند نظرها یا نامهای اصلی متغیرها را که هنگام کوچکسازی حذف شدهاند بازگرداند، زیرا پس از حذف شدن، آن اطلاعات دیگر وجود ندارد.
پرسشهای متداول
CSS پس از کوچکسازی چقدر کاهش حجم پیدا میکند؟ با این ابزار، معمولاً ۲۰٪ تا ۴۰٪، بسته به تعداد نظرها، خطهای خالی و میزان تورفتگی فایل اصلی. فایلی که از ابتدا قالببندی کمی داشته باشد، کاهش حجم کمتری پیدا میکند.
آیا کوچکسازی CSS ظاهر صفحه را تغییر میدهد؟
خیر. کوچکسازی فقط نویسههایی را که مرورگرها نادیده میگیرند، مانند نظرها و فاصلههای خالی اضافی، حذف میکند و چند مقدار معادل را بازنویسی میکند؛ مانند تبدیل #ffffff به #fff. صفحهٔ نمایشدادهشده همان شکل قبلی باقی میماند.
آیا باید CSS را هنگام توسعه کوچکسازی کرد؟ خیر. هنگام نوشتن و اشکالزدایی کد، نسخهٔ خوانا و دارای نظر را نگه دارید. فقط نسخهای را که به سرور تولید ارسال میشود کوچکسازی کنید؛ این کار معمولاً مرحلهای خودکار در فرایند ساخت است.
آیا میتوان CSS کوچکشده را به فایل اصلی برگرداند؟ زیبانما میتواند CSS کوچکشده را با افزودن تورفتگی قالببندی کند، اما نمیتواند نظرهای حذفشده را بازیابی کند یا نامهای توصیفیای را که هرگز در نسخهٔ کوچکشده وجود نداشتهاند بازگرداند. فایل منبع اصلی را نگه دارید.
آیا این ابزار رنگهای rgb() را به هگز تبدیل میکند یا انتخابگرهای تکراری را ادغام میکند؟
خیر. این ابزار رنگهای هگزادسیمال را کوتاه میکند و نویسههای غیرضروری را حذف میکند، اما مقادیر rgb()/hsl() را بازنویسی نمیکند و انتخابگرهای تکراری را ادغام نمیکند. برخی کوچککنندههای دیگر این مراحل اضافی را انجام میدهند.
آیا کوچکسازی با فشردهسازی gzip یکسان است؟ خیر. کوچکسازی نویسههای غیرضروری را از خود کد منبع حذف میکند. فشردهسازی Gzip (یا Brotli) هنگام ارسال فایل، توسط وبسرور و با استفاده از الگوریتمی جداگانه انجام میشود. استفاده از هر دو روش در کنار هم، کوچکترین فایل را برای انتقال در شبکه ایجاد میکند.