يعرض قسم "الفرص" في تقرير Lighthouse جميع ملفات CSS غير المُصغّرة، بالإضافة إلى التوفيرات المحتملة في الكيبيبايت (KiB) عند تصغير هذه الملفات:
كيفية تحسين أداء تصغير ملفات CSS
يمكن أن يؤدي تصغير ملفات CSS إلى تحسين أداء تحميل الصفحة. غالبًا ما تكون ملفات CSS أكبر مما ينبغي. مثال:
/* Header background should match brand colors. */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}
يمكن اختصاره إلى:
h1,
h2 {
background-color: #000000;
}
من منظور المتصفح، تكون عينتا التعليمات البرمجية هاتان متكافئتان من الناحية الوظيفية، لكن المثال الثاني يستخدم وحدات بايت أقل. يمكن أن تؤدي أدوات التصغير إلى تحسين كفاءة وحدات البايت من خلال إزالة المسافة البيضاء:
h1,
h2 {
background-color: #000000;
}
تستخدم بعض أدوات التصغير حيلاً ذكية لتقليل وحدات البايت.
على سبيل المثال، يمكن تقليل قيمة اللون #000000 إلى #000، وهي اختصارها المكافئ له.
توفّر أداة Lighthouse تقديرًا للتوفيرات المحتملة استنادًا إلى
التعليقات وأحرف المسافات البيضاء التي يعثر عليها في خدمة مقارنة الأسعار (CSS).
هذا تقدير متحفظ.
كما ذكرنا سابقًا،
يمكن للصور المصغّرة إجراء تحسينات ذكية (مثل تقليل #000000 إلى #000)
لتقليل حجم الملف أكثر.
لذلك، عند استخدام أداة مصغَّرة، قد يتم توفير مبالغ أكبر
مقارنةً بما ترصده أداة Lighthouse.
استخدام أداة تصغير CSS لتصغير رمز CSS
بالنسبة إلى المواقع الصغيرة التي لا تحدّثها كثيرًا، يمكنك استخدام خدمة عبر الإنترنت لتصغير ملفاتك يدويًا. تلصق CSS في واجهة مستخدم الخدمة، وتعرض نسخة مصغّرة من الرمز.
بالنسبة إلى المطوّرين المحترفين، قد تحتاج إلى إعداد سير عمل تلقائي لتصغير خدمة CSS تلقائيًا قبل نشر الرمز المعدّل. يتم تحقيق ذلك عادةً باستخدام أداة إنشاء مثل Gulp أو Webpack.
تعرَّف على كيفية تصغير رمز CSS في صفحة Minify CSS.
إرشادات خاصة بحِزم البيانات
Drupal
فعِّل تجميع ملفات CSS في الإدارة > الضبط > التطوير. يمكنك أيضًا ضبط خيارات تجميع أكثر تقدّمًا من خلال الوحدات الإضافية لتسريع موقعك الإلكتروني عن طريق ربط أنماط CSS وتصغيرها وضغطها.
Joomla
يمكن لعدد من إضافات Joomla تسريع موقعك الإلكتروني من خلال ربط أنماط لغة CSS وتصغيرها وضغطها. تتوفّر أيضًا نماذج توفّر هذه الوظيفة.
Magento
فعِّل الخيار تصغير ملفات CSS في إعدادات مطوّر البرامج في متجرك.
تفاعل
إذا كان نظام الإصدار يصغّر ملفات CSS تلقائيًا، تأكّد من أنّك تنشر إصدار الإنتاج لتطبيقك. يمكنك التحقق من ذلك باستخدام الإضافة React Developer Tools.
WordPress
يمكن لعدد من مكونات WordPress الإضافية زيادة سرعة موقعك الإلكتروني من خلال ربط الأنماط وتصغيرها وضغطها. يمكنك أيضًا استخدام عملية إنشاء للقيام بذلك في وقت مبكر إذا أمكن.