5+ Easy Ways to Remove Query Strings from Static Resources

guide to help you remove query strings from static resources in wordpress website

Today in this guide I’m going to share with your guys 5 different ways to remove query string from static resources like style sheets, JavaScript or images in WordPress websites.

I don’t think I need to explain to you the importance of website speed. I mean we all know its importance in search engine optimization and user experience. Dozens of experiments and publications have been issued showing the impact slow site’s speed on user experience and overall revenue.

Recently Google also released a new algorithmic update which focuses mainly on a site’s speed on mobile devices. So if your blog or online magazine isn’t properly optimized for small devices like tablets or smartphones then most probably you are going to notice a drop in search traffic from mobile search results.

How to Remove Query Strings from Static Resources in WordPress

If you have created your site on WordPress then it’s really necessary to remove query strings from JS and CSS files otherwise your site will have serious performance issues.

With WP you get the freedom to install and then activate or deactivate templates or extensions. Each of such templates and extensions probably loads their own static files and most of the time these files will have parameters attached to them.

Now, this won’t be an issue for you if you don’t have any intentions to grow your blog or website. But if you really want your site to rank better on search result pages then you must get rid of query strings otherwise there will be issues with gzip compression, cache and Google page speed score.

There are dozens of methods and extensions available on the internet to help you fix this issue. In this guide, I will be sharing with your guys 5 simple and easy to follow methods. The first method will require you to edit your theme while the rest 4 methods will be related to the usage of plugins.

You must understand that removing them is really important. It will help to leverage browser caching and will also enable gzip compression on static files.

Remember that you don’t need to follow all the methods. You just need to choose one method and then you have to implement the steps listed in this guide on your website. Once you have followed and implemented all the instructions, you can perform website load test using tools like webpagetest, pingdom or gtmetrix, etc.

If you have followed all the steps properly, you will definately notice improved page speed and yslow scores.

1. 100% working code snippet – my favourite

This method involves editing your theme’s functions.php file but it also means that you don’t have to use any plugin.

Before you proceed with this method I will suggest you create a full backup of your site. If not full site then at least create a backup of your theme just in case anything goes wrong.

Now visit your website’s administration panel. put your cursor on appearance and then click on editor. You need to navigate in the following order ( wp-admin -> appearance -> editor ).

Once you are on the themes editor page, look for the “Theme Functions” file and then open it.

Now copy the code listed below.

/* To handle question mark */
function dg_rm_qs_ques( $src ){
$rqs = explode( '?ver', $src );
return $rqs[0];
}
if ( !is_admin() ) {
add_filter( 'script_loader_src', 'dg_rm_qs_ques', 15, 1 );
add_filter( 'style_loader_src', 'dg_rm_qs_ques', 15, 1 );
}

/* To handle ampersand */
function dg_rm_qs_amper( $src ){
$rqs = explode( '&ver', $src );
return $rqs[0];
}
if ( !is_admin() ) {
add_filter( 'script_loader_src', 'dg_rm_qs_amper', 15, 1 );
add_filter( 'style_loader_src', 'dg_rm_qs_amper', 15, 1 );
}

Once you have copied the code snippet, make sure to paste it at the bottom of your theme’s functions.php file. Now, to save this file you will need to click on the blue “save changes” button.

If you are using any cache plugin then make sure to flush all your site’s cache.

Visit your site to see the changes.

2. WordPress speed optimization plugin

speed optimization plugin

With the help of this extension, you cannot only remove query string from static resources but you will be able to control more than 53 website speed optimization related settings.

This install this extension and then under the “Must Optimize” section select all the appropriate options and then click on save button.

Now reload your website and enjoy the improved website speed and performance.

3. W3 total cache

One of the world’s most popular cache extension for WordPress websites comes with an inbuilt option to remove query strings from static files.

If you already have this plugin installed on your site then all you need to do is to follow a few simple steps listed below.

  • Go to your site’s administration panel.
  • Navigate to the W3 settings page and then go to the “Browser Cache” section.
  • Simply select the options shown in the image attached below.
w3-cache-settings-page

Now make sure to save your settings.

4. Query Strings Remover

It’s a free extension available for download on official plugin repository by LittleBizzy. It has more than 10,000 active installations and has received 4.7/5 rating based on ‎38 reviews. Currently this addon supports the removal of ?=, ?v=, ?ver=, ?version= types of parameters. If you have any questions to ask before installing it, then you can visit the official support forum and ask for answers.

Note: This extension doesn’t provide you with any settings page. All you have to do is to install and it and flush your site’s cache.

5. Reduce HTTP Requests, Disable Emojis & Embeds

make sure to choose this option

WP disable is one of the best freely available WordPress speed optimization plugin. Developed and maintained by Jody Nesbitt, this addon has more than 30,000 active installations. Furthermore, it is actively maintained and has 4.5/5 rating based on 35 reviews.

Once you have installed and activated this addon you will be automatically redirected to its settings page. On the settings page look for “Remove Querystrings” option and then click on the toggle button.

What is query string and why it’s so important in web development?

As the name sounds is a small string affixed to the static files. You will usually find attached to JS, CSS or dynamic images. Most of the time they start with a question mark along with equal to (=) sign and some digits. Sometimes you may also find query strings starting with an ampersand (&).

Below you can see some example:

https://youramazingsite.co.uk/files/styles/mainstyle.css?ver=09678
https://yourjournal.com/assets/layout/mainstyle.css&ver=87678

Now, you might have a question, what these random strings so important in the field of web development?

A web developer normally adds a unique identifier as a parameter to the static file’s URL.

Why?

Well, because web browsers usually ignore caching any files with a query string. So, it’s helpful for the developers to publish the latest updates to the website or the applications almost instantly.

These updates can be related to security or can be just a minor bug fix. Since developers don’t have to worry about the cache related issues, latest security patches and UX improvements can be delivered to the client’s browsers without any compromises. This ensures safety and better usability across all devices and across all web browsers.

Note: You have to consider the fact that developers and businesses don’t care about Google Page Speed scores especially when it comes to dynamic web applications (for example Facebook, Twitter, etc).

Now let’s get back to the main topic.

Written by .

1 comments

Leave a Reply

Your email address will not be published. Required fields are marked *