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

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

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

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

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

لماذا يوجد CSS غير المستخدم حتى؟

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

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

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

فكر في الأمر أثناء التطوير

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

استخدام حل UnusedCSS عبر الإنترنت

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

• البحث التلقائي عن قواعد CSS غير المستخدمة
• نوفر لك CSS نظيفًا للتنزيل
• استكشاف قواعد التصميم المتجاوب والاستفسارات الإعلامية
• التحقق من الموقع للتغييرات
• معاينة التغييرات
• و اكثر

PurgeCSS لإزالة CSS الإضافية

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

تحسين البرنامج المساعد

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

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

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

قم بإزالة CSS غير المستخدمة باستخدام Asset CleanUp

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

قم بتحسين CSS الخاص بك باستخدام Perfmatters

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

اعتبارات إضافية لتحسين سرعة الموقع

ضع في اعتبارك استخدام CDN لتقديم ملفات CSS - لتقليل سرعة تحميل CSS أو أي ملفات أخرى بشكل كبير.

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

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