إذا كان موقع WordPress الخاص بك يستخدم سمة WordPress مدفوعة أو سمة شائعة من مستودع WordPress Themes الرسمي ، فمن المحتمل أن يتم تطوير السمة لمجموعة متنوعة من حالات الاستخدام. وقد تستخدم مجموعة صغيرة فقط من جميع الميزات المتوفرة في السمة.
في هذه الحالة ، يقوم موقعك بتحميل عدد كبير من CSS غير المستخدمة غير المطلوبة لتصميم صفحات موقعك. على سبيل المثال ، قد يكون لموضوع WordPress الذي تستخدمه أنماط لصفحات WooCommerce أيضًا ، ولكن إذا كنت تقوم بتشغيل مدونة فقط على موقع WordPress الخاص بك ، فأنت لا تستخدم CSS المضمن لصفحات WooCommerce على موقعك وبالتالي تقدم خدمة غير مستخدمة CSS للمستخدمين.
إذا كنت قد اختبرت موقع الويب الخاص بك على أداة Google Pagespeed ، فربما تكون على دراية بالفعل بأن موقعك به مشكلات CSS غير مستخدمة. في هذا الدليل ، سنوضح لك كيفية التحقق من CSS غير المستخدمة أولاً ، ثم استخدام أداة مجانية لإزالة CSS غير المستخدمة من موقع WordPress الخاص بك.
كيفية التحقق من CSS غير المستخدمة
يحتوي Google Chrome DevTools (الذي تراه عند النقر فوق خيار "فحص" في قائمة السياق) على ميزة التغطية داخل علامة التبويب "المصادر". يمكنك استخدام خيار Coverage للعثور على CSS و JS غير المستخدمة التي يقوم موقع الويب الخاص بك بتحميلها.
- افتح موقع الويب الخاص بك في Chrome على سطح المكتب.
- انقر بزر الماوس الأيمن فوق مساحة بيضاء فارغة على موقعك ، وحدد فحص من قائمة السياق.
- اضغط على مصادر علامة التبويب ، اضغط السيطرة + Shift + P. لفتح نافذة أوامر ، ثم اكتب تغطية واختر بدء تغطية الأجهزة وإعادة تحميل الصفحة من الأوامر المتاحة.
- ضمن علامة التبويب التغطية ، انقر فوق مرشح URL وأدخل نطاق جذر موقعك هنا لعرض ملفات CSS / JS الداخلية فقط.
└ تحقق من ملف بايت غير مستخدمة لمعرفة النسبة المئوية للبيانات التي يتم تحميلها في ملف CSS / JS من قالبك.
- انقر فوق ملف CSS لعرض CSS غير المستخدمة (المميزة بأشرطة حمراء) التي تم تحميلها بواسطة موقعك. سيظهر CSS المستخدم في الصفحة الحالية بأشرطة خضراء.
بمجرد تحليل جميع CSS غير المستخدمة التي يتم تحميلها على موقع الويب الخاص بك ، فقد حان الوقت لإزالتها. هناك العديد من الأدوات المجانية المتاحة لإزالة CSS غير المستخدمة من صفحات الويب. يوجد أدناه أحد الأدوات الشائعة التي اختبرتها واستخدمتها في مشاريعي الخاصة.
استخدم PurifyCSS عبر الإنترنت لإزالة CSS غير المستخدمة
عادة ، يمكنك العثور على مكون إضافي لكل شيء تقريبًا في WordPress. ولكن لإزالة CSS غير المستخدمة ، للأسف ، لا يتوفر مكون إضافي واحد. لذلك سنستخدم أدوات يدوية غير خاصة بـ Wordpress لإزالة CSS غير المستخدمة من موقعك.
PurifyCSS هو الأكثر أداة ودية غير مطور يمكنك العثور على التعامل مع CSS غير المستخدمة. تحتوي الأداة على واجهة مستخدم بسيطة للسماح للمستخدمين بتقديم إما عنوان URL لموقع الويب أو كود HTML و CSS. بالنسبة إلى WordPress ، سنستخدم خيار عنوان URL ونوفر روابط لجميع أنواع الصفحات على موقعك للسماح للأداة بالاستيلاء على CSS من الكل وتحسين CSS غير المستخدمة.
فيما يلي قائمة سريعة بالصفحات التي يجب أن تضعها في الأداة:
- رابط الصفحة الرئيسية
- عناوين URL متعددة لصفحات النشر من كل فئة على موقعك
└ هذا لضمان تضمين CSS لجميع عناصر النشر.
- الاتصال ، حول ، الخصوصية وجميع أنواع الصفحات المختلفة التي قد تكون لديك على موقعك.
- صفحة الأرشيف ، صفحة البحث ، صفحات المؤلف
- صفحات نوع المنشور المخصص
نقطة مهمة: قم بإنشاء منشور / صفحة "ميزات" مع جميع عناصر السمة التي تستخدمها أو قد تستخدمها في المستقبل مثل الجدول ، ومعرض الصور ، والرمز ، والقوائم المسبقة ، والقوائم غير المرتبة ، والنماذج ، وعلامات التبويب ، والأكورديونات ، وكتل Gutenberg التي تستخدمها بشكل عام ، إلخ.
استخدم عنوان URL لنشر "الميزات" في أداة PurifyCSS عبر الإنترنت للتأكد من تضمين CSS للعناصر شائعة الاستخدام.
ضرب تنظيف CSS بمجرد إضافة جميع أنواع عناوين URL ذات الصلة من موقعك إلى أداة PurifyCSS Online.
انسخ CSS الجديد الذي أنشأته الأداة واستخدمه على موقعك. تأكد أنك قم بعمل نسخة احتياطية من style.css الأصلي وملفات CSS الأخرى في قالبك قبل استبدال CSS الجديد الذي تم إنشاؤه بواسطة PurifyCSS.
نصيحة: يمكنك إما استخدام محرر قوالب WordPress المدمج لتعديل ملفات CSS الخاصة بالسمات الخاصة بك ، أو يمكنك استخدام برنامج FTP / SFTP للاتصال بالخادم وتحرير الملفات بسهولة باستخدام محرر المفكرة.