هل تريد إزالة CSS غير المستخدمة في ووردبريس حتى يتم تحميل موقعك بشكل أسرع؟
CSS غير المستخدم هو أي كود CSS مضاف بواسطة قالب ووردبريس أو المكونات الإضافية التي لا تحتاجها حقًا. تؤدي إزالة كود CSS هذا إلى تحسين أداء ووردبريس وتجربة المستخدم.
في هذه المقالة ، سنوضح لك كيفية إزالة CSS غير المستخدمة بسهولة في ووردبريس دون كسر موقع الويب الخاص بك.
إزالة CSS غير المستخدمة في ووردبريس
CSS غير المستخدمة في ووردبريس عبارة عن كود CSS يتم تحميله على موقع الويب الخاص بك ولكن ليس مطلوبًا في الواقع لعرض الصفحة.
يمكن أن تجعل الشفرة الإضافية متصفح الزائر يستغرق وقتًا أطول قليلاً لعرض الصفحة ، مما يخلق تجربة مستخدم سيئة. يمكن أن تؤثر أوقات التحميل البطيئة على تصنيفات البحث ، مما يؤدي إلى تقليل حركة المرور إلى موقعك.
يمكنك معرفة كيفية تأثير رمز CSS غير المستخدم على موقع الويب الخاص بك باستخدام Google Pagespeed Insights . سيعرض لك قسمًا بعنوان “إزالة CSS غير المستخدمة” مع تفاصيل ملفات CSS التي تؤثر على أوقات التحميل الخاصة بك.
مشكلة رمز CSS غير المستخدمة في Google Pagespeed Insights
يستخدم CSS لتصميم مظهر موقع ووردبريس الخاص بك . يتضمن قالب ووردبريس الخاص بك CSS ، مع تضمين معظمه في ملف style.css واحد.
بالإضافة إلى CSS لموضوعك ، ستقوم مكونات ووردبريس الإضافية أيضًا بتحميل CSS الخاصة بها. على سبيل المثال ، ستقوم WooCommerce بتحميل CSS لعرض المنتجات ، وسيضيف المكون الإضافي لمنشئ الصفحة CSS الخاص به لعرض صفحاتك المخصصة ، وسيتضمن المكون الإضافي لمنشئ النماذج CSS لتصميم النماذج الخاصة بك.
بعد ذلك ، لديك خطوط الويب وخطوط الرموز والعناصر الأخرى التي ستحتاج إلى إضافة ملفات CSS الخاصة بها أيضًا.
عادةً ما تكون هذه الملفات صغيرة جدًا ويتم تحميلها بسرعة. ومع ذلك ، إذا كان موقع ووردبريس الخاص بك يحتوي على الكثير منها ، فيمكن أن تضيف التأثيرات ويكون لها تأثير ملحوظ على سرعة موقعك.
هناك عدة طرق مختلفة يمكنك من خلالها تقليل CSS غير المستخدمة على موقع ووردبريس الخاص بك.
ومع ذلك ، سيكون من الصعب جدًا إزالة جميع CSS غير المستخدمة في ووردبريس تمامًا. نظرًا للطريقة التي يعمل بها ووردبريس خلف الكواليس ، قد يكون من الصعب العثور على بعض CSS غير المستخدمة وإزالتها.
ومع ذلك ، سنعرض لك طريقتين لإزالة CSS غير المستخدمة ، ويمكنك اختيار الطريقة التي تناسبك بشكل أفضل.
هذه الطريقة أسهل ويوصى بها للمبتدئين. إنه يحسن بشكل كبير التسليم العام لملفات CSS على موقع ووردبريس الخاص بك ، بما في ذلك إزالة معظم CSS غير المستخدمة.
نعتقد أنه الحل الأفضل للمبتدئين لأنه أسهل ويحقق الهدف الرئيسي المتمثل في تقديم تجربة أفضل لمستخدميك. هذا يعني أن موقع الويب الخاص بك يتم تحميله بسرعة على أدوات اختبار السرعة ويشعر أيضًا بالسرعة للمستخدمين.
أولاً ، تحتاج إلى تثبيت وتفعيل المكون الإضافي WP Rocket . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون ووردبريس الإضافي .
عند التنشيط ، ستحتاج إلى زيارة صفحة الإعدادات »WP Rocket والانتقال إلى علامة التبويب” File Optimization “.
تحسين الملف في WP Rocket
بعد ذلك ، تحتاج إلى التمرير لأسفل إلى قسم ملفات CSS ثم تحديد المربع بجوار خيار “إزالة CSS غير المستخدمة (بيتا)”.
نظرًا لأن هذه الميزة من WP Rocket في مرحلة تجريبية ، فسوف تسأل مرة أخرى عما إذا كنت تريد تمكين الإعداد. يمكنك المضي قدمًا والنقر فوق الزر “تنشيط إزالة CSS غير المستخدم”.
انقر فوق الخيار Remove Unused CSS
بمجرد تنشيط الخيار “Remove Unused CSS” ، يمكنك بعد ذلك تحديد أسماء ملفات CSS أو معرفات أو فئات لا ينبغي إزالتها ضمن مربع “قائمة CSS الآمنة”.
أضف ملفات إلى قائمة CSS الآمنة
بعد ذلك ، ستحتاج إلى حفظ التغييرات عن طريق التمرير لأسفل والنقر فوق الزر “حفظ التغييرات”. عند القيام بذلك ، سيبدأ WP Rocket في معالجة ملفات CSS الخاصة بك ويظهر لك شريط تقدم.
عرض إزالة شريط تقدم CSS غير المستخدم
سيستغرق المكون الإضافي بضع دقائق لمعالجة وإزالة ملفات CSS غير المستخدمة من موقع الويب الخاص بك.
سترى “اكتملت إزالة CSS غير المستخدمة!” رسالة عندما يكمل البرنامج المساعد العملية.
الآن ، قم بزيارة أداة Google Pagespeed Insights واختبر أداء موقعك.
قم بإزالة Render-Blocking CSS for ووردبريس
يتيح لك WP Rocket تحسين ملف CSS الخاص بك وإزالة CSS لحظر العرض من موقع الويب الخاص بك.
للبدء ، يمكنك الانتقال إلى علامة التبويب “File Optimization” في WP Rocket. من هنا ، قم بالتمرير لأسفل إلى قسم ملفات CSS ثم حدد المربع بجوار خيار “تحسين تسليم CSS”.
تحسين تسليم CSS
ينشئ هذا الخيار ملف CSS يحتوي فقط على كود CSS المطلوب لعرض الجزء المرئي من موقع الويب الخاص بك. يقوم بتحميل هذا الملف أولاً ، ويعرض الصفحة للزائرين ، ثم يقوم بتحميل ملفات CSS الأخرى باستخدام تقنية تسمى التحميل المؤجل.
من خلال إزالة CSS لحظر العرض ، يصبح موقع الويب الخاص بك قابلاً للعرض للمستخدمين بسرعة أكبر بكثير مما لو كان عليك تحميل جميع ملفات CSS قبل عرض الصفحة.
بعد تمكين خيار “تحسين تسليم CSS” ، انقر فوق الزر “حفظ التغييرات” وانتظر حتى يقوم WP Rocket بإنشاء ملف CSS الضروري لجميع منشوراتك وصفحاتك. سيؤدي أيضًا إلى مسح ذاكرة التخزين المؤقت لموقع الويب الخاص بك تلقائيًا .
بمجرد الانتهاء ، يمكنك المضي قدمًا واختبار أداء موقع الويب الخاص بك مرة أخرى باستخدام Google Pagespeed Insights.
يسمح لك WP Rocket أيضًا بإزالة سلاسل الاستعلام من الملفات الثابتة ، ودمج ملفات Google Fonts ، وتقليل HTML. تضيف كل هذه التعديلات تحسينات طفيفة على سرعتك الإجمالية ، والتي تضيف ما يصل إلى تجربة تحميل أسرع للزائرين.
تحسين الملف الأساسي
سترى أيضًا خيارات لتصغير ملفات CSS ودمجها. ستعمل هذه الخيارات على تقليل طلبات HTTP وتعطيك دفعة إضافية للسرعة.
ومع ذلك ، ستحتاج إلى التحقق بعناية من موقع الويب الخاص بك للتأكد من عدم تعطل أي شيء بعد تمكين هذه الإعدادات.
تصغير ودمج ملفات CSS
بالإضافة إلى ذلك ، يمكنك تطبيق نفس التحسين لملفات JavaScript على موقع الويب الخاص بك. يمكنك تصغيرها ودمجها لتكون بمثابة ملف واحد وتأجيل تحميل ملفات JavaScript لتحسين الأداء.
تحسين تسليم JavaScript
لمزيد من التفاصيل ، راجع البرنامج التعليمي خطوة بخطوة حول كيفية إعداد WP Rocket بشكل صحيح في ووردبريس .
هذه الطريقة متقدمة قليلاً ولكنها قوية بشكل لا يصدق وستتيح لك بسهولة إزالة أي CSS غير مستخدم من أي صفحة من موقع ووردبريس الخاص بك.
ومع ذلك ، فهو معقد بعض الشيء وستحتاج إلى اختبار وظائف موقع الويب الخاص بك ومظهره بدقة للتأكد من عدم تعطل أي شيء.
أولاً ، تحتاج إلى تثبيت وتفعيل المكون الإضافي Asset Cleanup . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون ووردبريس الإضافي .
عند التنشيط ، تحتاج إلى زيارة Asset CleanUp » صفحة الإعدادات والانتقال إلى علامة التبويب Test Mode. من هنا ، تحتاج إلى تشغيل خيار “تمكين وضع الاختبار”.
تمكين خيار وضع الاختبار
يتيح لك ذلك تجربة إعدادات مختلفة واختبارها كمسؤول دون التأثير على زوار الموقع.
بعد ذلك ، تحتاج إلى زيارة Asset CleanUp » صفحة مدير CSS / JS . من هنا ، يمكنك إلغاء تحميل ملفات CSS و JavaScript غير المرغوب فيها على أساس صفحة بصفحة.
مدير CSS / JS
ستجلب أولاً صفحتك الرئيسية وستظهر لك جميع ملفات CSS و JavaScript التي تم تحميلها على تلك الصفحة.
تحتاج إلى التمرير لأسفل ومراجعة الملفات المحملة. إذا رأيت ملفًا لست بحاجة إليه ، فيمكنك إلغاء تحميله لتلك الصفحة المحددة أو نوع المنشور أو على مستوى الموقع.
تفريغ الملفات
يسمح لك المكون الإضافي أيضًا باختيار منشورات أو صفحات معينة من هنا ، أو يمكنك الوصول إلى نفس الخيارات عن طريق تحرير المنشور أو الصفحة كما تفعل عادةً.
في شاشة تحرير المنشور ، ستجد مربع Asset CleanUp أسفل محرر المنشورات مباشرةً.
تنظيف الأصول داخل محرر النشر
سيقوم المكون الإضافي تلقائيًا بجلب وإدراج جميع الملفات والأصول التي تم تحميلها عندما يشاهد الزائر هذه الصفحة على موقع الويب الخاص بك. يمكنك بعد ذلك ببساطة إلغاء تحميل ملفات CSS أو JavaScript غير المستخدمة التي لا تحتاجها في تلك الصفحة.
تفريغ الملفات لصفحة معينة
هام: لا تنس اختبار موقع الويب الخاص بك بعد إزالة أي CSS أو JavaScript غير مستخدم للتأكد من أن كل شيء يعمل بشكل جيد.
بمجرد الانتهاء من تفريغ وإزالة ملفات CSS و JavaScript غير المستخدمة ، يمكنك الرجوع إلى صفحة إعدادات المكون الإضافي وإيقاف تشغيل “وضع الاختبار”.
لا تنس النقر فوق الزر “تحديث جميع الإعدادات” لتخزين تغييراتك.
يمكنك الآن اختبار موقع الويب الخاص بك باستخدام Google Pagespeed Insights لمعرفة التغيير في إشعار CSS غير المستخدم.
تم تقليل CSS في ووردبريس
نأمل أن تساعدك هذه المقالة في تعلم كيفية إزالة CSS غير المستخدمة بسهولة في ووردبريس. قد ترغب أيضًا في اتباع دليلنا الكامل حول تكلفة إنشاء موقع ويب ، والتحقق من قائمتنا لأفضل استضافة ووردبريس مُدارة .
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
