يسرد قسم "الفرص" في تقرير Lighthouse كل أوراق الأنماط التي تحتوي على ملف CSS غير مستخدَم، مع إمكانية توفير 2 كيلوبايت أو أكثر. قم بإزالة لغة CSS غير المستخدمة لتقليل وحدات البايت غير الضرورية التي يستهلكها نشاط الشبكة:
كيفية تأثير محتوى CSS غير المستخدَم في إبطاء الأداء
يُعدّ استخدام علامة طريقة شائعة لإضافة أنماط إلى صفحة:
...
يُعرف ملف main.css الذي ينزّله المتصفّح باسم جدول تنسيقات خارجية،
لأنّه يتم تخزينه بشكل منفصل عن ملف HTML الذي يستخدمه.
يجب أن ينزِّل المتصفّح تلقائيًا جميع أوراق الأنماط الخارجية ويحلّلها ويعالجها قبل أن يتمكّن من عرض أي محتوى على شاشة المستخدم. ولن يكون من المنطقي أن يحاول المتصفح عرض المحتوى قبل معالجة أوراق الأنماط، لأن أوراق الأنماط قد تحتوي على قواعد تؤثر في تصميم الصفحة.
يجب تنزيل كل جدول أسلوب خارجي من الشبكة. ويمكن أن تؤدي هذه الرحلات الإضافية إلى الشبكة إلى زيادة وقت الانتظار الذي يحتاجه المستخدمون بشكل كبير قبل ظهور أي محتوى على شاشاتهم.
تؤدّي ملفات CSS غير المستخدَمة أيضًا إلى إبطاء إنشاء المتصفّح لملف شجرة العرض. تشبه شجرة العرض شجرة DOM، إلا أنّها تتضمّن أيضًا أنماط كل عقدة. لإنشاء شجرة العرض، يجب أن ينتقل المتصفّح إلى شجرة DOM بالكامل ويتحقّق من قواعد CSS التي تنطبق على كل عقدة. وكلما زادت صفحات CSS غير المستخدَمة، زاد الوقت الذي قد يستغرقه المتصفّح في احتساب الأنماط لكل عقدة.
كيفية رصد محتوى CSS غير المستخدَم
يمكن أن تساعدك علامة التبويب "التغطية" في "أدوات مطوّري البرامج في Chrome" في اكتشاف صفحات CSS المهمة وغير المهمة. راجِع مقالة عرض ملفّات CSS المستخدَمة وغير المستخدَمة باستخدام علامة التبويب "التغطية".
تضمين محتوى CSS المهم وتأجيل محتوى CSS غير المهم
على غرار تضمين الرمز في علامة