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.
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.
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.
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.
It’s easy to remove query strings from your assets with just a couple lines of code.
All that you need:
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.
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.
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.
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.
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 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.
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 on how to remove query strings from static resources, you should check out this one about how to update PHP in WordPress .
We also wrote about a few related subjects like how to set homepage in WordPress , how to add expires headers , how to edit the WordPress excerpt length , how to hide the page title in WordPress , how to backup a WordPress site and how to disable comments in WordPress .