parallax background

How to Remove Query Strings from Static Resources and Speed up Your Site

HTML vs. HTML5: What’s the Difference and What’s New?
September 23, 2019
Sucuri vs Wordfence: Which One You Should Use On Your Website
September 27, 2019
 

There is a common question that comes up while learning how to improve the performance of WordPress. The question is: how to remove query strings from static resources? If this has been on your mind, but you were afraid that the solution is too technical for you, fear not.

This article is going to tell you all you need to know in order to remove query strings from static resources, especially in WordPress. We’ll be getting into some code, but not to worry, we’ll also present an easy way to remove query strings with one of several plugins.

JavaScript and CSS files typically have their file version indicated at the end of their website address. For example, it will look something like this: domain.com/style.css?ver=4.9. These query strings can be useful in serving up specific versions of a file when this is needed, but there is a catch.

In some cases, proxy servers do not cache resources with query strings, including those with a cache-control:public header present. Proxy servers running older versions of Squid are the biggest offenders since they do not cache static files with query strings by default, however newer versions of Squid have overcome this issue.

What are WordPress Query Strings?

 

After you test your blog/site with tools like Google’s PageSpeed Insights, GTmetrix or Pingdom, you might encounter a warning to remove query strings from static resources.

Query strings are the part of the website URL you see that contain unique characters like "?” and "&". Style sheets and scripts may be called by a URL and these URLs usually have an attached query string to define the asset or version for cache busting purposes.

  • What does cache busting mean?

Browsers temporarily store a cached static file until the expiry date. The version of the file in the browser of your visitors may stop them from seeing fresh modifications. Cache busting resolves the issue with the identification of a distinctive file version.

 

This informs the browser that there is a fresh version of the file that is accessible. The browser is then able to request the new file, discarding the old one from the cache. The query strings are a technique for plugins and themes to pass information about fresh updates to the version.

Please note that there are query strings for a purpose. WordPress developers may use versioning on these files to get around caching or compatibility issues. If they release an update, for example, and change style.css from ?ver=4.6 to ?ver=4.7, you take it as a whole fresh new URL.

If you take off the query strings and update a plugin, this potentially could lead to the version of the file that is cached to serve continuously. This may break your site's front end in some cases until the cached resources are expired or you flush the cache completely.

When developers include a number of versions, they are joined as query strings to the end of the path. If there is no version set, WordPress will automatically add a version amount equal to your present WordPress version.

How Removing JS and CSS Query Strings Will Improve the Site Speed

 

You cannot always cache resources if they contain query strings. If you proceed to remove these query strings, you will get an enhanced speed score due to more assets being cached. Static files, in particular, are highly cacheable since they are, well, not dynamic and do not change much over time.

Most proxies, Squid in particular from the first version to 3.0, make sure that some resources with a "?" in the URL are not cached by some proxy caching servers. This is true even if the response includes a Cache-control: public header.

It is essential to remove query strings from static resources as they can trigger caching problems that might not be obvious to you. To allow caching for these resources, you simply remove query strings from the references to static resources.

Then, if you still need them, you can encode the version parameters in the names of the files themselves. This way you will get the benefit of versioning and the ability to “cache bust” while avoiding any potential caching problems with your static files.

How to use Code to Remove Query Strings from Static Resources

It’s easy to remove query strings from your assets with just a couple lines of code.

All that you need:

  • Admin Dashboard
  • Text Editor (Sublime Text, Notepad)
  • FTP client (WinSCP, FileZilla)

The procedure to remove query strings from static resources like JavaScript and CSS is as follows:

Modify your functions.php file with a short snippet of code. This code will remove query strings from the entirety of your domain-related stylesheets and scripts. You can add the following snippet to the base of your functions.php file.

You can find this file and modify it by navigating to your WordPress dashboard then Appearance > Editor. Alternatively, you can use an FTP client to modify functions.php, which is located in your current theme folder.

If you include the following code to the functions.php file of your theme, all of your scripts will tend to remove the query string version numbers at once.

function _remove_script_version( $src ){

$parts = explode( '?ver', $src );

return $parts[0];

}

add_filter( 'script_loader_src', '_remove_script_version', 15, 1 ); add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

Note: If not performed properly, editing a WordPress theme's source code could damage your blog/site. Please ensure to check with a developer before anything if you are not comfortable doing this.

Also, this code may trigger 500 internal server errors in some instances (depending on the WordPress setup that you use). It’s always recommended to back up your WordPress before taking this step.

Remove Query String from Static Resources With the Use of a Plugin

Another option if you do not want to use code is the use of a plugin for WordPress that efficiently incorporates this function. To remove query strings from static resources with a plugin, we will share a few good plugins that offer this feature.

We always suggest that you use plugins only when it becomes inevitable to use them, though it is up to you whether to use custom PHP or go with a plugin.

Remove Query Strings from Static Resources

remove-querystrings
 

With a WordPress plugin called Remove Query Strings from Static Resources, query strings can be easily deleted. This is a free plugin andit works by efficiently cleaning all query strings inside the HTML from JavaScript and CSS files.

Once this plugin has performed a complete sweep of your blog/website, you will probably see enhanced speed scores when you perform a speed test.

Perfmatters

perfmatters
 

The premium Perfmatters plugin enables you to remove query strings from static resources with a simple click of a button. It also allows you to speed up your site with other WordPress website optimizations. This plugin can operate alongside your present caching plugin.

W3 Total Cache

w3
 

Renowned names like SmashingMagazine and AT&T use W3TC, and it also has more than a million downloads. If you use the W3 Total Cache plugin, uncheck the option to prevent the unnecessary creation of query strings. You can find this by navigating to the Performance tab of the W3 plugin > Browser Cache.

There is another handy option available called "Prevent object caching after changing settings" in the General chapter of this page.

Speed Booster Pack

speed-booster
 

The plugin Speed Booster Pack is a powerful plugin to increase your website's speed. Using it is easy. All you have to do is install and enable it. A new Speed Booster Pack submenu will usually show up on your dashboard. From here you can easily manage various optimizations.

WP Performance Score Booster

wp-performance-score
 

WP Performance Score Booster is a straightforward and free plugin. It is meant to improve the general performance of your website. It uses methods such as browser caching, removal of query strings from static resources, and GZIP compression.

This plugin has no complex configurations or settings. It also has three alternatives you can easily install and activate.

Conclusion on how to remove query strings from static resources

This article showed how you can boost a website's speed when you remove query strings from static resources. You can either do this by making a few adjustments to the functions.php file or by using one of several performance-boosting plugins. Either method is fine, so use what you’re comfortable with.

Your website's speed is not just essential from the perspective of the search engine alone, but also from that of the user's experience. Nobody wants to visit a site that takes forever to fully load a website and correctly setting up your site for caching is the best way to keep it speedy.

If you enjoyed reading this article about removing query strings from static resources, you should read these as well:

Albert Ślusarczyk
Albert Ślusarczyk
As the co-creator of Be Theme, I am a strong believer in designing with care and patience. I pour my energy, time & knowledge into perfecting the theme for our 157,000+ customers.

Comments are closed.

Free cheat sheets available

Subscribe to download a set of cheat sheets for CSS, JS, and HTML

You'll receive an email with the cheat sheets in an instant.