Unused CSS — 5 bước loại bỏ giảm 70% bytes cho WordPress

CSS không dùng thường chiếm 70-90% dung lượng CSS trong theme WordPress. Bài hướng dẫn 5 bước loại bỏ 2026: audit Coverage tab, PurgeCSS, plugin WordPress, quy tắc ngoại lệ và đo kết quả cho shop bán hàng.

CSS không dùng — vấn đề và quy mô

Theme WordPress cao cấp (Astra Pro, Flatsome, Avada) đóng gói CSS 200-500KB để hỗ trợ mọi tính năng. Site thực tế chỉ dùng 10-30% — phần còn lại vẫn được tải và phân tích cú pháp, làm chậm hiển thị.

Vì sao CSS không dùng phổ biến?

• Theme đóng gói đầy đủ: 50+ biến thể thành phần giao diện.
• Plugin enqueue CSS riêng cho trang quản trị nhưng lại tải cả ở giao diện người dùng.
• WooCommerce CSS tải mọi trang, kể cả trang không có shop.
• Bootstrap hoặc Foundation full bundle 150-250KB.
• FontAwesome icon library 70KB nhưng chỉ dùng 5-10 icon.

CSS không dùng ảnh hưởng hiệu năng thế nào?

Trình duyệt tải và phân tích toàn bộ CSS trước khi hiển thị trang. CSS không dùng làm tăng thời gian phân tích CSSOM — ảnh hưởng trực tiếp đến FCP và LCP.

CSS chặn hiển thị (render-blocking CSS) là một trong những nguyên nhân phổ biến nhất gây FCP kém. Xem thêm trong bài Critical CSS — tối ưu CSS quan trọng.

Bước 1 — Audit qua Chrome DevTools Coverage

Tab Coverage trong DevTools hiển thị tỷ lệ phần trăm CSS được dùng cho trang hiện tại. Cách nhanh nhất phát hiện CSS không dùng mà không cần công cụ bổ sung.

Quy trình audit

1. Mở Chrome DevTools (F12).
2. Ctrl+Shift+P (Windows) → tìm “Coverage”.
3. Tab “Coverage” mở → bấm nút ghi (record).
4. Reload trang → chờ tải xong, cuộn xuống để trigger lazy load.
5. Bấm dừng ghi.
6. Xem danh sách file CSS với tỷ lệ đã dùng. Thanh đỏ = phần không dùng.

Đọc báo cáo Coverage

Kiểm tra nhiều trang, không chỉ trang chủ

Trang chủ thường dùng nhiều component hơn trang trong. Audit trang sản phẩm, trang danh mục, checkout riêng — mỗi trang có tỷ lệ CSS không dùng khác nhau.

Bước 2 — PurgeCSS quét và loại bỏ

PurgeCSS quét template HTML/JS, xác định class CSS không được tham chiếu, xuất file CSS chỉ chứa class đang dùng. Công cụ chuẩn 2026 cho dự án có build pipeline.

PurgeCSS với PostCSS

// postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
  plugins: [
    purgecss({
      content: [
        './src/**/*.html',
        './src/**/*.js',
        './templates/**/*.php',  // template WordPress
      ],
      defaultExtractor: content =>
        content.match(/[w-/:]+(?<!:)/g) || [],
      safelist: {
        standard: ['html', 'body'],
        deep: [/^wp-/, /^wc-/],  // class WordPress + WooCommerce động
        greedy: [/^has-/, /^is-/], // class trạng thái
      },
    }),
  ],
};

Kết quả tham chiếu khi dùng PurgeCSS

• Bootstrap 150KB: sau PurgeCSS còn 15-25KB tùy số component dùng.
• Tailwind v2 raw 3MB: sau PurgeCSS còn 8-15KB. Tailwind v3 JIT tự purge — không cần làm thêm.
• Theme tùy chỉnh 200KB: thường còn 60-80KB sau khi loại bỏ.

PurgeCSS giới hạn

PurgeCSS chỉ quét template tĩnh tại thời điểm build. Class được thêm động qua JavaScript sẽ bị xóa nhầm.

Cần safelist cho những class này (ví dụ: document.body.classList.add('modal-open')).

Bước 3 — Plugin WordPress tự động loại bỏ

WP Rocket có tính năng “Remove Unused CSS” quét từng URL, tạo ra tập hợp CSS tối thiểu chỉ chứa class đang dùng. Thiết lập 1 click, không cần build pipeline.

WP Rocket Remove Unused CSS — thiết lập

1. Settings → File Optimization → tab CSS.
2. Tick “Remove Unused CSS”.
3. Chờ 5-15 phút — plugin quét toàn site, tạo CSS tối ưu cho từng template.
4. Xác minh qua View Source: <style id="wpr-usedcss-..."> inline với tập hợp CSS tối thiểu.
5. Test toàn site: trang chủ, sản phẩm, checkout, tìm kiếm → style bị hỏng?
6. Nếu bị hỏng: thêm class vào “Excluded CSS Selectors” trong cài đặt plugin.

