يسرد قسم "الفرص" في تقرير 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 غير المستخدَمة.