Remove Query Strings from Static Resources – 2 Methods

Are you looking to improve your website’s performance and speed? One important factor to consider is the use of query strings in static resources. While query strings are commonly used to version assets and pass information between web pages, they can also cause caching issues that slow down your website and affect its user experience.

In this article, we’ll explain what query strings are, why they can be problematic for website performance, and how to remove them from static resources. We’ll also cover common questions about this topic, such as whether removing query strings can affect SEO, and provide tips for versioning your resources without using query strings.

Remove Query Strings from Static Resources - 2 Methods

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, and thankfully you can use plugins for this task.

 

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.

How to Remove Query Strings From Static Resources Using a  Plugin

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.

Frequently Asked Questions

What are query strings in static resources?

Query strings are strings of characters that come after a URL and are used to pass information between web pages. When it comes to static resources, query strings are often used to version assets so that they can be updated without causing caching issues.

Why should I remove query strings from static resources?

Query strings can cause issues with caching, which can slow down your website and affect its performance. Additionally, some proxy servers and CDNs may not cache resources with query strings, which can result in slower load times for your visitors.

How can I remove query strings from static resources?

There are several ways to remove query strings from static resources. You can do it manually by modifying your site’s code or use a plugin like Remove Query Strings From Static Resources. This plugin will automatically remove query strings from static resources on your website.

Is it safe to remove query strings from static resources?

In most cases, removing query strings from static resources is safe and won’t cause any issues. However, there are some exceptions. For example, if your site relies on query strings to pass important information between pages, removing them could cause problems.

Will removing query strings from static resources affect my SEO?

No, removing query strings from static resources won’t have a direct impact on your SEO. However, it can improve your website’s performance, which can indirectly improve your SEO.

Can I still version my static resources without using query strings?

Yes, there are other ways to version your static resources without using query strings. One popular method is to add a version number to the filename of the resource. For example, instead of using “styles.css?v=1.0”, you could use “styles-1.0.css”.

Conclusion

In this post, we examined what query strings are all about, and why removing them is important. Additionally, we showed you how to 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. Our team of experts is just one call away!

For more step by step tutorials follow our WordPress blog.

More Resources: