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