حذف‌کننده CSS استفاده‌نشده

حذف CSS استفاده‌نشده — فقط CSS موردنیاز صفحه را نگه دارید

به‌روزرسانی: ۷ مهر ۱۴۰۵ · نویسنده: سامان

بیشتر سایت‌ها خیلی بیشتر از نیاز هر صفحه CSS می‌فرستند. قالب، صفحه‌ساز یا فریم‌ورک برای هر ویجتی که شاید روزی نمایش دهد استایل همراه می‌آورد و مرورگر باید همه آن را پیش از رسم صفحه دانلود و تجزیه کند. این ابزار یک استایل‌شیت را به همان قاعده‌هایی که صفحه واقعاً به کار می‌برد کاهش می‌دهد، به دو روش: از خروجی Coverage که Chrome DevTools ضبط می‌کند، یا از HTML صفحه و خود CSS.

هر دو روش به‌طور کامل در مرورگر شما اجرا می‌شوند. استایل‌شیت، HTML و فایل Coverage روی دستگاه خودتان خوانده می‌شوند و هرگز آپلود نمی‌شوند؛ نکته‌ای مهم وقتی CSS متعلق به سایت هنوز منتشرنشدهٔ یک مشتری است.

دو راه ورود

گرفتن خروجی Coverage از Chrome

1. صفحه را در Chrome باز کنید و DevTools را باز کنید.
2. منوی سه‌نقطه را باز کنید، سپس More tools (ابزارهای بیشتر) و بعد Coverage (پوشش) را انتخاب کنید.
3. دکمه بارگذاری مجدد را در پنل Coverage بزنید تا ضبط همراه با بارگذاری صفحه شروع شود.
4. مثل یک بازدیدکننده با صفحه کار کنید: منوها، آکاردئون‌ها و پنجره‌های بازشو را باز کنید و اندازه پنجره را به پهناهایی که پشتیبانی می‌کنید تغییر دهید.
5. Export (خروجی گرفتن) را بزنید و فایل JSON را ذخیره کنید، سپس آن را روی زبانه JSON پوشش رها کنید و استخراج CSS استفاده‌شده را بزنید.

خروجی، همه فایل‌هایی را که صفحه بارگذاری کرده فهرست می‌کند، از جمله JavaScript. ابزار استایل‌شیت‌ها را نگه می‌دارد، بلوک‌های درون‌خطی <style> را از داخل سندهای HTML بیرون می‌کشد و بقیه را کنار می‌گذارد و به شما می‌گوید چند ورودی کنار گذاشته شده است. همین قالب از page.coverage.stopCSSCoverage() در Puppeteer هم به دست می‌آید، پس ضبط خودکار هم کار می‌کند.

چرا قاعده‌ها به داخل @media خودشان برمی‌گردند

Chrome پوشش را قاعده‌به‌قاعده ضبط می‌کند. برای قاعده‌ای که داخل @media (max-width: 768px) { ... } است، خود قاعده را ضبط می‌کند، نه خط @media دور آن را. ابزاری که بازه‌های ضبط‌شده را صرفاً کپی می‌کند، قاعده موبایل را تنها و بدون آن خط تحویل می‌دهد و آن قاعده در همه پهناهای صفحه اعمال می‌شود. این ابزار اول کل استایل‌شیت را به شکل یک درخت می‌خواند، بنابراین هر قاعدهٔ حفظ‌شده دوباره داخل بلوک @media، @supports، @container یا @layer خودش نوشته می‌شود و بلوکی که چیزی در آن نمانده حذف می‌شود.

بعضی at-ruleها همیشه حفظ می‌شوند، چون قاعده‌های دیگر به آن‌ها وابسته‌اند، نه اینکه صفحه با آن‌ها تطبیق داشته باشد: @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 چسبانده‌شده نیست، پس قاعده‌هایش استفاده‌نشده به نظر می‌رسند. این نام‌ها را در همیشه نگه‌دار بنویسید و با فاصله یا ویرگول از هم جدا کنید؛ idها با # یا بدون آن کار می‌کنند و الگویی میان دو اسلش، مثل /^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));

ابزارهای مرتبط

خروجی Coverage یک فایل JSON است، پس فرمت‌کننده JSON سریع‌ترین راه برای دیدن داخل آن است. الگوهای همیشه نگه‌دار را با آزمایشگر Regex بسازید و امتحان کنید، و تصویرهایی را که صفحهٔ سبک‌شده هنوز با خود دارد با مبدل تصویر فشرده کنید.