فهم WordPress CSS
قبل أن نتعمق ، دعونا نفهم كيفية عمل CSS العادي في WordPress.
يتكون كل قالب WordPress من style.css يحتوي على جميع الأكواد اللازمة لتصميم موقعك. يجب أن يدعم مطورو السمات جميع ميزات WordPress التي تتضمن منشورات المدونة والتعليقات وصفحة المنتجات وصفحة العضوية والنماذج وما إلى ذلك. يمكن أيضًا أن تضيف المكونات الإضافية الأخرى التي تقوم بتثبيتها صفحات أنماط css مماثلة.
هذا يمكن أن يجعل ملفات css منتفخة وكبيرة الحجم تصل إلى 200 كيلو بايت أو أكثر.
ما هو المسار الحرج CSS؟
مع نمو ملفات CSS ، يحتاج متصفحك إلى تنزيل تلك الملفات الكبيرة وتحليلها وعرضها. يُعرف أيضًا باسم حظر العرض. سيزيد أيضًا التصيير الأول ذي المعنى وأول تصيير ذي مغزى.
يعد Critical Path CSS هو CSS المطلوب لعرض المحتوى أعلاه على كل صفحة ويب. كما يوحي الاسم ، CSS "هام" ، مما يساعد المتصفح على رسمه وعرضه بسرعة قبل تحميل ملفات CSS كاملة.
عادةً ما يتم تضمين css للمسار الهام في الرأس ويتم تحميل ملف css المصدر بشكل غير متزامن أو في التذييل لسهولة الاستخدام.
لماذا يعتبر Critical Path CSS مهمًا جدًا؟
يجب أن تكون قد شاهدت بالفعل تحذيرًا من أدوات مثل Google PageSpeed Insights أو GTmetrix يقول "تحسين تسليم css" أو "تأجيل css غير المستخدمة".
لا علاقة لـ CSS الحرجة بوقت تحميل الصفحة. لا يزيد / يقلل وقت التحميل. ولكنه يعطي تجربة مستخدم أفضل بكثير. يساعد على "عرض" أو "تلوين" صفحة الويب بسرعة.
- يحسن رسم المحتوى الأول (FCP)
- يحسن أول دفعة كبيرة (FMP)
- إزالة CSS غير المستخدمة (تقنيًا لا تقم بإزالتها ، ولكن أعط الأولوية لـ CSS "المفيدة")
فيما يلي لقطتا شاشة لمدونتي مع CSS أو بدونها.
كما ترى في قسم "لا يوجد مسار css حرج" ، فقد استغرق الأمر 5 ثوانٍ تقريبًا لتظهر للمستخدم شيئًا مفيدًا على جهاز محمول. يجب على المستعرض تقديم طلب HTTP إضافي لملف css وتنزيله وتحليله لبدء العرض. ولكن عند استخدام css الحرجة ، يجب أن تكون جميع ملفات css الضرورية مضمنة ويمكن للمتصفح بدء العرض فورًا بعد تحميل ملف HTML في ثانية أو أقل.
كيفية إنشاء CSS هام في WordPress؟
هناك عدة طرق لإنشاء CSS هام في WordPress.
استخدام ملحقات التخزين المؤقت
WP Rocket هو مكون إضافي مميز للتخزين المؤقت يعمل جيدًا.
أحد أسباب استخدامي WP Rocket على كل موقع هو إنشاء CSS المهم نفسه. يقومون بإنشاء CSS هام بشكل منفصل للصفحة الرئيسية وصفحة المنشورات وصفحة الفئة وصفحة المنتج وما إلى ذلك وتضمينها. سيقومون باستعادة CSS الهامة إذا كانت هناك تغييرات في الموضوع أو الإعداد.
كل شيء يمكن القيام به بلمسة زر واحدة.
ملحقات التخزين المؤقت الأخرى التي يمكنها إنشاء CSS مهمة
يعد كل من Swift Performance و LiteSpeed (يتطلب خادم LiteSpeed / OpenLiteSpeed) من المكونات الإضافية المتشابهة التي يمكنها إنشاء CSS بالغة الأهمية. يحتوي كلا المكونين الإضافيين على سحابة وذاكرة تخزين مؤقت كاملة مدمجة في خوادمهم.
باستخدام Autoptimize + Free Critical CSS Generator
هناك أدوات عبر الإنترنت لجهات خارجية توفر css مهمًا عن طريق إدخال عنوان URL الخاص بموقعك. pegasaas هي أداة مجانية رائعة.
هيريس كيفية القيام بذلك:
الخطوة 1. انتقل إلى https://pegasaas.com/critical-path-css-generator/ وأدخل عنوان URL الخاص بك. انسخ "Critical Path CSS" الذي تم إنشاؤه.
الخطوة 2 في إعدادات التحسين التلقائي (تمكين الإعدادات المتقدمة) ، ضمن "خيارات CSS" ، حدد "Inline and Defer CSS" والصق CSS المنسوخ.
الايجابيات:
- مجانا
سلبيات:
- لا يوجد CSS منفصل مهم لأنواع الصفحات المختلفة (على سبيل المثال: الصفحة الرئيسية ، صفحة المنشورات ، صفحة الفئة ، صفحة المنتج ، إلخ.)
- لا تعيد البناء تلقائيًا عند تغيير السمة / الإعداد
لماذا لا يستطيع WordPress نفسه إنشاء CSS مهم؟
كما لاحظت ، فإن إنشاء مسار حرج css يمكّن الخدمات الخارجية. فلماذا لا يستطيع WordPress نفسه إنشاءه؟
أصبح إنشاء CSS حرجًا ممكنًا من خلال مشاريع مفتوحة المصدر مثل Critical (بواسطة Google) أو CriticalCSS أو بنتهاوس. كل هذه المشاريع مبنية على NodeJS وليس PHP. لذلك ، تحتاج إلى تثبيت NodeJS على الخادم الخاص بك. لا يسمح معظم مزودي الاستضافة المشتركة / المُدارة بهذا لعدة أسباب.
