How to Remove Query Strings in WordPress?

WordPress is a content management system that helps to assemble various resources and present a beautiful layout in the browser. It needs core WordPress software, theme and plugins to make a simple WordPress website. These items in turn contains source HTML, PHP, CSS and JavaScript files. Developers used to maintain versioning of these source files by adding a query string at the end of the URL. Though it helps developers, it can create lot of problems for website owners in terms of speed and security. In this article, we will explore what are query strings in detail, how it can impact your site and how to remove query string in WordPress.     

Where are Query Strings Used?

Query strings are used in two major ways – frontend and backend.

• Frontend – you can find query strings in ecommerce websites like Amazon for searching products. Similarly, WordPress forum websites use query string to serve dynamic content for particular user session.
• Backend – theme and plugin developers in WordPress use query strings in CSS and JS files for versioning. For example, if you Jetpack plugin version 10, the related CSS and JS files loading in the backend will have query strings after the URLs like /?v=10.0.

Frontend – Using Query Strings Dynamically with Slug

A standard post or page URL in WordPress contains domain name and slug like below:

https://www.webnots.com/this-is-my-slug/

However, you can append some additional parameters in the URL after a question mark symbol in URL. For example, the below URL will search the given string in WordPress site and show the results.

https://www.webnots.com/?s=search-string

These parameters are called query strings and is possible to use multiple parameters in single URL for getting desired results. Below is the pictorial representation of how a query string in a WordPress URL will look like.

Generally, using query string with slug is needed to achieve functions like searching using default WordPress search, product searches in ecommerce websites and serving dynamic content in forum websites. We are not discussing use of query strings dynamically with slug in this article.

Backend – Using Query Strings with Static Resources

As mentioned, developers use query strings to keep track of the changes and release new version of the plugin or theme. You can easily view query strings in CSS and JS by looking at the source code of your WordPress site.

As you can see the CSS and JS files are having version number at the end which are the query strings. In this article, we primarily discuss the query strings used in the backend CSS and JS files.

Why You Should Remove Query Strings in WordPress?

Though query strings are useful for developers, you will have the following problems:

• Earlier days browsers were not caching static files with query string in the URL. Due to this fact, each time these files are requested from origin web server causing delay in page loading speed. That time, remove query strings was one of the problems you would frequently see in Google PageSpeed Insights and other speed measurement tools. However, Google Chrome and other browsers will cache based on the cache header present on the website and follow query strings. We still recommend removing query strings since some CDN and proxy servers can’t cache file URLs with query strings.
• Besides caching, these query strings can be vulnerable to security attacks, enabling hackers to gather sensitive information such as login credentials, tokens, database details, and much more. For example, a plugin installed on your site might had a security problem. The developer released a new version to patch up the issue and disclosed the details publicly on their site. If you did not immediately update the plugin, any hacker can view the source code of your site and understand you are still using the old plugin version from the query strings of CSS and JS files.

Removing query strings mitigates such vulnerabilities and enables browser caching of static files. This will protect as well as improve the performance of your website. Since page speed is a critical for good ranking in Google, you should remove the query strings from statis files on your WordPress site.

How to Remove Query Strings in WordPress?

In this article, we will look at few different ways to remove query strings in WordPress:

1. Remove query strings with a plugin
2. Manually remove query strings without a plugin

Remove Query Strings with Plugin

There are several free plugins you can use to remove query strings in WordPress. These plugins can also help to speed up your site by performing a variety of activities. Some of the most popular plugins include:

• W3 Total Cache
• WP Performance Score Booster
• Hummingbird Plugin
• Using SG Optimizer for SiteGround users

1. Remove Query Strings with W3 Total Cache

W3 Total Cache plugin is a free tool for caching websites and reducing site loading time. The plugin also provides a query string removal option for WordPress.

• To get started, first install and activate the plugin on your site.
• Go to “Performance” menu from the sidebar and select the “Browser Cache” option.
• Scroll down and check “Remove query strings from static resources’ checkbox.
• Finally, click “Save All Settings” button at the bottom to apply changes.

You can check out our complete guide on how to properly setup W3 Total Cache plugin in your site.

2. Remove Query Strings with WP Performance Score Booster

WP Performance Score Booster is another free plugin that enables you to perform various actions on your website. You can cache your website, compress it with GZIP, and remove query strings. The plugin is simple to set up – just install, activate it to enable the functionality.

• To remove query strings using this plugin, navigate to your WordPress dashboard and click on the “Settings” menu.
• Select the “WP Performance Score Booster” option.
• Turn on the “Remove query strings from static content” option.
• When done, click the “Save Changes” button to apply your new configurations as shown in the image below.

3. Remove Query Strings with Hummingbird Plugin

Hummingbird is another plugin that can be used to remove query strings in WordPress. This plugin checks your website for issues slowing it down and generates a detailed performance report for you.

• To use the plugin, install it and activate it from the WordPress plugin window.
• On the left side of your dashboard, click the “Hummingbird” menu, which was added when you activated the plugin.
• Select the “Advanced Tools” option from the drop-down menu.
• Turn on the button “Remove query strings from my assets” on the “General” tab.
• Save your changes by clicking on the “Save changes” button at the bottom of the window to apply the new configurations.

4. SG Optimizer Plugin for SiteGround

If you are using SiteGround hosting, it comes pre-installed with SG Optimizer plugin. Go to “SG Optimizer” menu and then click on “Frontend Optimization” tab. Scroll down and disable the option that says, “Remove Query Strings From Static Resources”.

Note: As mentioned, modern browsers and page speed testing tools do not work based on query strings. Hence, many premium plugins like WP Rocket and Perfmatters removed the option for removing query string from static resource.

Manually Remove Query Strings with Code

Alternatively, if you don’t want to use any additional plugins on your website, you can opt to remove query strings manually using a PHP code. You can insert a code block in your theme’s functions.php file to achieve this.

• Click on the “Appearance” menu and select “Theme Editor” option in your WordPress admin panel.
• Select your active theme and click on the “Theme Functions (functios.php)” file at the right-hand side of the window.

• Paste the code below at the bottom of the file.

function removeQueryStrings( $src ) {
 if( strpos( $src, '?ver=' ) )
 $src = remove_query_arg( 'ver', $src );
 return $src;
}
add_filter( 'style_loader_src', 'removeQueryStrings', 10, 2 );
add_filter( 'script_loader_src', 'removeQueryStrings', 10, 2 );

• When done, click the “Update File” button to apply your changes.

This method can be tricky at times as you might easily break your website. Though you can child theme, we recommend using “Code Snippets” plugin instead of editing functions.php file.

Add Code with Code Snippets Plugin

• To get started, install and activate the Code Snippets plugin.
• Locate the “Snippets” menu and select “Add New” to add a new snippet.

• On the window that appears, enter the title of new snippet and paste the code above in the “code section”. You can as well add a description if you like.

• When done, click the “Save changes and Activate” button at the bottom of the window to apply the code on your site.

Whether you use a plugin or manually inserting the code, make sure to clear your cache and test the page. You should not see any CSS and JS file URLs with version number in the source code.

Conclusion

Query strings can be useful for development purposes to maintain versioning. However, some servers can’t cache the files with query string and they can also be a security issue. If you want a quick and straightforward method, use any of the plugins listed above. Alternatively, you can use the code provided with or without a plugin.