أضافت Perfmatters ميزة جديدة في الإصدار 1.8.5 في 19 يناير لإزالة CSS غير المستخدمة. لن أتعب أبدًا من التوصية بهذه الإضافة التي أصبحت ضرورية إذا كنت ترغب في تحسين أداء مدونتك.
مقابل 25 دولاراً سنوياً مقابل 25 دولاراً سنوياً، يقدم أداة قوية يواصلون إضافة التحسينات عليها. يتوفر دليل تهيئة هنا.
لقد اختبرته بالفعل على WordPress 5.8 و 5.9-RC ولم يتعطل أي شيء حتى الآن. على الرغم من أنه كان لدي بالفعل CSS بدون استخدام يتم التحكم فيه بشكل كبير من خلال مدير البرامج النصية لهذا المكون الإضافي، إلا أنه من خلال تنشيط هذا الخيار فقط يمكنك حفظ طلبين على الأقل وبعض الكيلوبايت.
لماذا إزالة CSS غير المستخدمة؟
عادةً ما تظهر تحذيرات PageSpeed المعتادة"إزالة CSS غير المستخدمة" أو"تقليل محتوى CSS غير المستخدم" عندما لا تكون هناك حاجة إلى CSS المحملة بواسطة إضافة أو قالب أو لا تُستخدم في صفحة معينة.
عادةً ما يقوم المطورون بإضافة ورقة أنماط فقط في حالة استخدامها. ومع ذلك، في كثير من الأحيان يتم إضافة أنماط إضافية قد لا تكون هناك حاجة إليها. ينتج عن ذلك الكثير من CSS غير المستخدمة، مما يؤدي إلى إبطاء التحميل.
في بعض الأحيان، قد يؤدي أيضًا في بعض الأحيان إلى إطلاق تحذيرات"إزالة الموارد التي تمنع العرض".
وبعيدًا عن وهم الحصول على درجة PageSpeed أفضل، فإن إزالة CSS غير المستخدمة لها تأثير كبير على تقليل الوقت الذي يستغرقه تحميل الصفحة من وقت بدء تحميل الصفحة حتى يتم عرض أي جزء من محتوى الصفحة على الشاشة(FCP)، والوقت الذي يستغرقه المحتوى الرئيسي لصفحة الويب لتنزيله وتجهيزه بالكامل للمستخدم(LCP) والوقت من وقت بدء تحميل الصفحة حتى تصبح تفاعلية بالكامل(TTI). باختصار، كما تعلم، جزء مهم من قصة الويب الحيوية الأساسية.
كيفية العثور على CSS غير مستخدم؟
أسهل طريقة للعثور على CSS غير المستخدمة هي اختبار عنوان URL باستخدام PageSpeed. إذا كان هناك CSS غير مستخدم، فسوف ترى التحذير، والذي لن يتم تشغيله إلا إذا كان أعلى من الحد الذي يعتبره جوجل مهمًا بما يكفي للتحذير، لذلك إذا كانت سرعة التحميل المتصورة (السرعة الفعلية التي تواجهها) جيدة فلا تتعلّق بها كثيرًا.
الطريقة الأخرى للعثور على CSS غير المستخدمة هي استخدام أدوات تطوير كروم DevTools. افتح الفاحص في كروم (Ctrl+Shift-I)، واضغط على Shitft+Control+P، واكتب "Coverage" وهناك ستجد البايتات غير المستخدمة لكل من CSS وJS. بالأحمر غير المستخدمة وبالأزرق/الأخضر المستخدمة.
من هنا، وفهم أنك تعرفت على كل CSS، وما الذي يفعله وما إذا كان بإمكانك إزالته أو تعطيله من الصفحة التي تقيس فيها، هناك العديد من الخيارات، مثل استبدال بعض الإضافات بأخرى أخف وزنًا، أو مراجعة القالب أو التفكير في تغيير القالب، أو استخدام مدير البرامج النصية لتعطيل JS و CSS بشكل انتقائي، وما إلى ذلك.
أسهل طريقة لإزالة تحذيرات PageSpeed هي تنشيط وظيفة"إزالة CSS غير المستخدمة" في Perfmatters، والتي تقوم بكل ذلك تلقائيًا. يزعمون أنهم اختبروها على مئات من عناوين URL (بقوالب وتكوينات مختلفة) وأبلغوا عن هذه النتائج:
انخفاض متوسط الانخفاض في برنامج التحويلات النقدية بنسبة 15.20%.
متوسط الانخفاض في متوسط الانخفاض في برنامج التحويلات النقدية بنسبة 19.66%.
متوسط الانخفاض في مؤشر TTI بنسبة 14.95%.
قبل التفعيل
توصي Perfmatters بأن تقوم، قبل تمكين هذا الخيار، بإزالة أي تحميل مسبق لـ CSS موجود تم تكوينه في Perfmatters (باستثناء أوراق أنماط خطوط Google المحلية) وعدم دمج CSS.
دمج CSS هو أسلوب تحسين مهمل منذ HTTP/2. في بعض الحالات، قد يضر دمج CSS بالأداء. مرة أخرى، تذكّر أن كل صفحة ستتصرف بشكل مختلف اعتمادًا على تكوينها ومن الأفضل اختبارها ومراقبتها حتى تجد أفضل نتيجة خالية من الأخطاء لحالتك.
يجب عليك أيضًا أن تكون على دراية بالتكوينات المحتملة لإضافات الأداء أو التخزين المؤقت الأخرى التي قد تستخدمها والتي قد تتعارض أو تتجاوز بعضها البعض من خلال تمكين الوظائف نفسها.
بمجرد التفعيل ستجد خيارين بإعدادين:
1- طريقة CSS المستخدمة
1.1- مضمنة (افتراضي): تظهر CSS المستخدمة في محاذاة أعلى الطية في التعليمات البرمجية المصدرية للموقع. هذا الخيار هو الأفضل لدرجات PageSpeed.
1.2 -ملف: يتم وضع CSS المستخدم في ورقة أنماط CSS منفصلة (ملف). هذا الخيار هو الأفضل بالنسبة للمستخدم والأداء المتصور، حيث يمكن تخزين الملف مؤقتًا في الزيارات المتكررة وتقليل حجم مستند HTML.
2- سلوك ورقة الأنماط
2.1- التأخير (الافتراضي والموصى به).
كان CSS الخاص بك مضمنًا وجميع أوراق أنماط CSS (CSS غير المستخدمة) يتم تأخيرها وتحميلها مع تفاعل المستخدم.
2.2- غير متزامن
يتم تحويل CSS المستخدمة إلى مضمنة، ويتم تحميل جميع أوراق أنماط CSS (CSS غير المستخدمة) بشكل غير متزامن. يمكن أن تساعد هذه الطريقة في تجنب الانبثاق، حيث يتم تنفيذ أوراق الأنماط بشكل غير متزامن أثناء تحميل الصفحة. ستؤدي هذه الطريقة إلى ارتفاع LCP/FCP أعلى قليلاً من سلوك التأخير السابق.
2.3- إزالة
يصبح CSS المستخدم لديك مضمنًا، وتتم إزالة جميع أوراق أنماط CSS الأصلية (CSS غير المستخدمة). هذه هي الطريقة الأكثر قوة، ولكن من المحتمل أيضًا أن تتطلب إضافة استثناءات. يوصى بها فقط للمستخدمين المتقدمين.
بمجرد تفعيلها، ستتصرف الصفحات والإدخالات بشكل مختلف.
تميل الصفحات إلى احتوائها على الكثير من CSS الفريدة، وبالتالي سيتم إنشاء CSS المستخدمة وتصبح مضمنة بشكل منفصل لكل صفحة على حدة في الزيارة الأولى.
ومع ذلك، نظرًا لأنها تميل إلى مشاركة الكثير من CSS، سيتم إنشاء CSS المستخدمة مرة واحدة فقط، في الزيارة الأولى، وستصبح مضمنة. الفرق بين الإدخالات مقارنة بالصفحات هو أن إنشاء CSS المستخدمة يتم مرة واحدة فقط.
سيتم تخزين جميع CSS المستخدمة التي تم إنشاؤها بواسطة Perfmatters محليًا في هذا المسار:
/wp-content/cache/perfmatters/tudominio.com/css/
هذا هو الشكل الذي يبدو عليه CSS الذي تم إنشاؤه بواسطة Perfmatters، للصفحات أو المنشورات أو الفئات أو الوسوم أو عمليات البحث أو الصفحة الرئيسية أو 404s.
في مربع"أوراق الأنماط المستبعدة" يمكنك استبعاد أوراق أنماط محددة من وظيفة "إزالة CSS غير المستخدمة" عن طريق إضافة عنوان URL المصدر الكامل(loquesea.css)، أو عن طريق إضافة جزء واحد من عنوان URL المصدر. التنسيق: واحد لكل سطر.
في مربع"المحددات المستبعدة" التالي، يمكنك استبعاد CSS (محددات) محددة من وظيفة "إزالة CSS غير المستخدمة" عن طريق إضافة معرف العنصر واسم الفئة وما إلى ذلك (#id, .class). التنسيق: واحد لكل سطر.
من المحتمل أن تحتاج في مرحلة ما إلى حذف CSS المستخدمة. على سبيل المثال، بعد إعادة تصميم صفحة أو بعد إضافة عنصر جديد. لحذف CSS الذي تم إنشاؤه وإعادة إنشائه بعد الزيارات اللاحقة، ما عليك سوى النقر على الخيار الموجود أسفل"مسح CSS المستخدم".
يمكنك استبعاد مقالة فردية أو صفحة أو نوع مقالة مخصصة من استخدام وظيفة إزالة CSS غير المستخدمة. في المحرر، على الجانب الأيمن، قم بإلغاء تحديد"CSS غير المستخدمة".
سيؤدي هذا إلى استبعاد الصفحة بأكملها ويمكن أن يكون مفيدًا على سبيل المثال لعربة التسوق أو الخروج أو صفحة الاتصال التي قد تواجه مشاكل أكثر من بقية الموقع.
يمكنك أيضًا استخدام فلتر perfmatters_remove_unuse_unused_css لتغيير مكان إزالة CSS غير المستخدمة على موقعك. سيؤدي هذا المثال إلى تعطيل CSS غير المستخدم على الصفحات فقط.
add_filter('perfmatters_remove_unused_css', function($boolean) {
if(is_page()) {
return false;
}
return $boolean;
});
