كيفية إزالة CSS و JS غير المستخدمة في WordPress (سهل جدًا)

يمكن أن يؤدي وجود الكثير من CSS و JS غير المستخدمة في موقع الويب الخاص بك إلى الإضرار بوقت تحميل موقع الويب الخاص بك. إذا قمت بتشغيل موقع الويب الخاص بك من خلال أدوات اختبار السرعة مثل Google PageSpeed ​​Insight ، فقد تتلقى تحذيرًا لإزالة CSS غير المستخدمة.

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

هذا بسبب مكون إضافي مذهل يُعرف باسم Asset CleanUp: Page Speed ​​Booster. مع هذا البرنامج المساعد ، فإن إزالة CSS غير المستخدمة أمر سهل مثل النقر على بضعة أزرار. بدلاً من ذلك ، إذا كنت لا تمانع في إنفاق بضعة دولارات في السنة ، مع WP Rocket ، فهناك زر CSS غير مستخدم تمت إزالته ، فقط قم بتنشيطه وسيقوم المكون الإضافي بإزالة جميع CSS غير المستخدمة تلقائيًا.

الخروج: أفضل 7 استضافة Google Cloud WordPress مُدارة

ما هو CSS غير المستخدم؟

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

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

إذا كان هناك عدد كبير جدًا من CSS غير مطلوب ولكن يتم تحميله وإبطاء وقت المتصفح لقراءة الصفحة وعرضها ، فقد تصبح مشكلة.

بصرف النظر عن المكونات الإضافية ، يكتب مطورو القوالب الكثير من الأشياء في style.css التي لا تحتاج إليها في الغالب. ولكن سواء كانت هناك حاجة أم لا ، يتم تحميلها كلما تم تحميل موقعك!

قد لا يمثل أحد CSS غير المستخدم مشكلة ولكن الكثير من CSS غير المستخدمة يمكن أن يؤثر على وقت تحميل موقع الويب الخاص بك.

الخروج: أفضل 10 سمات ووردبريس الأسرع والأفضل

كيفية التعرف على CSS غير المستخدمة

يعد العثور على CSS و JS غير مستخدمين أمرًا سهلاً للغاية. هناك طريقتان أوصي بهما.

الأول هو تحليل موقع الويب الخاص بك من خلال Google PageSpeed ​​Insight. تحقق مما إذا كان موقع الويب الخاص بك به مشكلة إزالة غير مستخدمة في CSS. اضغط عليها وستتمكن من تحديد مكون موقعك المسؤول عن ذلك.

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

الخيار الثاني هو الحصول على تحليل أكثر تفصيلاً. يمكنك تحقيق ذلك باستخدام أدوات Chrome Dev.

في متصفح Chrome ، افتح أدوات Chrome Dev ثم انتقل إلى التغطية. ثم انقر فوق زر إعادة التحميل داخل منطقة التغطية. يمكنك العثور على دليل شامل حول كيفية القيام بذلك في أداة Google Developers.

الخيار الآخر هو استخدام jitbit للبحث عن محددات CSS غير المستخدمة. يمكنك أيضًا استخدام PurifyCSS للبحث عن CSS غير المستخدمة

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

اتبع هذه الخطوات لإزالة CSS غير المستخدمة من WordPress:

1. تثبيت Asset CleanUp

انتقل إلى البرنامج المساعد ثم أضف جديد. ثم تكتب "Asset CleanUp" في مربع البحث بصفحة إضافة ملحق جديد. قم بتثبيت البرنامج المساعد وتنشيطه.

2. انتقل إلى إعدادات البرنامج المساعد

للوصول إلى إعدادات البرنامج المساعد ، من لوحة بيانات WordPress ، انقر فوق الإعدادات ، ثم انقر فوق Asset CleanUp.

3. تفريغ CSS و JS غير المرغوب فيه

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

لإلغاء تحميل CSS و JS ، انقر فوق CSS و JSS manager. من هناك يمكنك إزالة أي CSS و JS لا تحتاجه. يمكنك إزالته للصفحة الرئيسية فقط أو للموقع بأكمله أو لعنوان URL محدد. يمكنك أيضًا إزالة المنشورات أو الصفحات أو الفئات.

مثال على ذلك هو إلغاء تحميل أي نموذج اتصال من التحميل للموقع بأكمله باستثناء صفحة الاتصال بنا

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

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

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

1. تنظيف الأصول: معزز سرعة الصفحة

تنظيف الأصول: يجعل Page Speed ​​Booster من السهل إزالة CSS و JSin WordPress غير المستخدمة حتى للمبتدئين. كل ما عليك فعله هو إلغاء تنشيط CSS معين غير مطلوب لصفحة معينة.

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

هذا البرنامج المساعد هو مكون إضافي كامل للأداء مع العديد من الخيارات الأخرى لتسريع WordPress. تعد إزالة CSS / JS غير المستخدمة جزءًا منها.

في هذا المنشور ، استخدمت هذا البرنامج المساعد لديه دليل.

2. صاروخ الفسفور الابيض

WP Rocket هو المكون الإضافي الأول للأداء المتميز في WordPress. إذا كنت مستجدًا ، أعني إذا لم تكن خبيرًا أو مرتاحًا مع WordPress ، فإن WP Rocket هي أسهل طريقة لإزالة CSS غير المستخدمة من أجل.

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

قم بتثبيت المكون الإضافي عبر Dashboard> plugins> Add new> Upload.

ما عليك سوى الانتقال إلى إعدادات WP Rocket ثم النقر فوق علامة التبويب "File Optimization". ثم قم بالتمرير لأسفل وسترى "Remove Unused CSS" ، حدد المربع ، واحفظ ، وامسح ذاكرة التخزين المؤقت.

3. Perfmatters

يعد Perfmatters مكونًا إضافيًا متميزًا تم تطويره بواسطة Brian Jackson وشقيقه Brett Jackson. يمكن أن يساعد هذا المكون الإضافي في إزالة CSS غير المستخدمة بسهولة بالغة.

أولاً ، تحتاج إلى شراء البرنامج المساعد. ثم قم بتثبيته. تفعيل الترخيص. عند الانتقال إلى الإعدادات ، قم بتشغيل مدير البرنامج النصي.

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

هذا البرنامج المساعد هو مكون إضافي للأداء ، ويأتي مع العديد من الخيارات الأخرى لتسريع WordPress. تعد إزالة CSS / JS غير المستخدمة جزءًا منها.

4. CSS JS Manager

يمكن لـ CSS JS Manager على وجه التحديد إزالة CSS أو JS من الهاتف المحمول أو سطح المكتب. حسب ما تريد تحقيقه.

يمكن لهذا المكون الإضافي أيضًا تأجيل تحميل ملفات CSS أو JS.

استنتاج

إذا كان لديك الكثير من CSS و JS غير المستخدمة ، فستلاحظ تحسنًا كبيرًا في درجات السرعة والأداء.

قد يكون من المستحيل إزالة جميع CSS غير المستخدمة ولكن يمكنك تقليلها إلى الحد الأدنى. أنا أستفيد من Asset CleanUp لإزالة CSS غير المستخدمة لـ TargetTrend.

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

اقرأ أيضًا:

كيفية التخلص من موارد حظر العرض في WordPress

كيف تجعل WordPress سريعًا جدًا

كيفية دفع حركة المرور إلى مدونتك