مصغّر CSS

كيف يعمل تصغير CSS

تستخدم هذه الأداة CSSO (CSS Optimizer)، الذي يحلّل ورقة الأنماط إلى شجرة صياغة ثم يطبعها بأقصر صيغة مكافئة. وإلى جانب إزالة المسافات والتعليقات، يطبّق إعادة كتابة آمنة للقيم:

• #ffffff → #fff، #ff0000 → red
• 0px → 0، 0.90 → .9
• margin: 8px 16px 8px 16px → margin:8px 16px
• تُحذف القواعد الفارغة والتصريحات المكررة

ماذا تفعل “إعادة الهيكلة”؟

تنظر إعادة الهيكلة في ورقة الأنماط كاملة: تُدمج القواعد ذات التصريحات المتطابقة في قائمة محددات واحدة (.a,.b{color:red})، وتُجمع المحددات المكررة. وغالبًا ما يوفّر ذلك 5–15% إضافية في أوراق الأنماط الحقيقية. لا يدمج CSSO إلا عندما يبقى ترتيب التتالي (cascade) كما هو، لكن إن كنت تعتمد على تجاوزات غير معتادة فيمكنك تعطيلها للحصول على تصغير نحوي بحت.

لماذا تصغّر CSS؟

يحجب CSS العرض: لا يستطيع المتصفح رسم الصفحة حتى تُنزَّل أوراق الأنماط الموجودة في <head> وتُحلَّل. CSS أصغر يعني First Contentful Paint أسرع وCore Web Vitals أفضل، مما يفيد المستخدمين وترتيب نتائج البحث معًا. اجمع بين التصغير وgzip أو Brotli على الخادم لأفضل نتيجة.