مزيل CSS غير المستخدم
أبقِ فقط CSS الذي تستخدمه الصفحة، من تصدير Coverage في Chrome أو من HTML وورقة الأنماط. كل شيء يجري داخل متصفحك.
مزيل CSS غير المستخدم – احتفظ فقط بـ CSS الذي تستخدمه الصفحة
ترسل معظم المواقع من CSS أكثر بكثير مما تحتاجه أي صفحة. فالقالب أو أداة بناء الصفحات أو إطار العمل يجلب أنماطًا لكل عنصر قد يعرضه يومًا ما، وعلى المتصفح أن ينزّلها كلها ويحللها قبل أن يرسم الصفحة. تختصر هذه الأداة ورقة الأنماط إلى القواعد التي تستخدمها الصفحة فعلًا، بطريقتين: من تصدير Coverage الذي يسجّله Chrome DevTools، أو من HTML الصفحة ومن CSS نفسه.
تعمل الطريقتان بالكامل داخل متصفحك. تُقرأ ورقة الأنماط وHTML وملف التغطية على جهازك ولا تُرفع أبدًا، وهذا مهم حين يكون CSS تابعًا لموقع عميل لم يُطلق بعد.
طريقتان للبدء
| الوضع | ما تقدّمه له | ما يعرفه | الأنسب لـ |
|---|---|---|---|
| JSON التغطية | الملف المُصدَّر من لوحة Coverage في Chrome DevTools | القواعد التي طبّقها المتصفح بالضبط أثناء استخدامك للصفحة | القوالب وأدوات بناء الصفحات التي لا يمكنك توقّع فئاتها |
| HTML + CSS | HTML الصفحة وورقة الأنماط | المحدِّدات التي تطابق عنصرًا في ذلك HTML | الصفحات الثابتة والقوالب التي تتحكم فيها |
كيف تصدّر التغطية من Chrome
- افتح الصفحة في Chrome ثم افتح DevTools.
- افتح القائمة ذات النقاط الثلاث، ثم More tools (مزيد من الأدوات)، ثم Coverage (التغطية).
- اضغط زر إعادة التحميل في لوحة Coverage ليبدأ التسجيل مع تحميل الصفحة.
- استخدم الصفحة كما يستخدمها الزائر: افتح القوائم والأكورديونات والنوافذ المنبثقة، وغيّر حجم النافذة إلى العروض التي تدعمها.
- اضغط Export (تصدير) واحفظ ملف JSON، ثم أفلِته على تبويب JSON التغطية واضغط استخراج CSS المستخدم.
يسرد التصدير كل ملف حمّلته الصفحة، بما في ذلك JavaScript. تحتفظ الأداة بأوراق الأنماط، وتقرأ كتل <style> المضمَّنة من مستندات HTML، وتتخطى الباقي، وتخبرك بعدد الإدخالات التي تخطّتها. ويخرج التنسيق نفسه من page.coverage.stopCSSCoverage() في Puppeteer، لذا يصلح التسجيل الآلي أيضًا.
لماذا تعود القواعد إلى داخل @media الخاص بها
يسجّل Chrome التغطية قاعدةً قاعدة. فللقاعدة الموجودة داخل @media (max-width: 768px) { ... } يسجّل القاعدة نفسها، لا سطر @media المحيط بها. لذلك فإن الأداة التي تنسخ النطاقات المسجّلة كما هي تُخرج قاعدة الجوال وحدها، فتبدأ بالانطباق على كل عروض الشاشة. أما هذه الأداة فتقرأ ورقة الأنماط كاملة في شكل شجرة أولًا، فتُكتب كل قاعدة مُبقاة من جديد داخل كتلة @media أو @supports أو @container أو @layer الخاصة بها، وتختفي الكتلة التي لم يبقَ فيها شيء.
بعض قواعد at-rules يُحتفظ بها دائمًا، لأن قواعد أخرى تعتمد عليها لا لأن الصفحة تطابقها: @font-face و@keyframes و@import و@charset و@property وتعليمة ترتيب @layer. وتُنسخ القواعد المُبقاة كما كُتبت، فتبقى التعليقات داخلها والتنسيق والحيل الخاصة بالمتصفحات كما في الأصل تمامًا.
وضع HTML + CSS
الصق HTML الصفحة وورقة الأنماط، أو أفلِت الملفين. تحلّل الأداة HTML كما يفعل المتصفح، دون تشغيل أي سكربت، وتحتفظ بالقاعدة إذا طابق أيٌّ من محدِّداتها عنصرًا. وتُتجاهل أجزاء الحالات والعناصر الزائفة مثل :hover و:focus و::before في هذا الاختبار، فيبقى .menu a:hover ما دامت الصفحة تحتوي على .menu a. أما المحدِّد الذي لا يستطيع المتصفح تحليله فيُحتفظ به بدل التخمين، ولا تبقى @keyframes إلا ما دامت قاعدة مُبقاة أو نمط مضمَّن يذكر اسم الحركة.
نقطة الضعف هي JavaScript. فالفئة التي يضيفها سكربت لاحقًا، مثل is-open على قائمة أو active على شريحة، ليست في HTML الذي لصقته، فتبدو قواعدها غير مستخدمة. اكتب هذه الأسماء في احتفظ دائمًا، مفصولة بمسافات أو فواصل؛ وتعمل المعرّفات مع # أو بدونها، والنمط المحصور بين شرطتين مائلتين، مثل /^elementor-/، يُبقي كل فئة تطابقه. وإن كانت عدة صفحات تشترك في ورقة أنماط واحدة، فالصق HTML كل منها واحدًا تلو الآخر.
ماذا تعني الأرقام
بعد كل تشغيل تعرض الأداة مقدار ما أبقته، وعدد القواعد التي بقيت، وفي وضع التغطية سطرًا لكل ورقة أنماط. وفي وضع HTML + CSS تسرد قائمة المحدِّدات المحذوفة ما أُسقط، وهي أسرع طريقة لاكتشاف فئة كان ينبغي أن تكون في قائمة الاستثناء. احتفظ بالملف الأصلي: النتيجة ورقة أنماط جديدة، والاختبار الصادق هو أن تحمّل الصفحة بها وتنظر.
حدود يجدر معرفتها
- لا تعرف Coverage إلا ما حدث أثناء التسجيل. فحالة hover لم تُفعّلها، أو قائمة لم تفتحها، أو عرض لم تجرّبه، يُعدّ غير مستخدم.
- تغطية صفحة واحدة لا تقول شيئًا عن الصفحات الأخرى التي تحمّل الملف نفسه. شغّل الأداة على كل قالب رئيسي، أو أبقِ ورقة أنماط أساسية مشتركة كاملة.
- الأنماط التي تضيفها JavaScript وقت التشغيل، عبر سمات
styleأو أوراق أنماط محقونة، خارج ما يستطيع أيٌّ من الوضعين رؤيته. - أوراق الأنماط القادمة من مواقع أخرى، مثل الخطوط أو CSS الأدوات على شبكة CDN، تظهر في التصدير أيضًا؛ أبقِها أو احذفها عن قصد.
أين تفيد أكثر
- الصفحات المبنية بـ Elementor أو Divi أو أداة بناء صفحات أخرى، التي تحمّل CSS كل العناصر في كل صفحة. ويشرح دليل تحويل صفحة Elementor إلى HTML وCSS بسيطين المهمة كلها.
- القوالب وأطر العمل مثل Bootstrap، حيث لا تستخدم صفحة الهبوط إلا جزءًا صغيرًا من الفئات.
- تضمين CSS الحرج (critical CSS) أو بناء قالب بريد إلكتروني، حيث لكل بايت من الأنماط ثمن.
- مراجعة ورقة أنماط قديمة قبل إعادة التصميم، لمعرفة القواعد التي لا تزال أي صفحة تستخدمها.
القيام بذلك من سطر الأوامر
في خطوة البناء (build)، تؤدي PurgeCSS مهمة وضع HTML + CSS من خلال سكربت. فهي تقرأ ملفات المحتوى وأوراق الأنماط وتكتب CSS المنظّف في مجلد:
npx purgecss --css css/style.css --content index.html --output dist/css/ويسجّل Puppeteer التغطية نفسها التي تسجّلها لوحة Coverage، ويمكن حفظ مخرجاته بصيغة JSON وإفلاتها على هذه الأداة:
await page.coverage.startCSSCoverage();
await page.goto('https://example.com');
const coverage = await page.coverage.stopCSSCoverage();
fs.writeFileSync('coverage.json', JSON.stringify(coverage));أدوات ذات صلة
تصدير التغطية ملف JSON، لذا فإن منسّق JSON أسرع طريقة للنظر في داخله. ابنِ أنماط احتفظ دائمًا واختبرها باستخدام مختبِر التعابير النمطية، واضغط الصور التي لا تزال الصفحة الأخف تحملها باستخدام محوّل الصور.