اصل ماجرا

در یک برنامه وب متوسط، ۲۸۴۷ سلکتور بلااستفاده در سه استایل‌شییت کشف شد. با حذف این قواعد، حجم CSS از ۳۴۰ KB به ۱۳۲ KB رسید و زمان LCP حدود ۱٫۸ ثانیه بهتر شد. روش شامل گزارش پوشش در Chrome DevTools، استخراج خودکار با Puppeteer، فیلتر کردن با داده‌های واقعی و پاک‌سازی با css‑tree بود.

متن کامل ترجمه‌شده

هر فایل CSS قوانین است که هرگز یک عنصر در صفحه را متصل نمی کند.در audit اخیر من از یک نرم افزار وب متوسط با 14 صفحه تولید، من 2847 انتخاب کننده نامناسب در 3 صفحه سبک ترکیب شامل 340 کیلوابایت یافتم.با حذف آنها، بار مصرف CSS را از 340 کیلوابایت به 132 کیلوابایت کاهش داد - کاهش 61% در اندازه فایل و 1.8 ثانیه بهبود در بزرگترین رنگ محتوایی (LCP) در یک اتصال 4G شبیه سازی شده است.مشکل: چرا CSS ناخودآگاه از CSS ناخودآگاه جمع آوری می شود از پنج منبع می آید: - فایلهای فرایند - Reset style sheets and utility frameworks ship 4,000+ rules; اکثر صفحات کمتر از 400 استفاده می کنند - ویژگی های مرده - دکمه ها، modals، و طرح های حذف شده از UI اما سبک های آنها در باند باقی می ماند - باقی مانده پاسخگویی - سوال های رسانه ای برای نقاط شکست که دیگر با هر پورت مشاهده مورد استفاده از تجزیه و تحلیل - Ctrl+Shift+P → عنوان “Coverage” → انتخاب “Starting measurement coverage” را انتخاب کنید.در نظارت من، صفحه سبک اصلی 73% بیتی های غیر استفاده شده را نشان داد (248 KB از 340 KB). درصد برای هر فایل را ثبت کنید. اگر هر فایل تنها بیش از 60% بیتی های غیر استفاده شده است، این یک کاندیدای قوی برای کاشت است. مرحله 2: استخراج Selectors Unused با Puppeteer برای نظارت های خودکار، از پروتکل CSS.coverage Puppeteer استفاده کنید: const puppeteer = require(‘puppeteer’); (async () => {const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto (’ URL_0’); await page.coveragestart.CSSCoverage(); // Simulate real user interactions await page.evaluate(() => {document.SelectorLog(Total unused CSS bytes: ${totalUnused}); wait browser.close(); })(); این اسکرپت را علیه هر مدل صفحه منحصر به فرد در برنامه شما اجرا کنید. Total unused bytes across all pages gives you your pruning target. Step 3: Cross-Reference with Real Usage Data Coverage data alone is misleading because: - It only measures what a single page load uses - Dynamic states (hover, focus, open menus) may not trigger during the audit - JavaScript-togged classes won’t appear in coverage برای فیلتر کردن مثبت های جعلی، cross-reference your coverage results with your analytics: - Export the list of unused selectors from Step 2 - Filter out any selector containing a class name that appears in your JavaScript source code - Filter out pseudo-class selecمرحله 4: پاک کردن با css-tree برای حذف برنامه ای، پارس کردن شیشه ها و برش انتخاب های غیر متفاوتی: const { پارس، تولید } = require(‘css-tree’); const css = require(‘fs’).readFileSync(‘styles.css’, ‘utf8’); const usedClasses = new Set([‘containers’, ‘btn’, ‘nav-link’, /* … /]; const ast = parse(css); ast.children = ast.children.filter(node => {if (node.type === ‘Rule’) { const selector = generate(node.prudeelprudeesession); return…nav-link.matchAll((([a-Az-A-Z\w-Z])/g1٪) - تجزیه و بررسی تعاملات - از طریق هر عنصر تمرکز شده، تغییر هر dropdown و modal - تایید عملکرد - بازگرداندن Lighthouse و تایید LCP بهبود یافته توسط margin انتظار نتایج خلاصه تمام تجزیه و پاکسازی تقریبا 4 ساعت برای یک برنامه 14 صفحه طول کشید - بیشتر آن را در مرحله cross-referencing صرف شده است.

چرا مهمه؟

حجم CSS بیش از حد باعث بارگذاری طولانی‌تر، مصرف بیشتر باند و کاهش تجربه کاربری می‌شود. توسعه‌دهنده‌ها و تیم‌های بهینه‌سازی وب مستقیماً تحت تأثیر این کاهش حجم قرار می‌گیرند. خواننده باید این روش را بکار بگیرد تا سرعت سایتش را ارتقا دهد و هزینه‌های میزبانی را کاهش دهد.

به درد کی می‌خوره؟

• توسعه‌دهنده‌های فرانت‌اند • مهندسان عملکرد وب • تیم‌های DevOps • مدیران محصول دیجیتال

تو عمل چی کار کنیم؟

با اجرای این روش می‌توانید فایل‌های CSS پروژه‌تان را به‌سرعت پاک‌سازی کنید، حجم صفحه را کاهش داده و زمان بارگذاری را بهبود بخشید. پس از حذف، با تست‌های رگرسیون بصری و Lighthouse اطمینان حاصل کنید که هیچ بخشی از ظاهر یا عملکرد سایت خراب نشده.

نظر Blue IT News

پیشنهاد می‌کنیم این فرآیند را به‌عنوان یک کار خودکار در CI/CD قرار دهید؛ به‌این ترتیب CSSهای بلااستفاده هر بار که کد جدید اضافه شد، شناسایی و حذف می‌شوند.

<div class=“disclosure”> این صفحه ترجمه و تفسیر کاملی از گزارش اصلی Dev است که توسط تیم تحریریه بلو آی تی نیوز به فارسی ترجمه و تحلیل شده. برای مشاهده نسخه اصلی، به منبع مراجعه کنید. </div>