Mình xin chia sẻ đến các bạn một vài đoạn code tối ưu hiệu suất cho theme Flatsome mà mình sưu tầm được. Các bạn có thể áp dụng cho dự án thiết kế website của mình nếu thích nhé.
Đây là Full code dành cho bạn, các bạn copy và cho vào trong file Functions.php của theme Flatsome-Child nhé!
// Tắt tải các tài nguyên CSS của WooCommerce trên các trang không liên quan
add_action('wp_enqueue_scripts', function() {
if (!is_shop() && !is_product() && !is_cart() && !is_checkout() && !is_product_category()) {
wp_dequeue_style('woocommerce-general');
wp_dequeue_style('woocommerce-layout');
wp_dequeue_style('woocommerce-smallscreen');
}
}, 100);
// Tối ưu tải CSS của theme Flatsome
add_filter('style_loader_tag', function($html, $handle) {
if ($handle === 'flatsome') {
$html = str_replace("rel='stylesheet'", "rel='stylesheet' media='print' onload=\"this.media='all'\"", $html);
}
return $html;
}, 10, 2);
// Tắt XML-RPC và Pingback
add_filter('xmlrpc_enabled', '__return_false');
add_filter('wp_headers', 'wptangtoc_remove_x_pingback');
add_filter('pings_open', '__return_false', 9999);
add_filter('pre_update_option_enable_xmlrpc', '__return_false');
add_filter('pre_option_enable_xmlrpc', '__return_zero');
function wptangtoc_remove_x_pingback($headers) {
unset($headers['X-Pingback'], $headers['x-pingback']);
return $headers;
}
// Xóa thông tin phiên bản WordPress
function wp_version_remove_version() {
return '';
}
add_filter('the_generator', 'wp_version_remove_version');
// Tắt trình chỉnh sửa Widget Block (Gutenberg)
add_filter('gutenberg_use_widgets_block_editor', '__return_false');
add_filter('use_widgets_block_editor', '__return_false');
// Xóa dấu chuyển đổi văn bản (wptexturize)
remove_filter('the_content', 'wptexturize');
remove_filter('the_excerpt', 'wptexturize');
remove_filter('comment_text', 'wptexturize');
remove_filter('the_title', 'wptexturize');
remove_filter('woocommerce_short_description', 'wptexturize');
1. Tắt tải các tài nguyên WooCommerce trên các trang không liên quan
Đoạn code này được thêm vào hook wp_enqueue_scripts, hook này được WordPress gọi khi tải các tài nguyên (scripts và styles) cho frontend.
add_action('wp_enqueue_scripts', function() {
if (!is_shop() && !is_product() && !is_cart() && !is_checkout() && !is_product_category()) {
wp_dequeue_style('woocommerce-general');
wp_dequeue_style('woocommerce-layout');
wp_dequeue_style('woocommerce-smallscreen');
}
}, 100);Kiểm tra nếu trang hiện tại không phải là trang cửa hàng (is_shop), trang sản phẩm (is_product), trang giỏ hàng (is_cart), trang thanh toán (is_checkout), hoặc trang danh mục sản phẩm (is_product_category).
Nếu điều kiện đúng (tức là không ở các trang WooCommerce), nó sẽ bỏ tải (wp_dequeue_style) ba tệp CSS của WooCommerce:
- woocommerce-general: CSS chính của WooCommerce.
- woocommerce-layout: CSS cho bố cục của WooCommerce.
- woocommerce-smallscreen: CSS dành cho giao diện responsive trên thiết bị di động.
Ưu tiên (priority): Hook được chạy với độ ưu tiên 100, đảm bảo chạy sau khi các tài nguyên của WooCommerce đã được xếp hàng (enqueue) bởi plugin.
Lợi ích: Tối ưu hóa tốc độ tải trang bằng cách loại bỏ các tệp CSS không cần thiết trên các trang không sử dụng tính năng WooCommerce, giảm yêu cầu HTTP và dung lượng tải.
2. Tối ưu tải CSS của theme Flatsome
Sử dụng filter style_loader_tag để thay đổi cách WordPress xuất thẻ <link> của CSS trong HTML.
add_filter('style_loader_tag', function($html, $handle) {
if ($handle === 'flatsome') {
$html = str_replace("rel='stylesheet'", "rel='stylesheet' media='print' onload=\"this.media='all'\"", $html);
}
return $html;
}, 10, 2);Kiểm tra nếu $handle (tên của stylesheet) là flatsome (thường là tên của CSS chính của theme Flatsome).
Nếu đúng, nó thay thế thuộc tính rel=’stylesheet’ trong thẻ <link> bằng rel=’stylesheet’ media=’print’ onload=”this.media=’all'”.
Kỹ thuật này được gọi là deferred CSS loading:
- Ban đầu, CSS được tải với media=’print’, nghĩa là trình duyệt sẽ tải CSS nhưng không áp dụng ngay (vì nó chỉ dành cho in ấn).
- Khi CSS tải xong, sự kiện onload sẽ đổi media=’all’, áp dụng CSS cho mọi thiết bị.
Lợi ích:
Giảm thời gian chặn hiển thị (render-blocking) của CSS, cải thiện tốc độ tải trang và điểm số Google PageSpeed.
Chỉ áp dụng cho file CSS của theme Flatsome, không ảnh hưởng đến các file CSS khác.
Ưu tiên: Filter chạy với độ ưu tiên 10 và nhận 2 tham số ($html, $handle).
Ví dụ tình huống sử dụng: Theme Flatsome thường có file CSS lớn, việc trì hoãn tải giúp cải thiện trải nghiệm người dùng và SEO.
3. Tắt XML-RPC và Pingback
Tắt hoàn toàn tính năng XML-RPC và pingback trong WordPress để tăng cường bảo mật và giảm nguy cơ bị tấn công.
add_filter('xmlrpc_enabled', '__return_false');
add_filter('wp_headers', 'wptangtoc_remove_x_pingback');
add_filter('pings_open', '__return_false', 9999);
add_filter('pre_update_option_enable_xmlrpc', '__return_false');
add_filter('pre_option_enable_xmlrpc', '__return_zero');
function wptangtoc_remove_x_pingback($headers) {
unset($headers['X-Pingback'], $headers['x-pingback']);
return $headers;
}Chức năng:
- add_filter(‘xmlrpc_enabled’, ‘__return_false’): Tắt hoàn toàn XML-RPC, một giao thức cho phép truy cập từ xa vào WordPress (ví dụ: qua ứng dụng di động hoặc dịch vụ bên thứ ba).
- add_filter(‘wp_headers’, ‘wptangtoc_remove_x_pingback’): Loại bỏ tiêu đề X-Pingback khỏi HTTP headers, ngăn các dịch vụ bên ngoài gửi pingback.
- add_filter(‘pings_open’, ‘__return_false’, 9999): Tắt tính năng pingback (thông báo khi có website khác liên kết đến bài viết của bạn) với độ ưu tiên cao (9999).
- add_filter(‘pre_update_option_enable_xmlrpc’, ‘__return_false’): Ngăn cập nhật tùy chọn bật XML-RPC trong cơ sở dữ liệu.
- add_filter(‘pre_option_enable_xmlrpc’, ‘__return_zero’): Đặt giá trị tùy chọn XML-RPC về 0 (tắt).
- Hàm wptangtoc_remove_x_pingback: Loại bỏ các tiêu đề liên quan đến pingback khỏi HTTP headers.
Lợi ích:
- XML-RPC và pingback thường bị khai thác để tấn công DDoS hoặc brute force. Tắt chúng giúp tăng cường bảo mật.
- Giảm các yêu cầu HTTP không cần thiết, cải thiện hiệu suất.
Lưu ý: Tắt XML-RPC có thể ảnh hưởng đến một số tính năng, như ứng dụng WordPress mobile hoặc Jetpack, nhưng nếu website không sử dụng các tính năng này, việc tắt là an toàn.
4. Xóa thông tin phiên bản WordPress
Loại bỏ thông tin phiên bản WordPress khỏi mã nguồn HTML và các kênh khác (như RSS, Atom).
function wp_version_remove_version() {
return '';
}
add_filter('the_generator', 'wp_version_remove_version');Chức năng:
Filter the_generator được WordPress sử dụng để thêm thẻ <meta name=”generator” content=”WordPress x.x.x”> vào HTML hoặc các định dạng khác.
Hàm wp_version_remove_version trả về chuỗi rỗng (”), khiến WordPress không xuất phiên bản.
Lợi ích:
Ẩn phiên bản WordPress để giảm nguy cơ bị tấn công nhắm vào các lỗ hổng cụ thể của phiên bản.
Tăng tính riêng tư và chuyên nghiệp cho website.
5. Tắt trình chỉnh sửa Widget Block (Gutenberg)
Tắt trình chỉnh sửa widget dựa trên block editor (Gutenberg) và quay lại sử dụng trình chỉnh sửa widget cổ điển.
add_filter( 'gutenberg_use_widgets_block_editor', '__return_false' );
add_filter( 'use_widgets_block_editor', '__return_false' );Chức năng:
Filter gutenberg_use_widgets_block_editor và use_widgets_block_editor kiểm soát việc sử dụng trình chỉnh sửa widget dạng block (được giới thiệu trong WordPress 5.8).
__return_false tắt trình chỉnh sửa block và khôi phục giao diện quản lý widget truyền thống.
Lợi ích:
Phù hợp với các website sử dụng theme hoặc plugin không tương thích tốt với trình chỉnh sửa block.
Cung cấp trải nghiệm quản lý widget quen thuộc cho người dùng thích giao diện cũ.
6. Xóa dấu chuyển đổi văn bản (wptexturize)
Tắt tính năng wptexturize, một hàm của WordPress tự động thay thế các ký tự văn bản (như dấu ngoặc kép, dấu gạch ngang) bằng các ký tự typographic (như dấu ngoặc kép thông minh, dấu gạch ngang dài).
remove_filter('the_content', 'wptexturize');
remove_filter('the_excerpt', 'wptexturize');
remove_filter('comment_text', 'wptexturize');
remove_filter('the_title', 'wptexturize');
remove_filter('woocommerce_short_description', 'wptexturize');Chức năng:
Hàm wptexturize được áp dụng mặc định cho các nội dung như:
the_content: Nội dung bài viết.
the_excerpt: Đoạn trích bài viết.
comment_text: Nội dung bình luận.
the_title: Tiêu đề bài viết.
woocommerce_short_description: Mô tả ngắn của sản phẩm WooCommerce.
remove_filter loại bỏ wptexturize khỏi các hook này, ngăn WordPress thay đổi ký tự.
Lợi ích:
Đảm bảo nội dung giữ nguyên định dạng gốc, tránh các vấn đề về hiển thị ký tự trong một số ngôn ngữ hoặc font chữ không hỗ trợ ký tự typographic.
Đặc biệt hữu ích khi làm việc với các ngôn ngữ không sử dụng dấu ngoặc kép thông minh hoặc khi cần xuất nội dung chính xác (ví dụ: code, ký tự đặc biệt).
./.
Cảm ơn các bạn đã theo dõi bài viết! Nếu thấy nội dung hữu ích và bạn đang cần thiết kế website chuyên nghiệp, hãy liên hệ với mình qua Zalo tại số 0962 682 434 để được tư vấn và hỗ trợ nhé!
