الطلاء الأول باستخدام CSS الحرجة

ما هو CSS الحرج؟

CSS الحرج هو تحديد قواعد CSS المطلوبة للمنطقة الأولى من صفحة الويب التي يراها المستخدم عندما يفتح الصفحة، والتي تسمى فوق الجزء المرئي، ويتم تقديمها مضمنة بتنسيق HTML. تسمح هذه التقنية للمتصفح برسم الصفحة دون انتظار ملفات CSS خارجية.

حل مشكلة حظر العرض

تنتظر المتصفحات، بشكل افتراضي، طلاء الصفحة حتى يتم تنزيل جميع ملفات CSS. يؤدي هذا إلى تأخيرات خطيرة، خاصة في المشاريع التي تحتوي على ملفات CSS كبيرة الحجم. نتخلص من هذا الانتظار باستخدام تقنية CSS الهامة:

1. حدد قواعد CSS المطلوبة لأعلى الصفحة.
2. أضف هذه القواعد مضمنة في جزء من HTML.
3. قم بتحميل ملف CSS الرئيسي بشكل غير متزامن باستخدام media="print" onload="this.media='all'".

الأدوات

تساعدك أدوات مثل

حرجة (حزمة npm) وPenthouse وPurgeCSS على أتمتة هذه العملية. يمكنك دمجها في مسار Laravel Mix أو Vite الخاص بك.

المكاسب

• تخفيض بنسبة 40-60% في وقت الطلاء الأول للمحتوى (FCP).
• يشعر المستخدم على الفور أن الموقع قيد التحميل.
• زيادة بمقدار 10-20 نقطة في نتائج أداء Lighthouse.