Vô hiệu hóa WordPress Global Styles (global-styles-inline-css và SVG filter) giúp tăng tốc website.
Nếu bạn chưa biết thì kể từ phiên bản 5.9.0, WordPress đã bổ sung thêm tính năng “Duotone Filters” nhằm cho phép người dùng sử dụng các bộ lọc màu với hình ảnh (xem chi tiết tại đây). Để tính năng này có thể hoạt động được, họ đã chèn thêm các đoạn code CSS và SVG vào mã nguồn website. Chúng có dung lượng khá lớn và sẽ gây ảnh hưởng tới tốc độ load của website. Trong trường hợp bạn không sử dụng Block Editor (Gutenberg) hoặc không sử dụng bộ lọc màu, tốt nhất bạn nên vô hiệu hóa WordPress Global Styles đi cho đỡ nặng web.
Tham khảo thêm:
- Hướng dẫn vô hiệu hóa Embed Script trong WordPress
- Loại bỏ Emoji để tăng tốc độ load cho website WordPress
WordPress Global Styles là gì?
Khi xem mã nguồn (view source) của các website sử dụng WordPress 5.9.0 trở lên, các bạn sẽ thấy các đoạn code như sau:
- CSS code (
global-styles-inline-css): nằm trước thẻ<body>, có độ dài 196 dòng.
- SVG code: nằm trước thẻ
</body>, có độ dài 115 dòng.
Chúng được gọi chung là WordPress Global Styles.
Vô hiệu hóa WordPress Global Styles trong theme Paradise
Nếu bạn đang sử dụng theme Paradise do WP Căn bản phát triển thì tất cả những gì các bạn cần làm là:
1. Cập nhật theme Paradise lên phiên bản 5.5.8 (phát hành ngày 08/06/2022) hoặc mới hơn.
2. Cập nhật WordPress lên phiên bản 5.9.1 hoặc mới hơn.
3. Truy cập Giao diện => Tùy biến => Tối ưu tốc độ => chuyển mục [Gutenberg] Gỡ bỏ Global Styles sang trạng thái Có rồi lưu lại.
4. Xóa cache website (nếu có) và kiểm tra kết quả.
Vô hiệu hóa WordPress Global Styles trong các theme khác
1. Chèn đoạn code sau đây vào trong file functions.php của theme hoặc child theme mà bạn đang sử dụng. Các bạn cũng có thể sử dụng plugin Code Snippets để chèn code nhằm tránh chúng bị xóa mất khi update theme.
- Đối với WordPress 5.9.1 hoặc mới hơn:
remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' ); remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
- Đối với WordPress 5.9.0:
remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' ); remove_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );
Nếu code bên trên không có tác dụng, hãy thử thay thế bằng đoạn code sau:
- Đối với WordPress 5.9.1 hoặc mới hơn:
function custom_wp_remove_global_css() {
remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
}
add_action( 'init', 'custom_wp_remove_global_css' );
- Đối với WordPress 5.9.0:
function custom_wp_remove_global_css() {
remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
remove_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );
}
add_action( 'init', 'custom_wp_remove_global_css' );
2. Xóa cache website (nếu có) và kiểm tra kết quả.
Thật đơn giản phải không nào? Chúc các bạn thành công!
Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)
Những nội dung vô cùng hữu ích về chủ đề tối ưu tốc độ wp, cảm ơn bác đã chia sẻ!
Thế nào để biết được code đã hoạt động hả ông bạn
Tất nhiên là xem mã nguồn của website rồi bạn. Ví dụ trên trình duyệt Google Chrome, click chuột phải vào giao diện website => chọn View page source. Nếu bạn đang cài plugin có tính năng nén CSS, HTML thì nên tạm thời tắt đi, nếu không sẽ hơi khó nhìn. :P