كيفية إنشاء CSS الحرجة في WordPress (طريقتان)

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

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

في هذا المنشور ، سنشرح CSS الهامة ولماذا يجب أن تفكر في إنشائها لموقعك على الويب. بعد ذلك ، سنعرض لك طريقتين مختلفتين للقيام بذلك في WordPress.

ما هو CSS المهم في WordPress؟

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

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

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

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

فوائد إنشاء CSS الحرجة

يتضمن إنشاء CSS مهم لصفحات الويب الخاصة بك التخلص من أي CSS يحظر العرض وتمكين المتصفح من معالجة ما هو ضروري فقط.

1. تحسين توصيل المحتوى

عندما تقوم بتحسين تسليم CSS لموقع WordPress الخاص بك ، يمكن أن يحسن عملية العرض. بالنسبة لزائر الواجهة الأمامية ، قد يبدو أنه يتم تحميل صفحاتك بسرعة أكبر.

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

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

هناك اعتقاد خاطئ شائع وهو أن CSS الحرج يقلل من وقت التحميل. على الرغم من أن هذا ليس صحيحًا ، إلا أن تقنية التحسين يمكن أن تحسن الأداء الملحوظ .

بشكل أساسي ، سيعتقد المستخدمون أن صفحاتك يتم تحميلها بشكل أسرع لأن المتصفح يمكنه ببساطة عرض عناصر الجزء المرئي من الصفحة بشكل أكثر كفاءة.

من خلال إنشاء CSS هام لـ WordPress ، سيتمتع الزوار بتجربة مستخدم (UX) أفضل على موقعك. نتيجة لذلك ، يمكنك تقليل معدلات الارتداد وتشجيع الزيارات مرة أخرى.

2. تحسين "حيوية الويب الأساسية"

على الرغم من أن CSS الهام لـ WordPress لا يزيد أو يقلل من وقت تحميل الصفحة ، إلا أنه يمكن أن يحسن من حيوية الويب الأساسية الخاصة بك. تحلل هذه المقاييس تجربة مستخدم موقع الويب.

فيما يلي أساسيات الويب الأساسية:

• أكبر رسم محتوى (LCP) : أداء تحميل موقع ويب
• أول تأخير للإدخال (FID) : تفاعل موقع الويب
• التحول في التخطيط التراكمي (CLS) : الاستقرار المرئي لموقع الويب

بعد فحص موقع الويب الخاص بك بحثًا عن تقرير Core Web Vitals ، قد ترى مقاييس إضافية مثل First Contentful Paint (FCP) أو Time to First Byte (TTFB). هذه تؤثر على LCP وتلعب دورًا مهمًا في عملية التحميل.

تؤثر CSS الحرجة بشكل مباشر على FCP. ببساطة ، يقيس FCP الوقت المستغرق لعرض العنصر الأول على صفحة الويب بعد أن يبدأ التحميل. إذا كان موقعك يحتوي على نقاط FCP ضعيفة ، فغالبًا ما يرى الزوار صفحة فارغة لفترة من الوقت.

بصفتك مالك موقع WordPress ، يجب أن تهدف إلى الحصول على FCP في أقل من 1.8 ثانية ، ولكن العديد من العناصر يمكن أن تؤثر سلبًا على هذه النتيجة ، بما في ذلك:

• يحظر عرض JavaScript و CSS
• خادم بطيء
• ملفات الخطوط الضخمة
• حجم نموذج كائن المستند الكبير (DOM)

نظرًا لأن CSS لحظر العرض يساهم في FCP ، فإن إنشاء CSS مهم يمكن أن يحسن هذه النتيجة. أثناء هذه العملية ، ستقوم بتضمين جميع CSS اللازمة لعرض محتوى الجزء المرئي من الصفحة.

كيفية اختبار موقع الويب الخاص بك لحظر CSS

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

للبدء ، أدخل عنوان URL لموقع الويب الخاص بك في PageSpeed ​​Insights. سيقوم برنامج Google هذا بتحليل أداء موقعك بمختلف عمليات تدقيق السرعة.

في الجزء العلوي من الصفحة ، سترى تقييم "أساسيات الويب الأساسية" الخاص بك. يتضمن مقاييس لأكبر رسم محتوى ، وتأخير الإدخال الأول ، وتحول التخطيط التراكمي ، ورسام المحتوى الأول ، والتفاعل مع الرسام التالي ، والوقت حتى البايت الأول.

