Hướng dẫn global style css - phong cách toàn cầu css

Trong seria bài viết tùy chỉnh cấu trúc core từ trước mình chia sẻ đến giờ thì chắc đây là bài viết giá trị nhất về hiệu suất: rủi ro thấp nhưng lợi ích lại rất cao – tùy chỉnh cấu trúc core WordPress

Kể từ WordPress phiên bản 5.9 trở đi, mã css style nội tuyến bổ sung đã được thêm vào để cải thiện thiết kế duotone Filters (bổ sung thêm mã CSS và SVG).

Bạn có thể tìm hiểu cụ thể: Coloring Your Images With Duotone Filters là gì?

Hầu hết nhiều người trong chúng ta sẽ không sử dụng tính năng này bản thân mình làm nhiều dự án tăng tốc vẫn chưa thấy khách hàng nào có sử dụng tính năng này và vấn đề quan trọng là dù bạn có sử dụng tính năng này hay không thì wordpress cũng thêm 311 dòng code nội tuyến vào mỗi trang HTML của trang web WordPress của bạn.

196 dòng CSS được thêm vào trước thẻ. 115 dòng mã SVG được thêm vào trước thẻ.

Nếu bạn không sử dụng tính năng này thì không có lý do gì bạn không loại bỏ nó để website WordPress của bạn load nhanh hơn, giúp website của bạn nhẹ hơn.

Một ví dụ cơ bản 2 hình ảnh mình demo trên: giảm file HTML từ 26,4kB xuống còn 24,7kB tức giảm được 1,7kB trong điều kiện file html mình đã nén Gzip trong thị phạm này, nếu trong điều kiện chưa nén Gzip thì con số này còn lớn hơn rất nhiều.

Nhưng cho đến lúc đó, chúng tôi có một cách đơn giản để loại bỏ mã không cần thiết này.

add_action( 'after_setup_theme','wptangtoc_xoa_style_global_css');
function wptangtoc_xoa_style_global_css(){
remove_action('wp_enqueue_scripts', 'wp_enqueue_global_styles');
remove_action('wp_footer', 'wp_enqueue_global_styles', 1);
remove_action('wp_body_open', 'wp_global_styles_render_svg_filters');
remove_action('in_admin_header', 'wp_global_styles_render_svg_filters');
}

Bạn cho đoạn code này vào file functions.php của bạn.

Nếu bạn loại bỏ mà làm website bị lỗi tính năng này thì vui lòng xóa đoạn code này đi.

Chúc bạn thành công!

Reader Interactions

Vô hiệu hóa WordPress Global Styles (global-styles-inline-css và SVG filter) giúp tăng tốc website.

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

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ẻ , có độ dài 196 dòng.

• SVG code: nằm trước thẻ
  0, 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

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' );

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:

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!