يسرد قسم "الفرص" في تقارير Lighthouse جميع أوراق الأنماط التي تتضمّن لغة CSS غير المستخدَمة، مع توفير محتمل يبلغ 2 كيلوبايت أو أكثر. إزالة خدمة مقارنة الأسعار (CSS) غير المستخدَمة لتقليل وحدات البايت غير الضرورية التي يستهلكها نشاط الشبكة:
كيف تؤدي خدمة CSS غير المستخدمة إلى إبطاء الأداء
ويُعدّ استخدام العلامة <link> طريقة شائعة لإضافة أنماط إلى إحدى الصفحات:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" />
...
</head>
</html>
يُعرف ملف main.css الذي ينزِّله المتصفِّح باسم ورقة أنماط خارجية.
لأنه يتم تخزينه بشكل منفصل عن HTML الذي يستخدمه.
على المتصفح تنزيل جميع أوراق الأنماط الخارجية وتحليلها ومعالجتها بشكل تلقائي التي يواجهها قبل أن يتمكن من عرض أو عرض أي محتوى على شاشة المستخدم. لن يكون من المنطقي أن يحاول المتصفّح عرض المحتوى قبل أن تتم معالجة أوراق الأنماط، لأنّ أوراق الأنماط قد تحتوي على قواعد تؤثر في تصميم الصفحة
يجب تنزيل كل ورقة أنماط خارجية من الشبكة. ويمكن أن تؤدي رحلات الشبكة الإضافية هذه إلى زيادة الوقت بشكل ملحوظ على المستخدمين الانتظار قبل رؤية أي محتوى على شاشاتهم.
تؤدي لغة CSS غير المستخدمة أيضًا إلى إبطاء إنشاء المتصفح شجرة العرض. يشبه شجرة العرض شجرة نموذج العناصر في المستند (DOM)، باستثناء أنّه يتضمّن أيضًا الأنماط لكل عقدة. لإنشاء شجرة العرض، يجب أن يستخدم المتصفّح شجرة عناصر DOM بالكامل، ويتحقّق من قواعد CSS التي تنطبق على كل عقدة. فكلما زادت لغة CSS غير المستخدمة، زاد الوقت الذي قد يحتاج فيه المتصفح إلى قضاء حساب الأنماط لكل عقدة.
كيفية رصد محتوى CSS غير المستخدَم
يمكن أن تساعدك علامة التبويب "التغطية" في "أدوات مطوري البرامج في Chrome" في استكشاف محتوى CSS المهم وغير المهم. يمكنك الاطّلاع على مقالة الاطّلاع على خدمة مقارنة الأسعار (CSS) المستخدَمة وغير المستخدَمة من خلال علامة التبويب "التغطية".
تضمين محتوى CSS المهم وتأجيل CSS غير المهمة
مثلما يحدث مع الرمز المضمّن في العلامة <script>
تضمين الأنماط المهمة المطلوبة للطلاء الأول
داخل كتلة <style> في head من صفحة HTML.
بعد ذلك، يمكنك تحميل بقية الأنماط بشكل غير متزامن باستخدام رابط preload.
يمكنك أتمتة عملية استخراج ودمج "الجزء المرئي من الصفحة" خدمة مقارنة الأسعار (CSS) باستخدام الأداة المُهمّة.
يمكنك الاطّلاع على مزيد من المعلومات في مقالة تأجيل لغة CSS غير المهمة.
إرشادات خاصة بالحِزم
Drupal
ننصحك بإزالة قواعد CSS غير المستخدَمة. إرفاق مكتبات Drupal المطلوبة فقط الصفحة أو المكون ذي الصلة في الصفحة. راجِع مقالة تحديد مكتبة. لمزيد من التفاصيل.
Joomla
يمكنك تقليل أو تبديل عدد إضافات Joomla التي تُحمِّل في صفحتك لغة CSS غير المستخدَمة.
WordPress
يمكنك تقليل أو تبديل عدد مكونات WordPress الإضافية التي تُحمِّل في صفحتك لغة CSS غير المستخدَمة.