كما تعلمت سابقًا ، يرتبط CSS لحظر العرض ارتباطًا وثيقًا بدرجة FCP. تأكد من أن نتائج تقييم كل من الهاتف المحمول وسطح المكتب تبلغ 1.8 ثانية أو أقل.

إذا تلقيت درجة ضعيفة ، فقد يكون لديك ملفات CSS ضخمة وغير محسّنة على موقع الويب الخاص بك. للتحقق مما إذا كان هذا صحيحًا ، قم بالتمرير لأسفل إلى الفرص . يقدم هذا القسم اقتراحات محددة لتحسين وقت تحميل موقع الويب الخاص بك.

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

كيفية إنشاء CSS هام في WordPress

الآن بعد أن فهمت المزيد عن CSS الحرجة في WordPress ولماذا هي مهمة ، فقد حان الوقت لإنشائها! بغض النظر عن مستوى مهارتك ، يمكنك بسهولة معرفة كيفية تحسين تسليم CSS في WordPress باتباع برنامجنا التعليمي الصديق للمبتدئين.

الطريقة الأولى: إنشاء CSS مهم باستخدام مكون إضافي

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

يمكن لـ Jetpack Boost تحسين أداء تحميل موقعك بسرعة. بعد عملية إعداد بسيطة ، يمكنك استخدام هذا المكون الإضافي لإنشاء CSS مهم وتأجيل JavaScript غير الأساسي والمزيد.

لبدء استخدام Jetpack Boost ، قم بتثبيته وتنشيطه في WordPress. بعد ذلك ، ستحصل على نتيجة بناءً على الأداء الحالي لموقعك على الويب.

باستخدام المكون الإضافي المجاني ، سترى خيارًا لتحسين تحميل CSS . بدلاً من ذلك ، يمكنك الترقية إلى اشتراك مدفوع لإنشاء CSS مهم تلقائيًا. سيساعد هذا في تجنب الاضطرار إلى إعادة إنشاء CSS في كل مرة تقوم فيها بإجراء تغيير.

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

الطريقة الثانية: إنشاء CSS الهامة يدويًا

إذا كنت لا ترغب في استخدام مكون إضافي ، فيمكنك أيضًا إنشاء CSS هام يدويًا. من المهم أن تتذكر أن هذه الطريقة تتضمن تحرير كود موقعك ، لذلك يمكن أن تكون عملية أكثر تعقيدًا بالنسبة للمبتدئين.

الخطوة 1: قم بعمل نسخة احتياطية من موقع الويب الخاص بك

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

إذا كنت بحاجة إلى إدارة النسخ الاحتياطية بسهولة ، فيمكنك تثبيت المكون الإضافي Jetpack VaultPress Backup. تخزن هذه الأداة النسخ الاحتياطية خارج الموقع وتوفر عمليات الاستعادة بنقرة واحدة ، حتى إذا كان موقعك معطلاً تمامًا.

إليك كيفية البدء:

انتقل إلى الإضافات ← إضافة جديد في لوحة معلومات WordPress الخاصة بك. ابحث عن "Jetpack VaultPress Backup" وانقر فوق تثبيت الآن ← تنشيط .

بعد ذلك ، سترى نافذة جديدة تسمح لك بإعداد المكون الإضافي. انقر فوق إعداد Jetpack .

بعد ذلك ، قم بتوصيل موقعك بحسابك على WordPress.com. بمجرد إعادة توجيهك مرة أخرى إلى موقعك ، انقر فوق ترقية الآن لعرض العديد من الخيارات لخطط Jetpack VaultPress Backup.

كحد أدنى ، ستحتاج إلى خطة النسخ الاحتياطي ، لكن Security and Complete يوفران أدوات إضافية لحماية موقعك وتنميته وتسريعه.

ستبدأ النسخة الاحتياطية الأولى تلقائيًا ، ويمكنك التحقق من تقدمها بالانتقال إلى Jetpack → Backup في لوحة معلومات WordPress الخاصة بك.

في حالة حدوث أي أخطاء أثناء الخطوات القليلة التالية ، ما عليك سوى الرجوع إلى هذه الصفحة والضغط على استعادة إلى هذه النقطة . سيؤدي هذا إلى إعادة موقعك إلى الإصدار الأقدم ، مما يؤدي إلى التخلص من أي أخطاء حدثت.

الخطوة 2: استخدم منشئ CSS بالغ الأهمية

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

أولاً ، افتح برنامج CoreWebVitals Critical CSS Generator. أدخل عنوان URL لموقع الويب الخاص بك أو صفحة معينة تريد تحسينها. ثم اضغط على إنشاء CSS الحرجة .

