أثناء إجراء اختبار سرعة الموقع، ربما لاحظت PageSpeed Insights بشأن حذف أكواد CSS غير المستخدمة. هل ترغب في حذف أكواد CSS غير المستخدمة من موقع ووردبريس الخاص بك لتحسين سرعة تحميله ورفع مستوى أدائه؟
تُضيف قوالب وإضافات ووردبريس الكثير من أكواد CSS غير الضرورية. يُمكن تحسين أداء ووردبريس وتجربة المستخدم بإزالة هذه الأكواد. سنشرح في هذه المقالة كيفية إزالة أكواد CSS غير المستخدمة من موقع ووردبريس الخاص بك بسهولة دون التأثير على أدائه.
إزالة أكواد CSS غير المستخدمة في ووردبريس باستخدام طرق مختلفة
إذا كنت ترغب في تقليل كمية CSS غير المستخدمة على موقع WordPress الخاص بك، فهناك بعض الطرق المختلفة التي يمكنك تجربتها.
مع أنه من الممكن إزالة جميع أكواد CSS غير الضرورية في ووردبريس، إلا أن ذلك سيكون مهمة صعبة للغاية. إضافةً إلى ذلك، ونظرًا لطريقة عمل ووردبريس في الخلفية، قد يجد بعض المستخدمين صعوبة في العثور على أكواد CSS غير الضرورية وإزالتها.
في هذه الحالة، سنعرض لك طرقًا مختلفة لإزالة CSS غير المستخدم، ويمكنك اختيار أفضل طريقة تناسب احتياجاتك.
اعثر على أكبر ملفات CSS لديك
لعرض ملفات CSS الأكثر شمولاً، رتّب تقرير التغطية حسب " عرض الاستخدام" في أدوات مطوري Chrome . تتضمن عناوين URL عادةً اسم الإضافة أو القالب أو كود الطرف الثالث الذي أنشأ الملف. وبذلك، سيصبح من الأسهل عليك تحديد ما يحتاج إلى تحسين.
قم بإزالة CSS غير المستخدم مع وضع CSS المستخدم في ملف منفصل
يُعد إنشاء ملف منفصل أسرع، إذ لا يزيد حجم ملف HTML، ويمكن تخزينه مؤقتًا، على عكس تضمينه مباشرةً في الصفحة. كما يتم تحميله في ملف منفصل بواسطة CSS الخاص بـ LiteSpeed Cache و FlyingPress. إضافةً إلى ذلك، WP Rocket على تحسين الأداء بناءً على نقاط التقييم وليس عدد الزوار، على عكس معظم الإضافات الأخرى التي تستخدم ملفات منفصلة لأنها أسرع.
تجنب الإضافات التي تضيف CSS
أدوات مثل Query Monitor وWP Hive مفيدة، لكنها لا تُظهر دائمًا ما إذا كان أحد الإضافات يُضيف أكواد CSS/JS إضافية إلى واجهة الموقع. ونتيجةً لذلك، لا يُمكن ملاحظة التأثير الكامل للإضافة إلا بعد إعادة اختبار موقعك الإلكتروني بعد إضافة محتوى إلى واجهة الموقع. ومن أكثر الإضافات شيوعًا التي تُسبب هذه المشكلة: معارض الصور، وشرائح العرض، ونماذج الاتصال، والتعليقات، والدردشة، والتقاويم، وإضافات تصميم الصفحات.
استخدم قالبًا خفيفًا + أداة إنشاء صفحات.
الواجهة الأمامية مُثقلة بملفات CSS وJavaScript والخطوط. ونتيجةً لذلك، يُصبح الموقع بطيئًا حتمًا عند استخدام إضافات بناء الصفحات مثل Elementor Pro وUltimate Addons.
تفعيل تحسينات CSS في أدوات إنشاء الصفحات
من بين هذه الإعدادات، توجد تجارب Elementor وإعدادات أداء Divi، والتي تتضمن خيارات متعددة لتقليل حجم ملفات CSS (مثل تحسين تحميل الأصول وملفات CSS في Elementor، واستخدام CSS الديناميكي في Divi). عمومًا، ستحصل على نتائج أفضل عند تفعيل المزيد من خيارات الأداء.
قم بتعطيل الأيقونات إذا كنت لا تستخدمها
إذا كنت لا تستخدم أيقونات Elementor، فقم بإيقاف تشغيلها. بالنسبة لخطوط Google وFont Awesome، يمكنك القيام بذلك من خلال Perfmatters أو وثائق Elementor.
إزالة CSS في إضافات إلغاء تحميل الأصول
باستخدام Perfmatters ، يمكنك تعطيل ملفات CSS/JS (أو إضافات كاملة) عند عدم الحاجة إليها، وإزالة ملفات CSS غير المستخدمة، واستبدال إطارات YouTube بصور معاينة. ويمكن تسهيل الوصول إلى ملفات CSS المتبقية غير المستخدمة من خلال كل هذه الطرق. كما يمكن تعطيل ملفات CSS/JS باستخدام إضافة Asset CleanUp.
تم العثور على صور الخلفية التي يتم تحميلها عند الحاجة في CSS
معظم إضافات التخزين المؤقت لا تقوم بتحميل صور الخلفية بشكل كسول إذا كانت معبأة في ملف CSS منفصل.
لذا، إذا كنت ترغب في تحميل صور الخلفية بشكل تدريجي، يُرجى الرجوع إلى وثائق إضافة التخزين المؤقت لديك. يأتي FlyingPress مزودًا بفئة مساعدة lazy-bg يمكنك إضافتها إلى فئة CSS الإضافية، على عكس WP Rocket الذي يتطلب تضمين HTML مباشرةً. يمكن إضافة فئة lazy-bg المساعدة يدويًا، أو يمكنك استخدام حل Optimole الذي يعتمد على مُحدِّدات CSS.
إزالة CSS الخاص بـ Gutenberg
لنفترض أنه يمكنك إلغاء تحميل مكتبة كتل غوتنبرغ إذا كنت لا تستخدم كتل غوتنبرغ. استخدم مقتطفات التعليمات البرمجية أو ملف functions.php لإضافة ذلك.
دمج CSS (أو عدم دمجه)
يجب ألا يتجاوز حجم ملفات CSS/JS مجتمعةً 10 كيلوبايت. في معظم الحالات، يُنصح بعدم دمج CSS وJavaScript معًا، إذ يكاد يكون ذلك مستحيلاً.
تعطيل أنماط ووكومرس
بشكل افتراضي، يقوم ووكومرس بتحميل أنماط التنسيق في جميع أنحاء موقعك الإلكتروني. إذا كنت تستخدم هذه الأنماط فقط في صفحات التجارة الإلكترونية، يمكنك تعطيلها في كل مكان. يتوفر لدى ووكومرس توثيق، ولكننا نوصي باستخدام إضافة "تعطيل تضخم ووكومرس" التي تحتوي على العديد من الإعدادات الإضافية لإزالة الملفات غير الضرورية.
يمكنكم الاطلاع على المزيد من هذه المقالات على موقع Seahawk Media .
