If you are a blogger and looking for the solution of low page loading score in Pingdom tool, GT matrix or Google Page speed insights, you definitely notice the word remove query strings from static resources which is one of the parameters, slowing down your page loading score.
How can we remove query strings from static resources in WordPress sites or blog? Having a blazing fast blog or website will not only increase the User Experience of your blog’s visitors but also greatly improve your page ranking in Google SERP. Before getting into the topic the, let’s see what are the query strings?
What are the Query strings and Parameters in URL?
As per the Wikipedia, query strings in URL means “On the World Wide Web, a query string is the part of a uniform resource locator (URL) containing data that does not fit conveniently into a hierarchical path structure.”
A Query String is a collection used to retrieve the variable values in an HTTP query string.
Just think like that, when we search for something on Google, the address bar will show a URL structure like that
Here in this example, we type “affiliate marketing” and the address bar’s URL will show something like above screenshot. The components which come after the “?” is the query string, which contains the parameters. In our example, the first parameter
q=affiliate+marketing
is the query string. The “?” is used as a separator and it is not a part of the query string.
When we type something into the Google search bar, it sends a request to the Google server. After receiving the request, the server runs a program, parsing the query strings, which in this case q=affiliate+marketing.
Further, there may be multiple query parameter separated by “&”, which is also not a part of query strings. Each of the parameters follows the pattern
name=value
format (separated by &). Each parameter sends a different request to the server to get your result.
Here in this example, q=parameter and affiliate+markting=value.
The QuieryStrings is used to collect the variable values in the HTTP query string which is specified by the value following the “?” as the example above.
The methods used to parse the query string may vary from website to website.
Here you find the list of characters allowed in query component.
Now coming to the topic, most of the proxy server does not cache the .CSS or .js of the URLs which contains characters of the query component.
Query strings are related with HTML code. Even if your site runs on Cloudflare CDN (Content Delivery Network), it will not cache the query components of URI, you have to write the page rule to cache static HTML component.
Later in this article, we will show How to remove query strings from static resources by configuring Cloudflare Caching Level.
You will find the query strings by simply viewing your page source code. If you want to retrieve query strings on the server side via PHP, please check here.
Alternatively, you will find the query strings URL by running the test in GT matrix or Pingdom tool. It will show the query strings URL with query components value. Just check the screenshot below.
Why should we remove query strings from Static resources in WordPress?
As we have discussed earlier, the main reason to remove query strings from static resources in the WordPress blog is to increase the page speed.
Most of the Proxy servers or CDN could not able to cache the CSS or Javascript files containing query components i.e. “?” or “&”. and it will ultimately increase the page loading speed and show low score in Pingdom or GT Matrix test results.
Removing the query strings from static resources means if we have a URL like style.css?, it will encode the file name into style.css and help you to cache the query on the Proxy server.
How to remove Query Strings from static resources in the WordPress site?
To remove query strings from static resources, you can follow one of the two methods as discussed below.
#Method 1: By using WordPress Plugin
You can remove Query strings from static resources by installing WordPress Plugin on your blog. There are several free Plugins available in the WordPress directory. Here, we are sharing the best of them, which you can use in your blog.
1. WP-Rocket
WP-Rocket is the best Cache Plugin right now in WordPress Plugin repository and you can use it to remove query strings from static resources. Though WP-Rocket is paid plugin, it has lots of extreme features to increase your WordPress site’s page loading speed.
To remove query strings, Go to WP-Rocket>Settings>File Optimization and tick the option remove query string from static resources.
Now, Go to ADVANCED RULE, You will find an option Cache Query String(s), it enables you to Cache for query strings you want to force caching for specific GET parameters. You have to specify the query strings URL in the box below and save the changes.
2. Remove Query Strings From Static Resources
Another popular free plugin specifically used for removing Query Strings from Static resources. This Plugin also removes query strings from static resources like CSS or Javascript file inside the <head> element and improves the page loading speed.
Download Remove Query Strings From Static Resources and install in your WordPress Blog. The plugin is very lightweight and easy to use, no special configuration needed.
W3 Total Cache is the most popular caching plugin in WordPress Directory and used by millions of bloggers. This Plugin has several features which can enhance the page loading speed of your blog.
Though exactly configuring the plugin is a bit complicated, but highly recommended to remove the query strings in static resources. This plugin has also an option as “Prevent caching of objects after settings change” which helps you to cache the query strings of static resources.
To enable remove query strings from static resources, Go to W3 Total Cache>Page Cache and look for the fifth option, you will find the option “Cache URIs with query string variables”. Just checked the box, if not (unchecked by default) and save the settings.
W3 Total Cache is one of the most powerful Free Cache Plugin to make your blog blazing fast and can remove query strings from most of the URLs of your blog.
Query Strings Remover is another free Plugin in WordPress repository, can be installed to remove query strings from static resources like CSS or js files in WordPress sites. No special configuration required, just install and activate it.
#Method 2: By configuring function.php file
In this method, you have to edit your theme’s function.php file.
To remove query strings of static resources, you have to add filter hook (add_filter) in your themes function.php file. We recommend you to create a child theme before making any changes in your website’s core file. Because wrong code may break your entire blog.
/* Remove Query String from Static Resources */
function remove_css_js_ver( $src ) {
if( strpos( $src, '?ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_css_js_ver', 15, 1 );
add_filter( 'script_loader_src', 'remove_css_js_ver', 15, 1 );
Paste the code at the bottom of your function.php file and don’t forget to take the back up before editing or changing your PHP file.
If you are not comfortable with editing your theme’s core file, we highly recommend you to use the Plugins as discussed above.
How to remove query strings from static resources by configuring Cloudflare Caching Level?
If you are a user of Cloudflare CDN service, then you can remove the static resources like CSS or Javascript files by configuring Cloudflare CDN settings.
Cloudflare offers three types of Caching Level.
- Standard: This level will cache almost all static resources like CSS, image or Javascript.
- .No Query String: Will aggressively cache all static resources.
- Ignore Query String: Will bypass or ignore query strings while delivering cached resources.
To enable the desired cache Level setting in Cloudflare, follow the navigation
- Login to Your Cloudflare Dashboard and Look for Domain Summary
2. Select the Caching Level option, a new Window will open.
You will find the different Caching Level option at the left side of the page. Check your desired Caching Level you want to cache by Cloudflare.
By following the method can remove query strings from static resources and able to improve your Page loading time.
For more information in Cloudflare configuration visit here.
Read More