چگونه قوانین بلااستفاده CSS را بررسی کنید و زمان بارگذاری را ۶۰٪ کاهش دهید
در یک برنامه وب متوسط، ۲۸۴۷ سلکتور بلااستفاده در سه استایلشییت کشف شد. با حذف این قواعد، حجم CSS از ۳۴۰ KB به ۱۳۲ KB رسید و زمان LCP حدود ۱٫۸ ثانیه بهتر شد. روش شامل گزارش پوشش در Chrome DevTools، استخراج خودکار با Puppeteer، فیلتر کردن با دادههای واقعی و پاکسازی با css‑tree بود.
چرا مهمه؟
حجم CSS بیش از حد باعث بارگذاری طولانیتر، مصرف بیشتر باند و کاهش تجربه کاربری میشود. توسعهدهندهها و تیمهای بهینهسازی وب مستقیماً تحت تأثیر این کاهش حجم قرار میگیرند. خواننده باید این روش را بکار بگیرد تا سرعت سایتش را ارتقا دهد و هزینههای میزبانی را کاهش دهد.
به درد کی میخوره؟
• توسعهدهندههای فرانتاند • مهندسان عملکرد وب • تیمهای DevOps • مدیران محصول دیجیتال
تو عمل چی کار کنیم؟
با اجرای این روش میتوانید فایلهای CSS پروژهتان را بهسرعت پاکسازی کنید، حجم صفحه را کاهش داده و زمان بارگذاری را بهبود بخشید. پس از حذف، با تستهای رگرسیون بصری و Lighthouse اطمینان حاصل کنید که هیچ بخشی از ظاهر یا عملکرد سایت خراب نشده.
نظر BlueIT News
پیشنهاد میکنیم این فرآیند را بهعنوان یک کار خودکار در CI/CD قرار دهید؛ بهاین ترتیب CSSهای بلااستفاده هر بار که کد جدید اضافه شد، شناسایی و حذف میشوند.