تصغير حجم CSS
يجب تنزيل وتحليل كل بايت من كود CSS قبل عرض الصفحة، لذا فإن ملفات الأنماط الأصغر تعني سرعة أكبر في العرض الأولي، وتحسيناً لمؤشرات أداء الويب الأساسية (Core Web Vitals)، واستهلاكاً أقل لبيانات الهاتف المحمول. تقوم أداة تصغير CSS هذه بإزالة المسافات البيضاء والتعليقات وتطبيق تحسينات هيكلية — مثل دمج القواعد المكررة، واختصار الألوان، وإزالة القيم الزائدة — ليكون ملف الأنماط الخاص بك أصغر ما يمكن دون تغيير مظهر الصفحة.
الميزات
- إزالة المسافات البيضاء والتعليقات.
- اختصار القيم: الألوان، والأصفار، والوحدات، وأوزان الخطوط.
- التحسين الهيكلي: دمج المحددات المكررة وإزالة الخصائص التي تم تجاوزها.
- تعليقات الترخيص (
/*! … */) يتم الاحتفاظ بها عند الطلب. - مقارنة الحجم بالبايت والنسبة المئوية.
- الخصوصية: تعمل الأداة بالكامل داخل متصفحك.
قبل وبعد
.card .title {
font-weight: bold;
color: #333333;
}
.card .title {
font-size: 1.25em;
}
تصبح
.card .title{font-weight:700;color:#333;font-size:1.25em}
متى يجب تصغير الكود
قم بتصغير CSS كجزء من عملية البناء للإنتاج، واحتفظ بالمصدر القابل للقراءة في نظام التحكم في الإصدارات. تقوم معظم أطر العمل وأدوات التجميع بذلك تلقائياً؛ وتُعد هذه الأداة مفيدة للإصلاحات السريعة، وقوالب أنظمة إدارة المحتوى (CMS)، وقوالب البريد الإلكتروني، والأدوات المدمجة، والمشاريع التي لا تحتوي على خطوة بناء.
أدوات ذات صلة
قم بتصغير السكربتات باستخدام أداة تصغير JavaScript، أو أنشئ الأنماط بصرياً باستخدام مُنشئ ظل الصندوق و مُنشئ التدرج اللوني CSS، أو قم بتنسيق أكواد JSON باستخدام مُنسّق JSON.