How to Remove Query Strings from Static Resources in WordPress

When it comes to WordPress performance, this question comes up quite a bit, and that is how to remove query strings from static resources. Your CSS and JavaScript files usually have the file version on the end of their URLs, such as domain.com/style.css?ver=4.6. Some servers and proxy servers are unable to cache query strings, even if a cache-control:public header is present.

By removing them, you can sometimes improve your caching. This will also fix that warning you might see in GTMetrix and Pingdom and called “Remove query strings from static resources.”

Please keep in mind that query strings are usually there for a reason. Versioning on files is used by WordPress developers to get around caching problems. For example, if they push out an update and change style.css from ?ver=4.6 to ?ver=4.7, it will be treated as a completely new URL and won’t be cached. If you remove the query strings and update a plugin, this could result in the cached version to continue serving. In some cases, this could break the front-end of your site until the cached resource expires or the cache is completely flushed.

Query strings also used for organization in development workflows.

Remove Query Strings from Static Resources

There are a couple different ways you can remove query strings, one is with a little code and another is with a WordPress plugin. If you are using a CDN to deliver your assets, this might not be required as some CDN providers actually have the ability to cache query strings. Check with both your web host and CDN provider prior to implementing the following to see if they can cache query strings. The Kinsta CDN does cache query strings.

1. Remove Query String from Static Resources with Code
2. Remove Query String from Static Resources with a Plugin

1. Remove Query Strings from Static Resources with Code

You can easily remove query strings from your assets with a few lines of code. After making a backup of your site, create a child theme and add the following to your child theme’s functions.php file.

function remove_query_strings() {
   if(!is_admin()) {
       add_filter('script_loader_src', 'remove_query_strings_split', 15);
       add_filter('style_loader_src', 'remove_query_strings_split', 15);
   }
}

function remove_query_strings_split($src){
   $output = preg_split("/(&ver|\?ver)/", $src);
   return $output[0];
}
add_action('init', 'remove_query_strings');

Important: Editing the source code of a WordPress theme could break your site if not done correctly. If you aren’t comfortable doing this, please check with a developer first. Or, you could also take advantage of the free Code Snippets plugin. This plugin will allow you to add the above code without having to worry if it will take your site down.

Simply create a new snippet and add the above code. Select “Only run on site front-end” and then save the snippet. Your query strings will then be gone! You might need to clear the cache on your WordPress site to see the changes take effect on the front-end.

With Query Strings (Before Code)

Here is an example of scripts loading with query strings.

Without Query Strings (After Code)

Here is an example of scripts after having removed query strings.

2. Remove Query String from Static Resources with a Plugin

An alternative to using code is to use a WordPress performance plugin that has this feature built in. The premium Perfmatters plugin (developed by a team member at Kinsta), allows you to remove query strings from static resources with a click of a button. It also enables you to easily implement other optimizations for your WordPress site, and works alongside your current caching plugin.

No More Query Strings

After using either of the above options you should no longer see a warning about query strings in website speed test tools such as GTMetrix or Pingdom.

Host your Static site for free with Kinsta’s Static site hosting and deploy your website directly to the edge.