Cách remove query strings from static resources trong WordPress

WordPress Tối ưu trang web

Cách remove query strings from static resources trong WordPress

Trong bài này, chúng tôi sẽ giải thích cách remove query strings from static resources trong WordPress. Bằng cách làm này, bạn sẽ tăng tốc trang web & tăng cường thử nghiệm cho khách truy cập.

Remove query strings from static resources sẽ kích hoạt caching trên proxy servers, chính vì vậy làm tăng tốc trang web WordPress. CSS & JavasScript sẽ tạo ít truy vấn tới server hơn, giảm bớt 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ăn bản, WordPress site càng được tối ưu bao nhiêu, Google sẽ càng xem trọng site đó từng ấy.

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

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

Trước khi khởi đầu, bạn cần chuẩn bị:

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

Query String là gì?

Query string (chuỗi truy vấn) là phần đằng sau của URLs khởi đầu bằng ? hoặc &.  Trong lúc đó Static resources (như là JavaScript & CSS) thường được nhớ tạm bằng proxies hoặc CDNs. Khi lập trình viên tạo biến đổi, nó không được render ngay mau lẹ vì hiệu ứng caching. Chính vì thế query strings cần được thêm vào để giải quyết vấn đề này. Query string không được nhớ tạm, chính vì vậy, update mới của lập trình viên sẽ được trổ tài ngay mau lẹ.

Để giải thích rõ hơn query string là gì, bạn hãy đọc qua chẳng hạn 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 khởi nguồn từ ? hoặc & trong URL trên chính là Query String. Nó gọi là chuỗi truy vấn vì ta sẽ mang một chuỗi vào ở dạng key=value để tải dữ liệu lên server. Bí quyết này thường được gọi là mẹo Get .Trong PHP, chuỗi truy vấn sẽ được lưu trong $_GET, key là khóa trước dấu = & value là phần phía sau dấu =.

Cũng cùng chẳng hạn 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 & huong-dan

Xem Thêm  Mã màu xám đậm - mã hex cho màu xám đậm

Sau thời điểm đã hiểu Query String là gì, hãy cùng tìm tòi tại sao phải xóa nó ra khỏi static resources

Tại sao cần remove query strings?

Query strings thường chỉ trọng yếu so với bài viết động vì các tài sản như: multimedia, CSS, JavaScript files, biến đổi thường xuyên hơn là tài nguyên tĩnh. Chính vì thế chúng cần được chỉ định để tránh các lỗi caching.

Nếu có static resources, bạn không cần lập query strings trên đó. Đặt query string trên static resource sẽ chặn việc website server được cache data, chính vì vậy làm trang web chậm hơn.

& bạn đừng quên là trang web chậm có thể giảm SEO & tác động xấu đến thử nghiệm người dùng.

Chính vì thế các dụng cụ tối ưu trang web 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 tạo nên rất là nhiều lợi nhuận cho WordPress site.

Sau thời điểm đã hiểu nguyên nhân, giờ hãy cùng chúng tôi khởi đầu tìm tòi cách remove query strings from static resources (Xóa chuỗi truy vấn từ static resources).

Remove query strings from static resources trong WordPress

Bước 1 — Nghiên cứu trang web

Ở ở giai đoạn này, chúng tôi sẽ sử dụng GTMetrix. Sau đó nghiên cứu WordPress site, kết quả như sau:remove query strings from static resources

Tùy thuộc theme WordPress của các bạn, kích thướng trang web, & những yếu tố khác, số lượng file CSS & JavaScript có thể khác nhau. Mỗi lần khách truy cập vao trang web, browswer sẽ yêu cầu để lấy CSS, JavaScript & những bài viết tĩnh khác. Việc này tăng lượng truy vấn lên server & 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 các bạn có thể sẽ không được cache vì file deliver chậm, chính vì vậy, xóa chuỗi sẽ tăng tốc WordPress site & giảm bớt tài nguyên sử dụng cùng 1 lúc.

