كيفية إزالة CSS غير المستخدمة في ووردبريس (الحدّ من محتوى CSS غير المُستخدَم)

هل تريد إزالة CSS غير المستخدمة في ووردبريس للحصول على نتائج أفضل في PageSpeed Insights؟

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

يمكن أن يؤثر CSS و JavaScript الثقيلان على عناصر متعددة في Google PageSpeed Insights. يمكن أن يؤدي تقليل أحجام الملفات إلى تحسين نتائج “إزالة خدمة CSS غير المُستخدَمة” بالإضافة إلى العناصر الأخرى في PageSpeed Insights. تركز مؤشرات أداء الويب الأساسية من جوجل بشدة على تحسين كل من CSS وجافا سكريبت.

لماذا يجب عليك إزالة CSS غير المستخدمة؟

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

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

إزالة ملفات CSS غير المستخدمة في ووردبريس

1. إزالة CSS غير المستخدمة في Asset CleanUp أو Perfmatters

تعد Asset CleanUp و Perfmatters من الإضافات الشائعة لإزالة CSS في ووردبريس.

اختر إضافة لإزالة CSS غير المستخدمة

يعد Asset CleanUp مجانيًا بينما Perfmatters مدفوعة، لكن واجهة المستخدم/UX أفضل. يحتوي Asset CleanUp على إصدار احترافي يتيح لك إلغاء تحميل ملفات CSS المخصصة (الخطوة 12) بينما الإصدار المجاني و Perfmatters لا يفعلون ذلك. أنا شخصياً أستخدم Perfmatters.

تنشيط مدير البرنامج النصي (Script Manager)

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

قم بإزالة ملفات CSS حيث لا تحتاج إلى التحميل

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

أمثلة:

• تعطيل إضافة نموذج الاتصال في الصفحات التي لا تحتوي على نموذج اتصال.
• تعطيل إضافة روابط الأفلييت على الصفحات التي لا تستخدم التسويق بالعمولة.
• تعطيل إضافة المشاركة الاجتماعية في جميع الصفحات (لأنه عادةً ما يكون لمشاركات المدونة فقط).
• تعطيل المزايا غير المستخدمة في مُنشئ الصفحة الخاص بك (انظر هذا المقال لكيفية تسريع Elementor).

2. إنشاء Critical CSS

إذا كنت تستخدم WP Rocket أو إضافة كاش أخرى، فمن المحتمل أنك رأيت خيارًا لتحسين تحميل ملفات CSS (أو ما شابه).

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

في بعض الأحيان، يؤدي تمكين تسليم CSS إلى FOUT (وميض نص غير منظم) ويساهم في إزاحة متغيرات التصميم التراكمية (CLS). إذا حدث هذا لك، فستحتاج إلى تجربة الحلول التالية:

• تفعيل تحسين تحميل ملفات CSS.
• قم بمسح موقع الويب الخاص بك باستخدام PurifyCSS.
• قم بتنزيل CSS المجمعة والمنقّاة والمصغّرة.
• الصق الكود في اضافة الكاش (Fallback critical CSS).
• استبعاد الملفات من تحسين تحميل CSS باستخدام الإضافة المساعدة ل WP Rocket.
• إذا لم ينجح ذلك، فإن إضافة FlyingPress من Gijo Varghese لديها مراجعات رائعة.

3. استخدم أدوات إزالة CSS

هناك الكثير من الأدوات المجانية عبر الإنترنت لإزالة CSS غير المستخدمة.

PurifyCSS – أداة إزالة CSS مجانية. أضف موقع الويب الخاص بك، انقر فوق “تنظيف CSS” مع تشغيل Minify output. بمجرد اكتمال الفحص، قم بتنزيل ملف CSS المدمج والمنقى والمصغر.

Unused-CSS – أداة إزالة CSS بمزايا مجانية ومدفوعة. يمكنك تشغيل صفحة من خلال الأداة وتخبرك أنه سيتم إزالة الكثير من CSS (والنسبة المئوية لخدمة CSS المستخدمة). ستحتاج إلى منحهم بريدك الإلكتروني والاشتراك في خطة مدفوعة إذا كنت ترغب في تنزيل CSS لموقعك بالكامل.

UnCSS – أداة إزالة CSS أكثر تعقيد تتطلب منك نسخ/لصق HTML و CSS في أداتهم وتنزيلها. يقول KeyCDN إنه أكثر دقة من PurgeCSS لأنه ينظر إلى صفحات الويب الفعلية بدلاً من الملفات الفردية ولكنه أيضًا أبطأ ويتطلب مزيدًا من الإعداد اليدوي.

4. إزالة CSS غير المستخدمة في WP Rocket

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

ولكن، من WP Rocket 3.9 يمكنك إزالة CSS غير المستخدمة مباشرة بشكل آلي. فقط توجه إلى لوحة تحكم WP Rocket و تحسين الملفات:

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

سيقوم WP Rocket بجمع كل أوراق الأنماط والنصوص الموجودة على الصفحة وإرسالها إلى أداة خارجية لمعالجتها. في وقت لاحق، ستقارن HTML للصفحة مع البيانات المحددة لمطابقة ملفات CSS المستخدمة بالفعل في الصفحة.

