هل ترغب في تحسين تسليم ووردبريس CSS الخاص بك؟
تتحكم ملفات CSS في التنسيق المرئي وأسلوب موقع ووردبريس الخاص بك. ولكن إذا لم يتم تسليم كود CSS الخاص بك بالطريقة المثلى ، فقد يؤدي ذلك إلى إبطاء موقع الويب الخاص بك.
في هذه المقالة ، سنعرض لك طريقتين سهلتين لتحسين تسليم ووردبريس CSS الخاص بك.
كيفية تحسين تسليم CSS بسهولة في ووردبريس
تُستخدم ملفات CSS لتحديد المظهر المرئي لموقع ووردبريس الخاص بك. يحتوي قالب ووردبريس الخاص بك على ملف ورقة أنماط CSS ، وقد تستخدم بعض الإضافات أيضًا أوراق أنماط CSS.
تعد CSS ضرورية لمواقع الويب الحديثة ، ولكن من الممكن أن تعمل ملفات CSS على إبطاء سرعة موقعك وأدائه اعتمادًا على كيفية إعدادها.
حتى التأخير البسيط في سرعة الموقع يخلق تجربة سيئة للمستخدم وقد يؤثر على تصنيفات البحث والتحويلات ، مما يؤدي إلى تقليل عدد الزيارات والمبيعات.
دراسة StrangeLoop
إحدى الطرق التي يمكن أن تؤدي بها ملفات CSS إلى إبطاء موقع الويب الخاص بك هي إذا كانت بحاجة إلى التحميل قبل عرض الصفحة. هذا يعني أن زوارك سيرون صفحة فارغة حتى يتم تحميل ملف CSS. يُعرف هذا باسم CSS لحظر العرض .
هناك سبب شائع آخر يمكن أن يؤدي إلى إبطاء ملفات CSS من موقع الويب الخاص بك عندما تحتوي على كود أكثر مما هو مطلوب لعرض الجزء المرئي من الصفحة الحالية. يعني هذا الرمز الإضافي أنها ستستغرق وقتًا أطول للتحميل.
الخبر السار هو أنه يمكنك تحسين أداء موقع ووردبريس الخاص بك عن طريق تحسين طريقة تسليم كود CSS.
يتم ذلك عن طريق تحديد الحد الأدنى من كود CSS المطلوب لعرض الجزء الأول من صفحة الويب الحالية. يُعرف هذا باسم CSS الحرج .
يتم بعد ذلك إضافة هذه التعليمات البرمجية المهمة إلى HTML للصفحة ، بدلاً من أوراق أنماط منفصلة ، بحيث يمكن تقديم التعليمات البرمجية دون الحاجة إلى تحميل ملف CSS أولاً.
يمكن بعد ذلك تحميل بقية CSS بعد أن يتمكن الزوار من رؤية محتويات الصفحة. يُعرف هذا باسم “التحميل المؤجل”.
في هذا البرنامج التعليمي ، سنعرض لك طريقتين لتحسين تسليم ووردبريس CSS ، ويمكنك اختيار الطريقة التي تناسبك بشكل أفضل.
الطريقة الأولى: تحسين تسليم ووردبريس CSS باستخدام WP Rocket
الطريقة الثانية: تحسين تسليم ووردبريس CSS باستخدام التحسين التلقائي
WP Rocket هو أفضل مكون إضافي للتخزين المؤقت في ووردبريس في السوق. إنه يوفر أبسط طريقة لتحسين تسليم ووردبريس CSS الخاص بك. في الواقع ، الأمر سهل مثل تحديد المربع.
يعد WP Rocket مكونًا إضافيًا متميزًا ، ولكن أفضل جزء هو أن جميع الميزات مضمنة في أدنى خطة لها.
أول شيء عليك القيام به هو تثبيت وتفعيل المكون الإضافي WP Rocket . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون ووردبريس الإضافي .
بمجرد التفعيل ، ستحتاج إلى الانتقال إلى صفحة الإعدادات »WP Rocket والانتقال إلى علامة التبويب” تحسين الملفات “.
قم بالتبديل إلى علامة التبويب File Optimization
بعد ذلك ، تحتاج إلى التمرير لأسفل إلى قسم ملفات CSS. بمجرد الوصول إلى هناك ، تحتاج إلى تحديد المربع بجوار خيار “تحسين تسليم CSS”.
تحقق من تحسين تسليم CSS
ستحدد هذه الميزة بذكاء CSS الضروري لتنسيق جزء صفحة الويب الذي يراه زوارك أولاً. سيتم تحميل صفحاتك بسرعة أكبر ، وسيتم تحميل بقية CSS بعد أن يتمكن الزوار من رؤية محتوياتها.
كل ما عليك فعله الآن هو النقر فوق الزر Save Changes وانتظر WP Rocket لإنشاء ملف CSS الضروري لجميع منشوراتك وصفحاتك.
سيؤدي أيضًا إلى مسح ذاكرة التخزين المؤقت لموقع الويب الخاص بك تلقائيًا ، بحيث يرى زوار موقعك الإصدار الجديد المحسّن من موقعك بدلاً من أي إصدارات غير محسّنة مخزنة في ذاكرة التخزين المؤقت.
هناك الكثير من الطرق الأخرى التي يمكن أن يساعدك بها WP Rocket في تحسين أداء موقع الويب الخاص بك. لمعرفة المزيد ، راجع دليلنا حول كيفية تثبيت WP Rocket وإعداده بشكل صحيح في ووردبريس .
Autoptimize هو مكون إضافي مجاني مصمم لتحسين تسليم ملفات CSS و JS لموقع الويب الخاص بك .
بينما يعد Autoptimize مكونًا إضافيًا مجانيًا ، إلا أنه لا يحتوي على العديد من الميزات مثل WP Rocket ويستغرق وقتًا أطول في الإعداد.
على سبيل المثال ، لا يمكنه التعرف تلقائيًا على CSS الهامة مثل WP Rocket can. بدلاً من ذلك ، يتطلب Autoptimize مساعدة خدمة متميزة من جهة خارجية وهي تكلفة إضافية وتتطلب وقتًا إضافيًا لتكوينها.
ومع ذلك ، قد يكون خيارًا جيدًا إذا كنت تستخدم ميزانية محدودة ولا تحتاج إلى جميع الميزات الأخرى لـ WP Rocket لتسريع موقعك.
أول شيء عليك القيام به هو تثبيت وتفعيل المكون الإضافي Autoptimize . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون ووردبريس الإضافي .
عند التنشيط ، تحتاج إلى زيارة الإعدادات » صفحة التحسين التلقائي لتكوين إعدادات البرنامج المساعد. بمجرد الوصول إلى هناك ، تحتاج إلى التمرير لأسفل إلى قسم خيارات CSS والتحقق من مربع تحسين كود CSS في الأعلى.
قم بالتمرير لأسفل إلى خيارات CSS
بمجرد القيام بذلك ، تحتاج إلى التأكد من إلغاء تحديد خيار “تجميع ملفات CSS” ثم تحديد “القضاء على CSS الذي يحظر العرض”.
يمكنك الآن النقر فوق الزر “حفظ التغييرات وإفراغ ذاكرة التخزين المؤقت” لتخزين إعداداتك.
لكن لن يعمل المكون الإضافي بشكل صحيح حتى تقوم بالتسجيل للحصول على حساب CSS هام. هذه خدمة اشتراك متميزة ستوفر Autoptimize لكود CSS الهام الذي تحتاجه لتحسين تسليم ووردبريس CSS الخاص بك.
للقيام بذلك ، انتقل إلى علامة التبويب Critical CSS في إعدادات Autoptimize. ستجد هنا المعلومات التي تحتاجها للتسجيل في Critical CSS. يمكنك البدء بالنقر فوق ارتباط التسجيل في الفقرة الثالثة.
قم بالتسجيل للحصول على حساب CSS هام
بمجرد استلام مفتاح CSS API الخاص بك ، قم بالتمرير لأسفل إلى قسم API Key حتى تتمكن من لصقه في مربع النص “Your API key”. بعد ذلك ، تأكد من النقر فوق الزر حفظ التغييرات.
الصق مفتاح CSS API الحرج
تحتوي ميزة “التحسين التلقائي” الآن على جميع المعلومات التي تحتاجها لإضافة CSS المضمن وتأجيل تحميل أوراق الأنماط حتى بعد عرض الصفحة. نتيجة لذلك ، سيتم تحميل موقع الويب الخاص بك بسرعة أكبر.
نأمل أن يساعدك هذا البرنامج التعليمي في تعلم كيفية تحسين تسليم ووردبريس CSS.
قد ترغب أيضًا في الاطلاع على دليلنا النهائي حول تكلفة إنشاء موقع ويب ووردبريس ، ومقارنتنا لأفضل شركات استضافة ووردبريس المُدارة .
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