Lựa chọn thay thế miễn phí

• Asset CleanUp: bỏ enqueue CSS không dùng theo từng trang — mức độ thô, không theo class.
• Perfmatters: $24.95/năm, có tính năng Remove Unused CSS.
• FlyingPress: $42/năm, tích hợp nhiều tính năng hiệu năng.

Tải CSS có điều kiện trong WordPress

Cách thủ công hiệu quả: chỉ enqueue CSS khi cần. Ví dụ trong functions.php:

// Chỉ tải WooCommerce CSS trên trang shop
if ( ! function_exists( 'is_woocommerce' ) ) {
    return;
}
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
// Sau đó enqueue CSS tuỳ chỉnh chỉ trên trang WC
add_action( 'wp_enqueue_scripts', 'my_wc_styles' );
function my_wc_styles() {
    if ( is_woocommerce() || is_cart() || is_checkout() ) {
        wp_enqueue_style( 'my-wc', get_template_directory_uri() . '/css/wc.css' );
    }
}

Bước 4 — Quy tắc ngoại lệ và safelist

PurgeCSS và WP Rocket hoạt động chặt — đôi khi xóa nhầm class được thêm động qua JavaScript. Cần safelist để giữ lại những class này.

Class cần safelist phổ biến

• Class trạng thái: .active, .open, .show, .hidden, .is-loading.
• WordPress động: .wp-, .wc-, .menu-item-, .post-, .page-.
• Class thêm bằng JS: .modal-open, .has-tooltip, .scrolled.
• Class animation: .fade-in, .slide-up, .animate-.
• Kiểm tra dữ liệu nhập form: .invalid, .valid, .has-error.

Safelist bằng regex

safelist: {
  standard: ['active', 'open', 'modal-open'],
  deep: [/^wp-/, /^wc-/, /^menu-item/, /^post-/, /^page-/],
  greedy: [/^has-/, /^is-/, /^fade/, /^slide/, /^animate-/],
};

Phát hiện class động bị xóa nhầm

Sau khi bật Remove Unused CSS, test kỹ từng tính năng động: modal, tooltip, slider, filter AJAX, form validation. Mở Console F12 — nếu class không tìm thấy trong CSS đã tối ưu, thêm vào safelist.

Bước 5 — Đo kết quả trước/sau

Đo thực tế bằng DevTools tab Network trước và sau khi bật Remove Unused CSS. Mức giảm phụ thuộc vào theme và mức độ CSS không dùng ban đầu — theme nặng sẽ thấy cải thiện rõ hơn.

Cách đo trước/sau

1. Mở DevTools → tab Network → lọc CSS.
2. Reload trang → ghi lại tổng Transfer Size của CSS.
3. Bật Remove Unused CSS → xóa cache → reload lại.
4. So sánh Transfer Size — tính % giảm thực tế.
5. Chạy PSI trước/sau để xem tác động lên FCP và điểm tổng thể.

Cải thiện kỳ vọng theo loại theme

• Theme page builder nặng (Avada, Divi): CSS ban đầu 300-500KB, thường còn 80-150KB sau tối ưu.
• Theme nhẹ (GeneratePress, Blocksy): CSS ban đầu 50-100KB, cải thiện ít hơn nhưng site đã nhẹ.
• Bootstrap full bundle: 150KB → 15-25KB tùy số component thực sự dùng.

Checklist loại bỏ CSS không dùng cho shop VN

1. Audit Coverage trên trang sản phẩm bán chạy — không chỉ trang chủ.
2. Xác định file CSS nào chiếm tỷ lệ không dùng cao nhất — ưu tiên xử lý đó trước.
3. Với site có build pipeline: cấu hình PurgeCSS trong PostCSS.
4. Với WordPress không build: dùng WP Rocket Remove Unused CSS hoặc Asset CleanUp.
5. Đặt safelist cho class WordPress/WooCommerce động trước khi kích hoạt.
6. Test kỹ modal, dropdown, AJAX filter, checkout sau khi bật.
7. Kết hợp tải CSS có điều kiện: WooCommerce CSS chỉ tải trên trang shop.
8. Cân nhắc thay FontAwesome bằng SVG inline nếu chỉ dùng ít icon.
9. Đo Coverage lại sau khi tối ưu — xác nhận tỷ lệ không dùng đã giảm.
10. Kết hợp với nén JS/CSS để giảm thêm dung lượng.

Bài liên quan trong cluster Performance

• Critical CSS — inline CSS quan trọng phần đầu trang
• Nén JS/CSS 2026 — hướng dẫn đầy đủ
• Tree shaking — loại JS code không dùng
• FCP vs LCP — phân biệt và tối ưu
• Core Web Vitals 2026 — tổng quan

Câu hỏi thường gặp

Cần hỗ trợ tối ưu CSS và cải thiện hiệu năng toàn site? Xem dịch vụ tối ưu hiệu năng của Web22.