Loại bỏ query string của các tập tin CSS và JS trong WordPress mà không cần dùng plugin.
Nếu muốn đạt được điểm số cao trong các bài test tốc độ với Google PageSpeed Insights, GTmetrix, Pingdom thì một trong những việc quan trọng bạn cần làm là loại bỏ query string (chuỗi truy vấn) khỏi tất cả các tập tin CSS và JS của website WordPress. Có nhiều yếu tố khác nhau ảnh hưởng đến tổng thời gian tải trang của bạn và Google PageSpeed xem xét tất cả những yếu tố này. Tuy nhiên, theo GTmetrix, việc loại bỏ các chuỗi truy vấn từ các file mã nguồn tĩnh như CSS và JS có mức độ ưu tiên cao hơn khi kiểm tra tốc độ tải của một website.
Tham khảo thêm:
- Loại bỏ query strings trong WordPress với plugin WP Rocket
- Minify HTML, JavaScript và CSS trong WordPress không cần plugin
Query string là gì?
Query string (chuỗi truy vấn) là một phương thức mà các tập tin khác nhau thông qua các giá trị nội dung hoặc chứa thông tin chi tiết về các phiên bản. Chúng được sử dụng trong cả JS và CSS. Thực chất, query string là một trong những phương thức được sử dụng bởi các nhà phát triển để ngay lập tức cập nhật phiên bản mới.
Hãy tưởng tượng bạn là một nhà phát triển. Bạn đã tạo ra một plugin trong đó có vài tập tin CSS và JS. Bây giờ, nếu một ai đó cài đặt plugin của bạn và đồng thời sử dụng dịch vụ CDN thì các tập tin tĩnh (cả CSS và JS) sẽ được lưu trữ trong nhiều tuần, tháng hoặc thậm chí nhiều năm. Nếu bạn phát hành một bản cập nhật cho plugin, nó sẽ không được hiển thị cho đến khi tập tin lưu trữ hết hạn. Vì vậy, các nhà phát triển sử dụng các chuỗi truy vấn (không được lưu trữ bởi hầu hết các trình duyệt và các dịch vụ CDN).
Nói chung query string có thể hữu ích cho các nhà phát triển và lập trình viên. Nhưng trái lại, nó có ảnh hưởng lớn đến tốc độ tải website của bạn.
Loại bỏ query string không cần dùng plugin
Trong WordPress, bạn có thể làm điều này một cách vô cùng đơn giản. Tất cả những gì bạn cần làm thêm đoạn code snippet sau đây vào tập tin functions.php của theme mà bạn đang dùng. Các bạn cũng có thể sử dụng plugin Code Snippets để chèn nhằm tránh nó bị xóa mất khi cập nhật theme.
//* Loại bỏ Query String trong WordPress
function remove_cssjs_ver( $src ) {
if( strpos( $src, '?ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2 );
add_filter( 'script_loader_src', 'remove_cssjs_ver', 10, 2 );
Lưu lại và sử dụng Google PageSpeed Insights để kiểm tra kết quả:
- Trước khi thêm code:
- Sau khi thêm code:
Thật đơn giản phải không nào? Chúc các bạn thành công!
Bạn biết giải pháp khác đơn giản và hữu ích hơn để loại bỏ query string trong WordPress? Hãy chia sẻ nó với chúng tôi bằng cách sử dụng khung bình luận bên dưới.
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. :)
bác Hiếu cho em hỏi sao cho vào toàn trắng trang vậy bác
Mình đã update lại bài viết nhé. Bạn test thử xem sao. :)
Vẫn bị trắng trang nè bác
Bạn bật debug lên xem nó xung đột với plugin or hàm nào không?
Dear Hiếu, mình không hiểu chỗ lấy các tên js kia ở đâu? Bạn hướng dẫn mình rõ hơn một chút được không? Cảm ơn bạn nhiều.
Ban có thể view source hoặc xem thông qua các công cụ test tốc độ như Google PageSpeed Insights, Tools Pingdom, GTMetrix. :P
Thanks bạn. Tên của file js thì chỉ lấy tên ngay sau: .js phải không? Vd: entry-header.js hay cả đường dẫn url của file js đó. Mình cảm ơn.
Mình đã có hình minh họa cách lấy tên file JS trong bài viết rồi đó bạn. :P
http://sv1.upsieutoc.com/2017/03/23/Untitled27d42.png
Bệnh này xử lí thế nào hả a ơi :( tốc độ cùi quá buồn hết cả người huhu
Tham khảo bài viết “Tải không đồng bộ JavaScript trong WordPress mà không dùng plugin“. :P
Mình đã tham khảo về bài viết WP Super Cache và đã thực hiện theo các bước bạn hướng dẫn thì có cần làm những thao tác trong bài viết này không bạn?
Có chứ bạn. WP Super Cache đâu có tính năng loại bỏ query string như WP Rocket. :P
Hay thật, nhờ đoạn code này mà tốc độ load web của mình được cải thiện rõ rệt. Cảm ơn bạn.
// Loại bỏ Query String trong WordPress function remove_cssjs_ver( $src ) { if( strpos( $src, ‘?ver=’ ) ) $src = remove_query_arg( ‘ver’, $src ); return $src; } add_filter( ‘style_loader_src’, ‘remove_cssjs_ver’, 10, 2 ); add_filter( ‘script_loader_src’, ‘remove_cssjs_ver’, 10, 2 );
Warning: Cannot modify header information – headers already sent by (output started at /home/content/a2pewpnas01_data02/61/3968561/html/wp-content/themes/nominal/functions.php:453) in /home/content/a2pewpnas01_data02/61/3968561/html/wp-includes/pluggable.php on line 1179
Chết em rồi. em dùng host rẻ của godaddy không có fpt sao sửa lại như cũ đây a ơi. chỉ sửa đc bằng plugin File Manager mà giờ như này cứu e với @@
Ủa. Host của GoDaddy có FTP mà. :P
thôi a ạ. web e đi luôn rồi. không biết làm sao e cho cài lại từ đầu rồi. nghịch ngu không sao lưu trước coi như bài học :(
Thử tìm hiểu đi, lần sau còn vào host mà khắc phục. Nếu mình nhớ không nhầm thì GoDaddy có hỗ trợ FTP đó. :P
Wow, thật là tuyệt vời đó bạn.
Kiểm tra đạt 96 điểm trên tools.pingdom.com luôn, cảm ơn bạn nhiều nhé <3
Chúc mừng bạn. :)
Hay quá anh Hiếu ơi, em chèn xong từ 67 điểm nhảy lên 92 điểm luôn rồi.
Mà còn 2 cái dòng này : http://www.upsieutoc.com/image/4vIACC
Sao nó không xóa vậy anh ?
Code này chỉ áp dụng cho file JS, CSS chứ không áp dụng cho Web Font bạn nhé. Còn cái Gravatar kia thì không nằm trên host nên tất nhiên cũng sẽ không bị ảnh hưởng bởi code.
tập tin “functions.php” mới đúng chứ ạ
Mình đã cập nhật lại nhé. Cảm ơn bạn đã góp ý. :)
Không liên quan nhưng tại sao bạn phải thay đổi tên và email thế nhỉ? Trước đó bạn bình luận với tên và email khác mà. :P
Ok b, mình sẽ rút kinh nghiệm khi cmt gì sẽ chỉ dùng 1 email. Tại ko rành về WP nên muốn hỏi một số điều cho chắc ăn thôi
Việc bạn đổi email và tên sẽ khiến cho bình luận phải chờ phê duyệt mới được hiển thị thay vì bên mình chỉ cần phê duyệt lần đầu tiên và duy nhất. :P