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

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

تعد إزالة CSS غير المستخدمة طريقة فعالة أخرى لزيادة سرعة موقع WordPress الخاص بك.

ولكن ما هو CSS غير المستخدم في WordPress؟ كيف تؤثر على تحميل موقعك؟ كيف يمكنك إزالتها؟

سنجيب على كل هذه الأسئلة في هذا المقال. دعنا أولاً نحدد كود CSS غير المستخدم في WordPress معًا!

ما هي CSS غير المستخدمة في WordPress؟

تشير CSS ، أو Cascading Style Sheets ، إلى لغة ورقة الأنماط التي تسمح لك بتحديد شكل ومظهر موقع WordPress الخاص بك ، جنبًا إلى جنب مع HTML. يأتي كل سمة WordPress مع ملف style.css يحتوي على قواعد نمط لتحديد التنسيق (التخطيط ، والخطوط ، والألوان ، وما إلى ذلك) لصفحات WordPress.

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

تأثيرات WordPress CSS غير المستخدمة

لا شك أن CSS غير المستخدمة تزيد من وقت تحميل صفحتك. لتحقيق فهم أفضل ، يستغرق المتصفح وقتًا لتنزيلها وتحليلها وعرضها دون أي وظيفة أو غرض.

وبالتالي ، يتعين على الزائرين الانتظار لفترة أطول لعرض الصفحة ومشاهدتها بالكامل. هذا بالتأكيد يخلق تجربة سيئة للمستخدمين.

علاوة على ذلك ، يؤثر وقت التحميل المنخفض أيضًا بشكل مباشر على تصنيفات البحث الخاصة بك. ستضع Google علامة على موقع WordPress الخاص بك على أنه ضعيف الأداء. يؤدي هذا إلى انخفاض حركة المرور إلى موقعك.

كيف يتم إضافة CSS غير المستخدمة إلى WordPress

كما ذكرنا ، يتم تضمين CSS في الغالب في قوالب WordPress ، ضمن ملف style.css. ومع ذلك ، فإن بعض مكونات WordPress الإضافية تساهم أيضًا في كود CSS.

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

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

كيفية تحديد CSS غير المستخدمة في WordPress

هناك عدة طرق للتجربة عندما يتعلق الأمر بفحص CSS غير المستخدمة في مواقع WordPress. يمكنك استخدام أداة Google Pagespeed Insights أو Chrome DevTools أو Purifycss.online لمعرفة لغة WordPress CSS غير المستخدمة.

# 1 استخدم Google Pagespeed Insights

كما يشير الاسم ، تمنحك هذه الأداة نظرة ثاقبة على سرعة صفحتك جنبًا إلى جنب مع التوصيات لتحسينها.

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

# 2 استخدم Chrome DevTools

إذا كنت تريد المزيد من التعريفات التفصيلية حول CSS الحالية غير المستخدمة ، فانتقل إلى Chrome DevTools.

لبدء استخدام الأداة ، افتح أولاً صفحة الويب التي تريدها ، ثم اضغط على Control + Shift + P (في Windows) أو Command + Shift + P (في نظام Mac). يمكنك أيضًا النقر بزر الماوس الأيمن على الصفحة واختيار فحص .

بعد ذلك ، توجه إلى المصادر ، وانقر على أيقونة 3 نقاط في الزاوية اليمنى العليا وحدد التغطية .

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

# 3 استخدم أداة Purifycss.online

أداة قوية أخرى لتحديد CSS غير المستخدمة في WordPress هي أداة Purifycss.online. يساعد بشكل رئيسي في الزحف إلى صفحات WordPress أو المنشورات الخاصة بك ويفحص كل ملف CSS ونمط مضمّن.

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

ما عليك سوى الانتقال إلى https://purifycss.online/ وإدخال عنوان URL الخاص بموقعك في مربع URL الخاص بموقع الويب .

يعرض التقرير النسب المئوية لـ CSS المستخدمة وغير المستخدمة بالإضافة إلى شكل كود CSS النظيف.

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

على الرغم من أنه يمكنك إزالة CSS غير المستخدمة في WordPress يدويًا ، فإننا نقترح استخدام مكون إضافي. لا يقتصر الأمر على توفير الوقت ولكن هذه الطريقة تقلل أيضًا من التغييرات غير الصحيحة في ملف style.css الخاص بك.

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

لاستخدام المكون الإضافي ، قم بتثبيته وتنشيطه لموقعك.

1. قم بتنزيل المكون الإضافي WP Rocket من موقعهم
2. انتقل إلى الإضافات ← إضافة جديد واضغط على تحميل البرنامج المساعد من لوحة تحكم المسؤول
   
3. اختر ملف zip للمكون الإضافي الذي قمت بتنزيله للتو
4. قم بزيارة Settings → WP Rocket في قائمة المسؤول الخاصة بك
   
5. افتح علامة التبويب File Optimization
   
6. توجه إلى قسم ملفات CSS وتحقق من خيار Remove Unused CSS (Beta)
7. تأكد من أن المكون الإضافي يأخذ CSS في مسح المهام بالضغط على Activate Remove Unused CSS

من الممكن أن تقرر أي ملف لا يجب لمسه عن طريق إدخال أسماء ملفات CSS أو معرفات أو فئات في مربع "قائمة CSS الآمنة".

تذكر أن تحفظ تغييراتك بعد اتخاذ كل هذه الإجراءات. ستؤدي إزالة CSS غير المستخدمة بنجاح إلى ظهور رسالة تقول " اكتمل إزالة CSS غير المستخدمة! "يمكنك الآن الرجوع إلى أداة Google Pagespeed Insights للتأكد من التحسن في سرعة صفحتك.

بصرف النظر عن WP Rocket ، هناك مكون إضافي آخر يسمى Asset CleanUp لتقليل CSS غير المستخدم على موقع WordPress الخاص بك. على عكس السابق ، يمكنك تنزيله مجانًا من مستودع WordPress.

اكتسبت Asset CleanUp ثقة أكثر من 100 ألف مستخدم حول العالم بتقييم 4.9 / 5 نجوم. يعد بأن يكون حلاً مقنعًا لزيادة سرعة صفحتك.

جاهز لإزالة CSS WordPress غير المستخدمة

لا تؤدي CSS غير المستخدمة أبدًا أي وظيفة في تنسيق موقعك وتصميمه. تبين أن تقليل CSS غير المثمر هو أحد أكثر الطرق فعالية لتسريع وقت تحميل صفحة WordPress الخاصة بك.

لقد تم إرشادك حول كيفية تنظيف CSS غير المستخدمة باستخدام المكون الإضافي WP Rocket. قبل تثبيت المكون الإضافي ، يمكنك التفكير في تحديد مقدار شفرة CSS غير المستخدمة من الأدوات الموجودة مثل Google Pagespeed Insights أو Chrome DevTools أو Purifucss.online.

هل أي أقسام أعلاه تربكك؟ شارك معنا تجربة إزالة CSS في قسم التعليقات أدناه.