Xem Thêm  Nút CSS căn giữa - cách căn giữa nút css

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.

Trọng yếu: Chúng tôi mong muốn nhắc bạn cẩn thận khi sửa code. Tốt đặc biệt là nên backup trước để dự phòng nguy hiểm.

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

Nó là plugin đa năng giúp bạn tăng vận tốc load trang web. Một trong số các chức năng của plugin đó là remove query string from static resource.

  1. Mở WordPress admin lên, chuyển tới Plugins -> Add New. Tìm Speed Booster Pack, rồi seting & kích hoạt nó.
  2. Chuyển tới list Speed Booster rồi kích hoạt Remove query Strings trong tab General. Bạn cũng có thể kích hoạt những tùy chọn tối ưu khác nếu mong muốn. Bấm vào nút Save Changes để ứng dụng.
    cách remove query strings from static resources bằng Speed Booster Pack

Để chặn WordPress site không tạo query string nữa, bạn còn tồn tại thể dùng W3 Total Cache.

  1. Setup & kích hoạt W3 Total Cache. Vào trang seting của nó & chọn list Performance.
  2. Chọn Browser Cache rồi đánh dấu vào ô Prevent caching of objects after settings change. Đừng quên nhấn nút Save all settings sau khoảng thời gian hoàn tất
    chặn query strings bằng cách dùng W3 Total Cache

Rất tốt, giờ bạn đã remove query strings from static resource rồi đấy.

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

QUAN TRỌNG! Hãy chắc nịch bạn đã cất giữ file functions.php trước khi thực hiện bất kỳ biến đổ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 theo cấu hình WordPress của các 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.

Xem Thêm  Luỹ thừa Python: Sử dụng Python để nâng số lên thành sức mạnh • dữ liệu - hàm mũ tự nhiên trong python

Khắc phục vấn đề gây ra bởi việc remove query string trong WordPress

Làm chủ cache WordPress hiệu quả sẽ giúp bạn mang files nhanh nhất tới toàn bộ của khách truy cập của các bạn mà không gây bất kỳ lỗi nào. Nếu bạn đang sử dụng WordPress cache plugin, bạn chỉ cần xóa cache WordPress sau khoảng thời gian thực hiện. Cách này sẽ giải quyết các lỗi vặt gây ra bởi việc xóa query string khỏi static resource trong WordPress.

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

Để so sánh, đây là kết quả sau khoảng thời gian xóa query string từ nghiên cứu của GTMetrix :sau khi xóa chuỗi truy vấn

Lời kết

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

Tài nguyên động (dynamic resource) sử dụng query strings để giúp website servers định danh các phiên bản tài sản khác nhau.

Chúng có thể chặn trang web không được cache nữa, làm nó tải chậm hơn. Chính vì thế chúng tôi khuyên loại bỏ query string khỏi bài viết tĩnh để tránh lỗi chậm website xảy ra trong tương lai.

Tóm lại, đây là cách remove query strings from static resources trong WordPress:

  • Chỉnh file functions.php — tìm đến file functions.php trong Appearance -> Theme Editor -> Theme Functions. Chèn dòng code xóa query strings ở trên vào trong functions.php
  • Sử dụng plugins — cài Speed Booster Pack rồi kích hoạt Remove query strings từ tab General. Sử dụng thêm plugin W3 Total Cache , vàoBrowser Cache list & chọn Prevent caching of objects after settings change.

Author

Hai ₲.

Hải ₲. là Chuyên Viên làm chủ, vận hành các dịch vụ trang web. Anh có dày dặn kinh nghiệm về VPS, Host, technical SEO, CMS. Đặc biệt yêu thích WordPress & đã dùng nó hơn 5 năm nay. Sở thích của anh là đọc, viết blog, đi du lịch & tư vấn cho các bạn trẻ khởi nghiệp.

Viết một bình luận