عند اكتمال العملية، سترى رسالة تأكيد:

في هذه المرحلة، يمكنك تشغيل اختبار PageSpeed لمعرفة فوائد هذه الميزة.

5. تضمين ملفات CSS الحرجة داخلياً وتأجيل CSS غير الحرجة

غالبًا ما يقوم Autoptimize و Async JavaScript بعمل أفضل في تحسين CSS و JavaScript من المكونات الإضافية لذاكرة التخزين المؤقت، بما في ذلك WP Rocket.

يتيح لك WP Rocket تصغير/دمج CSS وتحسين تحميل ملفات CSS (لإنشاء critical CSS وتضمينها). ومع ذلك، يمكن أن تحقق Autoptimize نتائج أفضل من WP Rocket.

قم بتثبيت Autoptimize ثم قم بتمكين الإعدادات لتحسين ملفات CSS و JavaScript. بعد ذلك، قم بتثبيت Async JavaScript وانقر فوق “تطبيق التأجيل” في الإعدادات. إذا قمت بإعادة اختبار موقعك، فقد ترى نتائج محسنة ليس فقط لإزالة CSS غير المستخدمة، ولكن أيضًا مشكلات حظر العرض.

6. تصغير ودمج CSS

يجب دائمًا تمكين تصغير ملفات CSS أو (Minify CSS) وإزالة الأحرف غير الضرورية من ملفات CSS مما يجعلها أصغر.

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

إذا كنت تستخدم Autoptimize لتحسين ملفات CSS (يُطلق عليه “optimize CSS” في الإعدادات)، فيجب تعطيل هذا في اضافة الكاش. يقوم WP Rocket بذلك تلقائيًا عند تمكينه في Autoptimize.

7. تمرير ملفات CSS من CDN

إذا كنت تستخدم CDN، فتأكد من عرض ملفات CSS (والأصول الأخرى) من CDN. يمكن تمكين هذا في Perfmatters أو WP Rocket أو WP CDN Rewrite.

بدون CDN:
https://example.com/style.css

مع CDN:
http://cdn.example.com/style.css

8. قم بتعطيل أنماط WooCommerce على صفحات غير التجارة الإلكترونية

بشكل افتراضي، يقوم WooCommerce بتحميل الأنماط عبر موقع الويب بالكامل.

إذا كنت تستخدم هذه الأنماط فقط في صفحات التجارة الإلكترونية، فيمكنك تعطيلها في أي مكان آخر. لدى WooCommerce وثائق حول ذلك، أو استخدم Perfmatters أو Disable WooCommerce Bloat.

9. تجنب أدوات إنشاء الصفحات الثقيلة

يضيف منشئو الصفحات الثقيلة (على وجه التحديد Elementor و Divi) الكثير من ملفات CSS الإضافية إلى موقعك.

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

فقط لإعطائك فكرة عن كل شيء محمّل مع Elementor:

10. تجنب المكونات الإضافية التي تحقن CSS

تقوم بعض المكونات الإضافية (النماذج والسلايدر وغيرها) بحقن CSS الذي يتم تحميله عبر موقعك بالكامل.

راجع قائمة الإضافات البطيئة هذه لتجنبها أو استخدم أدوات مثل Query Monitor للعثور على أبطأ المكونات الإضافية في التحميل. يتيح لك ملحق WP Hive Chrome تصفح متجر ووردبريس أثناء عرض ما إذا كان المكون الإضافي يتسبب في استخدام ذاكرة عالية أو له تأثير كبير على PageSpeed Insights. قم بتثبيت الامتداد ويضيف قسمًا إلى يمين معلومات المكون الإضافي.

11. إزالة CSS غير المستخدمة مع RapidLoad

RapidLoad هو مكون إضافي متميز تم تطويره بواسطة فريق Autoptimize.

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

قم بتنزيل الإضافة، وشراء اشتراك، وسيقوم المكون الإضافي بالباقي. سيقوم تلقائيًا بمعالجة كل عنوان URL.

12. تعطيل CSS المخصص بإستخدام Asset CleanUp Pro

إذا كنت بحاجة إلى إزالة CSS المشفر بشكل ثابت (non-enqueued)، فإن Asset CleanUp Pro يتيح لك القيام بذلك بينما لا يقوم الإصدار المجاني من Asset CleanUp (و Perfmatters) بذلك.

يتيح لك Asset CleanUp Pro أيضًا تغيير موقع CSS إلى HEAD/BODY بالإضافة إلى حذف ملفات CSS على صفحات أخرى مثل التصنيفات، والمؤلف، والبحث، والبحث في WooCommerce، و 404، وأرشيف التاريخ.

أعد اختبار موقعك على CSS غير المستخدمة

قم بتشغيل موقع ووردبريس الخاص بك من خلال PageSpeed Insights أو Lighthouse وتحقق من الحدّ من محتوى CSS غير المُستخدَم. نأمل أن يساعدك هذا الدليل في تحسينه بما يكفي لاجتياز التدقيق أخيرًا.

أسئلة يتكرر طرحها

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

شاهد أيضاً: كيف حصلت على درجة 100% في Google PageSpeed Insights