Remove Query Strings from Static Resources (URL) to Increase PageSpeed

You might have come across this page after testing your website on Pingdom or GTmatrix. And if I am not wrong, it seems like you are looking for a solution to Remove Query Strings from Static Resources like CSS & JavaScript (or URLs) in WordPress with/without the plugin.

You have landed on right page pal! In this tutorial, we will discuss,

(1) What are the Query Strings in website code structure?
(2) Why you should Remove Query Strings from Static Resources?
(3) How you can Remove Query Strings from URLs to increase your PageSpeed?
(4) Learn how to Remove Query Strings in WordPress with/out plugin?

So, without any delay, let’s begin…

PageSpeed is an extremely essential aspect of a website or blog. It helps you to deliver a satisfactory and effective user experience to your visitors.

Also, Site speed helps you to get higher rankings in Google Search, and as a result, you will notice an increase in overall traffic on your website.

As Google had announced that site speed affects your search engine ranking. And nowadays, since the mobile-first concept came, search engines like Google considering PageSpeed as one of the most important parameters for search ranking.

Table of Contents

• What are the Query Strings?
• How Removing Query Strings from CSS and JS will increase PageSpeed
• Should you Remove Query Strings from URLs?
• How to Remove Query Strings from Static Resources?
• Remove Query Strings From Static Resources – WordPress Plugin
  • #1. Remove Query Strings From Static Resources – WP Plugin
  • #2. W3 Total Cache – WP Plugin
  • #3. Speed Booster Pack
  • #4. WP Remove Query Strings From Static Resources
• Conclusion

What are the Query Strings?

First of all, let’s discuss What are the Query Strings?

Query Strings are the URLs that contain “?” or “&”.

for example, technumero.com/script.js?ver=1.6

It is similar to the CSS and JS files of your website, which usually have the file version at the end of their URLs.

Therefore, these query string resources would be the resource URLs with a “?” or “&”.

And as most of the proxy servers do not cache CSS and JavaScript resources with query strings, even if you have optimized the public Cache-Control headers.

Most of the popular CDNs (Content Delivery Networks) also do not cache resources with query strings i.e KeyCDN, Cloudflare, and others.

Now, you must be thinking then why query strings are being used by default.

Actually, the query strings are used to versioning a file, which differentiates the resource files from one to another. It is extremely useful for developers to avoid caching problems.

And if you are in the development phase of your website, then I would suggest you to only remove query strings from URL, once you are done with the site development/theme customization.

Further, before we remove the query strings from urls, let’s take stock of the baseline result. That will help you to understand, how query strings are impacting on your website.

1. You should first check your webpage source code for Query Strings.
2. Then, test your website on speed test tools like GTmatrix or Pingdom.
3. And identify URLs with Query Strings – “?” or “&”. These URLs should look like the below-given screenshot.

Now, as you have identified the resources with query strings, you will notice that these are the CSS, JavaScript, and Image files of your site.

• Best Free CDN to Speed Up your WordPress site
• Which Free DNS Hosting Provider can help you get Superfast PageSpeed

How Removing Query Strings from CSS and JS will increase PageSpeed

Leveraging Browser Cache of Static Resources like CSS and JavaScript plays an important role in page loading time. Query strings prevent caching of static resources on browsers and proxy servers.

By Removing Query Strings from Static Resources like CSS & JavaScript you can enable caching of static resources. Resulting in that, you can achieve a significant improvement in PageSpeed of your site.

Should you Remove Query Strings from URLs?

As I have explained above that query strings prevent caching of static resources like CSS and JavaScript on proxy servers and CDNs, which results in the slow loading speed of a website.

So, if you want to enable caching on proxy servers, you must have to remove query strings (which contains “?” or “&” in their URLs) from static resources of your website.

And once you remove these strings, you will definitely notice a significant increase in page speed.

I tested my own website on GTmatrix and Pingdom, Results you can see in figures.

How to Remove Query Strings from Static Resources?

To remove query strings from your site resources, you only need to add the following filter hook in the functions.php file to modify static resource URLs.

Filter hooks (add_filter) are used to modify various types of internal data in WordPress.

Steps to Remove Query Strings from Static Resources are the following…

1. Navigate to Appearance → Theme Editor on WordPress dashboard.
2. Open the functions.php file of your WordPress theme.
3. Copy and Paste the given-below code at the end of functions.php file.
4. That’s it. You are done.

Add the following code in your functions.php file to remove query strings from URLs

