Query String là gì? Cách remove Query Strings from Static Resources trong WordPress

Query string (chuỗi truy vấn) là phần đằng sau của URLs bắt đầu bằng ? hoặc &.  Trong khi đó Static resources (như là JavaScript và CSS) thường được nhớ tạm bằng proxies hoặc CDNs. Khi lập trình viên tạo thay đổi, nó không được render ngay lập tức vì hiệu ứng caching, vì vậy query strings cần được thêm vào để xử lý vấn đề này. Những chuỗi này không được nhớ tạm, vì vậy, cập nhật mới của lập trình viên sẽ được thể hiện ngay lập tức. Tuy nhiên, nó sẽ tăng thời gian tải trang lên. Các công cụ tối ưu website thường khuyên nên xóa các chuỗi truy vấn này (remove query strings from static resources) để tăng thời gian tải trang. Đặc biệt nó cũng mang lại rất nhiều lợi ích cho WordPress site.

Remove query strings from static resources sẽ kích hoạt caching trên proxy servers, vì vậy làm tăng tốc website WordPress. CSS và JavasScript sẽ tạo ít truy vấn tới server hơn, giảm thiểu tài nguyên cần dùng của WordPress site. Nó cũng sẽ giúp bạn tối ưu SEO, về cơ bản, WordPress site càng được tối ưu bao nhiêu, Google sẽ càng xem trọng site đó bấy nhiêu.

Một số bất lợi của việc loại bỏ query string trong WordPress có thể được xử lý bằng cách quản lý cache, chúng tôi cũng sẽ chỉ bạn về vấn đề này trong loạt bài hướng dẫn về tối ưu WordPress.

Bạn cần chuẩn bị gì?

Trước khi bắt đầu, bạn cần chuẩn bị:

• Truy cập vào FTP của host bằng File Manager hoặc FTP client
• Truy cập vào trang WordPress Admin Panel

Query String là gì?

Để giải thích rõ hơn query string là gì, bạn hãy xem qua ví dụ của một địa chỉ URL như sau:

https://www.hostinger.vn/search.html?id=1&q=huong-dan

Như đã nói ở trên, phần đuôi bắt đầu từ ? hoặc & trong URL trên chính là Query String. Nó gọi là chuỗi truy vấn vì ta sẽ đưa một chuỗi vào ở dạng key=value để tải dữ liệu lên server. Phương pháp này thường được gọi là phương pháp Get .Trong PHP, chuỗi truy vấn sẽ được lưu trong $_GET, key là khóa trước dấu = và value là phần phía sau dấu =.

Cũng cùng ví dụ URL trên, nếu ta dùng echo để lấy lại dữ liệu:

echo $_GET['id']; 
echo $_GET['q'];

Kết quả lần lượt sẽ là 1 và huong-dan

Sau khi đã hiểu Query String là, các bạn hãy cùng chúng tôi bắt đầu tìm hiểu cách remove query strings from static resources (Xóa chuỗi truy vấn từ static resources)

Bước 1 — Phân tích website

Ở bước này, chúng tôi sẽ sử dụng GTMetrix. Sau đó phân tích WordPress site, kết quả như sau:

Tùy vào theme WordPress của bạn, kích thướng website, và những yếu tố khác, số lượng file CSS và JavaScript có thể khác nhau. Mỗi lần khách truy cập vao website, browswer sẽ yêu cầu để lấy CSS, JavaScript và những nội dung tĩnh khác. Việc này tăng lượng truy vấn lên server và sẽ mất thời gian để tải. Nếu bạn sử dụng Content Delivery Network, browser caching hoặc WordPress cache plugins, file của bạn có thể sẽ không được cache vì file deliver chậm, vì vậy, xóa chuỗi sẽ tăng tốc WordPress site và giảm thiểu tài nguyên sử dụng cùng một thời điểm.

Bước 2 — Remove query strings from static resources trong WordPress

Có nhiều cách khác nhau để xóa chuỗi truy vấn một cách hiệu quả trong WordPress.

Cách 1 – Remove query strings from static resources (CSS, JavaScript) bằng WordPress plugins

Plugin WordPress hiệu quả nhất để remove query strings from static resources là  Speed Booster Pack

Sau khi cài  Speed Booster Pack vào WordPress, chuyển tới mục Settings của plugin.

Nhấn vào nút Defer parsing of javascript files và nhấn nút Save Changes

Bạn cũng có thể dùng các plugin khác như là Remove Query Strings From Static Resources hoặc Query Strings Remover , đều có thể xóa query string được.

Cách 2 – Remove query strings from static resources (CSS, JavaScript) trong WordPress bằng functions.php

QUAN TRỌNG! Hãy chắc rằng bạn đã lưu lại file functions.php trước khi thực hiện bất kỳ thay đổi nào.

Query strings có thể được xóa khỏi WordPress bằng cách thêm dòng này vào cuối file functions.php đặt trong thư mục wp-includes:

// Remove query string from static files
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 );

Trong vài trường hợp (tùy vào cấu hình WordPress của bạn) mã nguồn này có thể gây lỗi 500 Internal Server Error. Nếu vậy thì bạn chỉ cần dùng Bước 1 là được.

Giải quyết vấn đề gây ra bởi việc remove query string trong WordPress

Quản lý cache WordPress hiệu quả sẽ giúp bạn đưa files nhanh nhất tới tất cả của khách truy cập của bạn mà không gây bất kỳ lỗi nào. Nếu bạn đang sử dụng WordPress caching plugins (tiếng Anh), bạn chỉ cần xóa cache WordPress sau khi thực hiện. Cách này sẽ xử lý các lỗi lặt vặt gây ra bởi việc xóa query string khỏi static resource trong WordPress.

Bước 3 — Kiểm tra lại kết quả

Để so sánh, đây là kết quả sau khi xóa query string từ phân tích của GTMetrix :

Lời kết

Trong bài hướng dẫn ngắn trên, chúng tôi đã giải thích cho bạn biết query string là gì, và làm thế nào để remove query strings from static resources, ví dụ như từ JavaScript và CSS. Việc này sẽ làm tăng hiệu năng tổng thể của WordPress lên nhanh hơn.