Loại bỏ WordPress Global Styles giúp tăng tốc trang web

Từ phiên bản WordPress 5.9 trở đi, hệ thống tự động chèn một lượng lớn CSS và SVG vào mã nguồn HTML thông qua tính năng Global Styles. Tính năng này phục vụ cho trình soạn thảo khối (Gutenberg) và hỗ trợ khả năng tùy biến chủ đề, nhưng nếu bạn không sử dụng Block Editor, đây lại là phần dư thừa và gây ảnh hưởng đến hiệu năng tải trang.

Loại bỏ WordPress Global Styles giúp tăng tốc trang web

1. Tại sao nên loại bỏ Global Styles?

  • Giảm dung lượng HTML trả về
  • Loại bỏ CSS không sử dụng, giúp load nhanh hơn
  • Tránh xuất hiện các SVG, style inline không kiểm soát được

Khi bạn “View Source” một website WordPress hiện đại, bạn có thể sẽ thấy những đoạn mã dài như:

<style id='global-styles-inline-css'> ... </style>

Nếu bạn không cần các chức năng đó, hoàn toàn có thể tắt đi.

2. Cách vô hiệu hóa Global Styles

Chỉ cần thêm đoạn mã sau vào file functions.php trong theme bạn đang dùng:

/**
 * Disable Global Styles
 */
function wps_deregister_styles() {
    wp_dequeue_style('global-styles');
}
add_action('wp_enqueue_scripts', 'wps_deregister_styles', 100);

Lưu ý: nên đặt priority = 100 để chắc chắn đoạn mã được gọi sau các enqueue mặc định của WordPress.

3. Khi nào nên giữ lại?

Nếu bạn đang dùng theme full-site-editing, hoặc có sử dụng chức năng tuỳ biến màu sắc, font chữ qua giao diện Customizer (hoặc Editor của Gutenberg), bạn nên giữ lại Global Styles để tránh mất style.

Kết luận

Với các website thuần Classic Editor hoặc không tận dụng Gutenberg, việc loại bỏ Global Styles là bước tối ưu đơn giản nhưng mang lại hiệu quả đáng kể. Hãy cân nhắc áp dụng nếu bạn đang muốn giảm bloat và tăng tốc độ tải trang cho website WordPress của mình.

Bình luận


  • Không có bình luận.