Trong quá trình tối ưu hóa website WordPress, việc loại bỏ query string (chuỗi truy vấn) khỏi các tệp CSS và JavaScript là một bước quan trọng để cải thiện tốc độ tải trang và hiệu suất SEO. Query string là các chuỗi ký tự xuất hiện sau dấu hỏi (?) trong URL của các tệp tài nguyên như style.css?ver=1.0. Mặc dù chúng giúp trình duyệt xác định phiên bản của tệp, nhưng lại có thể gây trở ngại khi bạn cố gắng cache các tệp này trên các CDN (Content Delivery Network) hoặc proxy server.
Việc loại bỏ query string không chỉ giúp tăng tốc độ tải trang mà còn cải thiện điểm số trên các công cụ kiểm tra hiệu suất như Google PageSpeed Insights. Trong bài viết này, chúng ta sẽ tìm hiểu cách loại bỏ query string khỏi các tệp CSS và JavaScript trong WordPress mà không cần sử dụng plugin.
1. Hiểu Về Query String Trong WordPress
Query string thường được sử dụng trong WordPress để chỉ định phiên bản của các tệp CSS và JavaScript. Điều này giúp đảm bảo rằng trình duyệt không sử dụng tệp cũ từ bộ nhớ đệm khi bạn cập nhật phiên bản mới. Ví dụ, khi bạn cập nhật theme hoặc plugin, query string sẽ thay đổi từ style.css?ver=1.0 thành style.css?ver=1.1.
Tuy nhiên, query string có thể gây ra vấn đề trong việc cache vì nhiều CDN không lưu cache các tệp có chứa query string. Điều này có thể làm chậm tốc độ tải trang của bạn, đặc biệt là đối với các trang web có lưu lượng truy cập cao.
2. Lợi Ích Của Việc Loại Bỏ Query String
Cải Thiện Hiệu Suất Cache: Các CDN và proxy server sẽ dễ dàng lưu cache các tệp CSS và JavaScript của bạn mà không bị cản trở bởi query string.
Tăng Tốc Độ Tải Trang: Việc không có query string giúp trình duyệt dễ dàng cache các tệp tĩnh, từ đó cải thiện tốc độ tải trang.
Tối Ưu SEO: Trang web nhanh hơn đồng nghĩa với việc cải thiện thứ hạng trên các công cụ tìm kiếm, vì tốc độ tải trang là một yếu tố quan trọng trong SEO.
3. Cách Loại Bỏ Query String Bằng Cách Chỉnh Sửa File functions.php
Để loại bỏ query string khỏi các tệp CSS và JavaScript trong WordPress, bạn có thể thêm đoạn mã sau vào file functions.php của theme đang sử dụng. Đây là phương pháp an toàn và không đòi hỏi bạn phải cài đặt bất kỳ plugin nào.
function remove_query_strings( $src ) {
if( strpos( $src, '?ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_query_strings', 10, 2 );
add_filter( 'script_loader_src', 'remove_query_strings', 10, 2 );Giải Thích Mã Nguồn:
remove_query_strings($src): Đây là hàm chính được sử dụng để loại bỏ query string. Nó kiểm tra xem URL của tệp có chứa ?ver= không, và nếu có, nó sẽ loại bỏ chuỗi đó.
add_filter(‘style_loader_src’, ‘remove_query_strings’, 10, 2): Hàm này thêm filter để áp dụng remove_query_strings vào các tệp CSS.
add_filter(‘script_loader_src’, ‘remove_query_strings’, 10, 2): Tương tự như trên nhưng được áp dụng cho các tệp JavaScript.
4. Kiểm Tra Kết Quả
Sau khi thêm đoạn mã trên, hãy kiểm tra lại trang web của bạn để đảm bảo rằng query string đã được loại bỏ khỏi các tệp CSS và JavaScript. Bạn có thể sử dụng các công cụ như GTmetrix, Pingdom, hoặc Google PageSpeed Insights để kiểm tra.
5. Lưu Ý Khi Cập Nhật Theme
Vì đoạn mã được thêm vào file functions.php, bạn cần lưu ý rằng mỗi khi cập nhật theme, file này có thể bị ghi đè và mất đoạn mã trên. Để tránh điều này, bạn nên tạo một child theme và thêm đoạn mã vào file functions.php của child theme.
6. Giải Pháp Khác Không Dùng Plugin
Ngoài cách thêm mã vào functions.php, bạn cũng có thể sử dụng file .htaccess để loại bỏ query string. Tuy nhiên, phương pháp này yêu cầu hiểu biết về cấu trúc của file .htaccess và có thể không phù hợp với mọi người dùng.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{QUERY_STRING} ^ver= [NC]
RewriteRule ^(.*)$ /$1? [R=301,L]
</IfModule>Đoạn mã này sẽ kiểm tra xem query string có chứa ver hay không và loại bỏ nó.
Kết Luận
Loại bỏ query string khỏi các tệp CSS và JavaScript trong WordPress là một cách hiệu quả để tăng tốc độ tải trang và cải thiện hiệu suất SEO. Bằng cách thêm một vài dòng mã vào file functions.php, bạn có thể dễ dàng đạt được điều này mà không cần sử dụng plugin. Hãy nhớ kiểm tra kết quả và đảm bảo rằng trang web của bạn hoạt động tốt sau khi thực hiện thay đổi.
Kết nối với web designer Lê Thành Nam
