هل لاحظت يوماً عند فتح موقعك ظهور النصوص والروابط بدون ألوان وتنسيقات للحظة وجيزة قبل اكتمال تحميل الصفحة؟ يُعرف هذا التأثير البصري المزعج بوميض المحتوى غير المنسق (FOUC – Flash of Unstyled Content)، ويحدث عند تأخير تحميل ملفات CSS لتسريع الصفحة قبل أن تتوفر التنسيقات الأساسية للجزء الظاهر من الشاشة.
تُعد ميزة Critical CSS (CCSS) في LiteSpeed Cache الحل الأمثل لهذه المشكلة، حيث تستخرج كود التنسيق اللازم للجزء المرئي من الشاشة فوراً (Above-the-Fold) وتدمجه في الهيدر، بينما تؤجل باقي ملفات الستايل لبقية الصفحة.
خطوات تفعيل وتوليد Critical CSS: #
- توجه إلى LiteSpeed Cache > Page Optimization > CSS Settings.
- تأكد من تفعيل خيار Load CSS Asynchronously إلى ON.
- فعّل خيار Generate Critical CSS إلى ON.
- Critical CSS Rules: يمكنك تركها تعمل تلقائياً، حيث تتولى سيرفرات QUIC.Cloud توليد الملفات الحرجة لكل نوع صفحة (الصفحة الرئيسية، المقالات، التصنيفات) مجاناً.
- اضغط على Save Changes للتخلص نهائياً من وميض الشاشة وضمان ظهور موقعك بأبهى مظهر من اللحظة الأولى.
