Cách loại global style nội tuyến trong WordPress

Trong series tùy chỉnh cấu trúc core WordPress từ trước đến nay, đây chắc chắn là thủ thuật mang lại hiệu suất cao nhất với rủi ro thấp nhất dành cho các website sử dụng giao diện truyền thống (Classic Theme).

Kể từ phiên bản 5.9, WordPress bắt đầu chèn một lượng lớn mã CSS nội tuyến (Global Styles) và SVG (Duotone Filters) vào thẳng thẻ <head> và <body> của mọi trang. Bước sang năm 2026 (với các phiên bản WordPress 6.x), tính năng Full Site Editing (FSE) càng phát triển thì khối lượng mã nội tuyến này càng phình to khủng khiếp, chứa vô số các biến CSS (CSS Variables) để kiểm soát màu sắc, khoảng cách, và typography cho các Block Theme.

Bạn có thể tìm hiểu thêm về tính năng gốc tại: Coloring Your Images With Duotone Filters.

Vấn đề ở đây là gì?

Nếu bạn đang sử dụng một Classic Theme (như Flatsome, GeneratePress, Astra bản cũ…) hoặc sử dụng Page Builder (như Elementor), website của bạn đã có hệ thống CSS riêng. Khối lượng Global Styles của WordPress lúc này trở thành 100% rác thừa. Việc tải hàng trăm dòng mã CSS và SVG vô dụng này trên mỗi lượt truy cập sẽ làm tăng dung lượng file HTML, kéo dài thời gian phân tích DOM của trình duyệt, ảnh hưởng trực tiếp đến chỉ số FCP và TTFB.

Nếu bạn không sử dụng Block Theme, không có lý do gì để bạn giữ lại đống mã thừa này.

Trong ví dụ minh họa trên, việc loại bỏ đã giúp giảm file HTML từ 26,4kB xuống còn 24,7kB (giảm 1,7kB sau khi đã nén Gzip/Brotli). Trong điều kiện mã nguồn thực tế chưa nén, việc tắt Global Styles có thể giúp bạn dọn dẹp hàng chục kB mã thừa.

Đoạn code tắt Global Styles an toàn (Cập nhật 2026)

Để việc loại bỏ diễn ra an toàn và không gây lỗi cho các website lỡ dùng Block Theme, mình đã nâng cấp đoạn code này. Nó sẽ tự động kiểm tra: Nếu bạn dùng Block Theme (FSE), nó sẽ không can thiệp. Nếu bạn dùng Classic Theme, nó sẽ quét sạch Global Styles.

Bạn chỉ cần sao chép đoạn mã dưới đây và dán vào file functions.php của Theme (Khuyên dùng Child Theme) đang sử dụng:

/**
 * Loại bỏ Global Styles (CSS & SVG) - Tối ưu HTML cho năm 2026
 * Tự động vô hiệu hóa lệnh nếu website đang sử dụng Block Themes (FSE)
 */
add_action( 'after_setup_theme', 'wptangtoc_remove_global_styles_2026' );
function wptangtoc_remove_global_styles_2026() {
    // An toàn: Không tắt nếu đang sử dụng Block Theme để tránh vỡ giao diện
    if ( function_exists( 'wp_is_block_theme' ) && wp_is_block_theme() ) {
        return;
    }

    // Gỡ bỏ mã CSS nội tuyến của Global Styles
    remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
    remove_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );
    
    // Gỡ bỏ mã SVG Filters (Duotone)
    remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
    remove_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' );
}

Lưu lại file, sau đó Purge Cache (Xóa bộ nhớ đệm máy chủ/plugin) và ra ngoài trang chủ nhấn Ctrl + U (View Page Source) để kiểm tra thành quả.

Nếu bạn thấy các thẻ <style id="global-styles-inline-css"> và cụm SVG ở ngay dưới thẻ <body> đã biến mất hoàn toàn mà giao diện website vẫn hiển thị bình thường, xin chúc mừng, bạn vừa giúp HTML của website nhẹ và load nhanh hơn rất nhiều!