//* TN - Remove Query String from Static Resources
function remove_css_js_ver( $src ) {
if (!is_admin) {
    if( strpos( $src, '?ver=' ) )
    $src = remove_query_arg( 'ver', $src );
    return $src;
}
}
add_filter( 'style_loader_src', 'remove_css_js_ver', 10, 2 );
add_filter( 'script_loader_src', 'remove_css_js_ver', 10, 2 ); 

But, before you modify the functions.php file of your WordPress theme, I would highly recommend you to take a backup. Also, you must use a child theme for such a modification in the core theme file.

• How to Create and Use child theme in WordPress

Otherwise, there are various plugins available in the WordPress Repository for free use. You can use one of the following plugins if you do not wish to use code to remove query string from URL.

Remove Query Strings From Static Resources – WordPress Plugin

Below, I am going to share a couple of different plugins to remove query strings from URLs. However, I always recommend that you should only use plugins when it is unavoidable to use.

If you are using a paid theme and updating your theme frequently for the latest updates by theme publisher, in that case, it would be better to use a plugin instead of adding PHP code. Because your PHP code might get deleted automatically after theme update if you are not using the child theme. 

#1. Remove Query Strings From Static Resources – WP Plugin

Query Strings can be removed by using the Remove Query Strings From Static Resources plugin [1]. I would recommend this method to beginners, who don’t want to mess up with coding stuff.

Install and activate this plugin. There is no setting panel, so just activation of the plugin will do the trick. Test your PageSpeed time TWICE and you will find significant improvement.

#2. W3 Total Cache – WP Plugin

Remove query strings from URLs in WordPress with W3 Total Cach plugin [2]. Many WordPress users already using caching plugins like W3 Total Cache and WP Super Cache.

I would suggest you to use this guide on W3 Total Cache plugin settings optimization to improve PageSpeed. This plugin is one of the most popular caching plugins in the WordPress ecosystem, which dramatically increases your website loading speed.

And if you are not using this plugin, I would suggest you give it a try, you won’t regret using it.

W3 Total Cache plugin offers an option to remove query strings from static resources.

You only need to UNCHECK (if already checked) an option and it will remove query strings from 90% of the URLs.

Steps to Remove Query Strings from URL with WordPress plugin

• Install and Activate the W3 Total Cache Plugin.
• Go to the Browser Cache tool tab and find “Prevent caching of objects after settings change” option.
• UNCHECK it from ‘General Settings’ and don’t forget to click on the ‘Save Settings’ button.
• Now ‘Empty all Cache’ and you are done.

Check your page loading speed TWICE and your page loading speed will definitely increase.

#3. Speed Booster Pack

Another popular WordPress plugin on this list is Speed Booster Pack [3]. This plugin is quite popular and offers much functionality to optimize the PageSpeed.

To remove query strings from URL in WordPress using the Speed Booster Pack plugin. Go to the plugin settings, Turn On the Remove Query String option on the General Tab.

#4. WP Remove Query Strings From Static Resources

There is another lightweight WordPress plugin called WP Remove Query Strings From Static Resources [4]. Download this plugin from the WordPress plugin repository for free.

Install the plugin and Activate it. There is no configuration or setting page. Activate it and you are good to go.

Purge all the cache and check your website on Pingdom. All the query strings will be removed automatically from static resources.

Conclusion

Removing query strings from static resources like CSS & JavaScript is important if you want to enable Caching of static resources on proxy servers and CDNs to increase your PageSpeed.

I have implemented the code to remove query strings from URLs on this site (technumero.com) and have noticed a dramatic improvement in PageSpeed Grades on GTmatrix and Pingdom.

You can see the improved results in the figures given below.

Now, just scroll up and see the baseline test data, my score for query string has been increased from 5 to 78, which quite good. Similarly, page load time after the implementation of this code also has been improved.

You may find these results outdated, but believe me, it is working fine to date. You can check the results by yourself if you want to. 

Hope you‘ll find this post helpful. Share your PageSpeed Results and your experiences on the above topic in the comment section below.

Are you using any other plugin or PHP code to remove query strings in WordPress?

Which solution you like most and which one works best for you or you might have any other recommendation for readers. Do share your thoughts with us in the comment section below.

In addition to that, you might be interested to read the following–

• How to Lazy Load Images in WordPress to Speed Up Your Website
• Cache Gravatar Images in WordPress for WP Optimization
• Enable Gzip Compression in WordPress
• Minify JavaScript and CSS in WordPress to Increase PageSpeed