Remove Query Strings From Static Resources

Remove Query Strings from Static Resources – 2 Methods

Remove Query Strings From Static Resources

Query strings are extra sets of characters appended to the URL of a WordPress site. A good example of these characters are “&” and “?”. While these characters in static resources can help facilitate cache busting and other dynamic features, they also slow down the site speed. And as far as SEO and user experience are concerned, loading speed is a huge factor. Remove query strings from static resources is one of the numerous ways to increase website speed.

In this post, we will dive a bit deeper into what query strings are all about. What’s more, you will get to learn how to removes the query strings, seamlessly.

In this article:

What Are Query Strings All About?

If you made a search on our website for the term “database”, you will see this in the URL

https://www.fixrunner.com/?s=database

The bolded text in the URL is what is referred to as a query string. 

Below, you can see another example. Here, you could see the query string to the static CSS resource (query strings from CSS), which indicates the CSS version.

/wp-includes/css/dashicons.min.css?ver=4.4.2

Now let’s explain what these strings are all about.

When a visitor comes to your website for the first time, your website’s static resources (CSS and Javascript files) are cached on the visitor’s browser.

If you make updates to your website, the changes won’t reflect immediately on the visitor’s browser. The reason is that the browser is still “seeing” the old CSS and Javascript files rather than the updated ones. 

Since query strings can’t be cached, adding them to your website’s static resources will solve this problem. That is to say, if a query string is added to a CSS or Javascript file, whenever a change is made to them, it will reflect immediately on a visitor’s browser.

Why Remove Query Strings

Head over to GTMetrix or Google pagespeed test and run a test on your website. Chances are, after the test GTMetrix will suggest that you remove query strings to improve WordPress performance. 

Query strings force your website to make requests to the server each time the website is loaded. This not only causes caching problems, it makes a website load slower.

So, in plain English, if you want your website to perform better, you have to find a way of removing query strings from static resources.

How to Remove Query Strings from Static Resources Easily

To remove query strings from static resources in WordPress, there are two ways you can go about it:

  • Adding a piece of code to the functions.php file
  • Using a plugin to remove.

Adding a Piece of Code

If you are a bit tech-savvy, we recommend this option.

Log into your WordPress dashboard. Navigate to Appearance >> Editor

query strings in theme editor

Next, click functions.php

theme functions in functions.php

At the top of the editor page, paste the following block of code:

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 );

Finally, scroll down and click the Update file button.

wordpress theme function remove query strings

The problem with this technique is that you might end up breaking your site if you don’t do it well. 

To mitigate this problem, you may use the Code Snippet plugin for this action. Basically, what the plugin does is to prevent a website from getting harmed even when a code is typed incorrectly into it.

Using WordPress Plugins

WordPress caching plugins help you control and manage WordPress’ caching issues, including query strings on static resources. 

Here are a few plugins you might want to try:

W3 Total Cache Plugin

w3 total cache

W3 Total Cach plugin happens to be one of the most popular caching plugins out there. It does more than just caching and minify javascript and CSS; removing query strings is also one of the things it can do. 

To use it, you will first have to install and activate it on your WordPress website. Next, navigate to Performance >> Browser Cache in plugin settings.

browser cache

Now, scroll down the browser cache page and uncheck the “Prevent caching of objects after settings change option. After that, check the “Remove query strings from static resources” option.

remove query strings from static resources in the plugin

Scroll down and Save all settings. And with that, you are done!

WP Performance Score Booster

wp performance score booster

This is yet another caching plugin and speed booster that does quite a good job. It handles cache related issues in WordPress seamlessly. Plus, everything can be done at the click of the button.

When you are done removing query strings from your website’s static resources, you might want to run a test once more on GTMetrix

WP Rocket

wp rocket plugin

This is a premium plugin that comes packed with a lot of features. In addition to removing query strings, it optimizes images for SEO and makes page caching pretty seamless.

Conclusion

In this post, we examined what query strings are all about, and why removing them is important. Additionally, we showed you how to wp remove query strings using a code or a plugin.

We hope you found this useful. If you did, kindly share. This guide should work with any WordPress theme, however, if you run into issues feel free to contact our WordPress Support team. 

For more step by step tutorials follow our WordPress blog.