بمجرد الانتهاء من التحميل ، سترى رمز CSS الذي تم إنشاؤه في مربع النص. نسخ هذا الرمز.

بعد حفظ هذا الرمز ، يمكنك تضمينه في موقع الويب الخاص بك!

الخطوة 3: مضمنة CSS الحرجة

عندما يزور شخص ما موقع الويب الخاص بك ، سيقوم متصفحه باسترداد ملفات موقعك من الخادم. سيتحقق أولاً من قسم <head> للمحتوى الضروري أثناء عملية التحليل. بعد ذلك ، سيستمر عرض محتوى <body>.

لتحديد أولويات CSS المهمة ، ضعه في قسم <head> لملفاتك. هذا يسمى التضمين. عند تضمين CSS ، يطلب المستعرض استرداد ورقة الأنماط هذه قبل عرض بقية الصفحة.

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

بمجرد نسخ CSS المهم الذي تم إنشاؤه ، يمكنك تضمينه في ملفاتك. انتقل إلى مجلد public_html الخاص بك عبر FTP. بعد ذلك ، انتقل إلى wp-content → theme → الموضوع النشط الخاص بك وافتح ملف header.php .

في ملف الرأس هذا ، حدد موقع علامة <title>. تحته ، أضف CSS الهام باستخدام علامات <style>. أخيرًا ، حدد تحديث الملف .

الأسئلة المتداولة (FAQs)

حتى الآن ، ناقشنا CSS الهامة وكيفية إنشائها. إذا كان لا يزال لديك أسئلة حول تضمين CSS على موقع الويب الخاص بك ، فسنجيب عليها هنا!

هل يمكن أن يؤدي إنشاء CSS مهم إلى تعطيل مظهر موقعك؟

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

بالإضافة إلى ذلك ، يمكنك استخدام مكون إضافي مثل Jetpack Boost لتشغيل CSS وإيقاف تشغيله عند الضرورة. تم إنشاء هذه الإعدادات البسيطة وفقًا لأفضل ممارسات WordPress ، لذا فمن غير المرجح أن تؤثر على موقعك على الواجهة الأمامية.

ما الذي يمكنني فعله أيضًا لتحسين كود CSS الخاص بي؟

إذا كنت ترغب في زيادة تحسين CSS على موقعك ، ففكر في تصغيره. ستقوم بإزالة التعليمات البرمجية غير الضرورية أثناء تصغير CSS لتقليل أحجام ملفات CSS.

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

يمكنك أيضًا إزالة CSS غير المستخدمة تمامًا. عن طريق تقليل ملفاتك إلى الرمز الضروري فقط ، سيبدأ موقع الويب الخاص بك في التحميل بشكل أسرع.

ما الذي يمكنني فعله أيضًا لتحسين سرعة صفحتي؟

من أفضل الطرق لتسريع موقعك هي تحسين "أساسيات الويب الأساسية". باستخدام أداة مثل PageSpeed ​​Insights ، يمكنك تحديد العناصر غير المحسَّنة مثل موارد حظر العرض.

نظرًا لأن المتصفحات تقوم بتحميل رمز موقعك من أعلى إلى أسفل ، يمكن بسهولة مقاطعة عملية التحميل بواسطة JavaScript. من خلال تأجيل تحليل JavaScript ، لن يضطر الزوار إلى انتظار تحميل البرامج النصية قبل أن يروا المحتوى الخاص بك.

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

أخيرًا ، يمكن لشبكة توصيل المحتوى (CDN) تسريع موقع الويب الخاص بك بشكل كبير. بدلاً من الاعتماد على خادم واحد ، تستخدم شبكة CDN نظامًا من مراكز البيانات في جميع أنحاء العالم. يمكن لخيار مثل CDN الخاص بـ Jetpack تحسين تسليم المحتوى للصور والملفات الثابتة.

تحسين تسليم CSS في WordPress

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

للمراجعة ، إليك كيفية إنشاء CSS مهم في WordPress:

1. قم بإنشاء CSS مهم باستخدام مكون إضافي مثل Jetpack Boost.
2. استخدم منشئ CSS الحرج.

باستخدام Jetpack Boost ، يمكنك تحسين CSS دون تحرير أي تعليمات برمجية. بعد تنزيل البرنامج المساعد وتنشيطه ، ستتمكن من إنشاء CSS مهم بنقرة واحدة فقط!