يسرد قسم "الفرص" في تقارير 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 في تصغير CSS.
إرشادات خاصة بالحِزم
Drupal
تمكين تجميع ملفات CSS في الإدارة > الإعداد > التطوير: يمكنك أيضًا ضبط خيارات تجميع أكثر تقدّمًا. من خلال وحدات إضافية لتسريع موقعك الإلكتروني من خلال دمج لغة CSS وتصغيرها وضغطها الأنماط.
Joomla
عدد من إضافات Joomla يمكنه تسريع موقعك الإلكتروني من خلال ربط ملف css وتصغيره وضغطه. الأنماط. هناك أيضًا نماذج توفّر هذه الوظيفة.
Magento
فعِّل الخيار تصغير ملفات CSS. في "إعدادات المطوّرين" في متجرك
React
في حال تصغير نظام الإصدار لملفات CSS تلقائيًا، يُرجى التأكد من نشر الإنتاج من تطبيقك. يمكنك التحقّق من ذلك باستخدام React الذي يضم أدوات مطوّري البرامج. الإضافة.
WordPress
يمكن لعدد من مكونات WordPress الإضافية تسريع من خلال ربط الأنماط وتصغيرها وضغطها. قد تريد أيضًا استخدام عملية إنشاء لإزالة البيانات غير الضرورية بشكل مسبق إن أمكن