Do you want to increase your webpage load speed? Here is a guide which will help you to minify JavaScript, CSS and HTML files of your website easily and increase page load speed. Using these…
Remove Query Strings from Static Resources to Increase your Website Speed
You might have come across this page after testing your website on Pingdom, GTmatrix, Google Page Speed Insights or YSlow. 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. You have landed on right page pal.
In this tutorial, will discuss about What are the Query Strings in WordPress code structure? Why you should Remove Query Strings from Static Resources. How you can Remove Query Strings and Increase your WordPress Website Speed? And Removing Query Strings from Static Resources will increase your web page speed or not? So let’s begin…
Page load time is an extremely essential aspect for a website or blog. It help you to deliver a satisfactory and effective user experience to your visitors. It also help you to get higher ranking in Google Search, as a results you will notice increase in overall traffic on your website. As Google had announced earlier that page load time affect your search engine ranking.
Leveraging Browser Caching of Static Resources like CSS and JavaScript plays an important role in page loading time. Query Strings prevents Caching of Static Resources on Proxy servers and on browsers. By Removing Query Strings from Static Resources like CSS & JavaScript you can enable caching of static resources and can achieve a significant improvement in page load speed with less page load time.
What are the Query Strings in WordPress?
First of all, lets discuss What are the Query Strings. Query Strings are the URLs which contains “?” or “&”. Therefore, Query Strings Resources will be the resources URLs with a “?” or “&”. And as i said earlier, most of the proxy servers do not cache CSS and JavaScript resources with Query Strings.
Even if you have optimized Public Cache Control headers. Few CDNs (Content Delivery Networks) also don’t cache resources with Query Strings i.e KeyCDN or Cloudflare.
Furthermore, I would suggest you to check your web page source code for Query Strings. Or test your website on speed test tools like GTmatrix or YSlow or Pingdom. You will find URLs with Query Strings (? or &). These URLs should look like the below given screenshot.
Why you should Remove Query Strings from Static Resources?
As I explained above that Query Strings prevent caching of Static Resources like CSS and JavaScript on Proxy Servers and CDNs, which results slow loading speed of a website. So, you must have remove these Query Strings (which content “?” or “&” in their URLs) from Static Resources to enable caching on Proxy Servers. And once you remove these strings, you will definitely notice a significant increase in page speed.
I tested my own website TechNumero.Com on GTmatrix and Pingdom, Results you can see in figures.
How to Remove Query Strings form Static Resources like CSS & JavaScript?
To Remove Query Strings form Static Resources like CSS & JavaScript, you only need to add a filter hook in functions.php file to modify Static Resources URLs i.e. CSS and JavaScript. Filter hooks (add_filter) are used to modify various types of internal data in WordPress.
Add the following code in your functions.php file to Remove Query Strings form Static Resources
//* TN - 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', 10, 2 );
add_filter( 'script_loader_src', 'remove_css_js_ver', 10, 2 );
Also, There are various plugins available in WordPress Repository. You can use following plugins if you do not want to use code. I will share three different plugins solutions to remove Query Strings from Static Resources. However, I always recommend that you should only use plugins when it is unavoidable to use. After all It’s up to you whether you want to use plugin or PHP code.
If you are using a paid theme and updating your theme frequently for latest updates by theme publisher, in that case it would be better to use plugin instead of adding PHP code. Because your PHP code might got deleted automatically after a theme update. You can also use Child theme for such customisation.
#1 Remove Query Strings From Static Resources – WP Plugin
Query Strings from Static Resources can be removed by using a WordPress plugin called Remove Query Strings From Static Resources. This method is especially relevant for beginners, who don’t want 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 web page load time TWICE and you will find significant improvement.
#2 W3 Total Cache – WP Plugin
Remove Query Strings From Static Resources with W3 Total Cach Plugin. Many WordPress users use caching plugins like W3 Total Cache, WP Super Cache. I highly recommend to use W3 Total Cache plugin to increase web page loading time. This plugin is one of the most popular caching plugin in the WordPress ecosystem. Which dramatically increase 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. Go to 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 ‘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 Query Strings Remover – WP Plugin
There is an another lightweight WordPress plugin called Query Strings Remover. Download this plugin from WordPress plugin repository for free. Install 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 want to increase your website page loading speed. I have implemented the code on on TechNumero.Com and Solution #1 on my client’s website www.karhal.info. I have noticed dramatic improvement in Page Speed Grades on GTmatrix and Pingdom. Improved results can be seen in figures given below.
Hope you‘ll find this post helpful. Share your Page Speed Results and your experiences on above topic in the comment section below. Are you using a plugin or PHP code to Remove Query Strings from Static Resources? Which solution you like most. And Which one works best for you. or You may have any other recommendation for readers, do share with us in the comment section below.
In addition to that you may be interested to read following tutorials –
How to Lazy Load Images in WordPress to Speed Up Your Website
Cache Gravatar Images in WordPress for WP Optimization
How to Leverage Browser Caching Google Analytics
Enable Gzip Compression in WordPress
Thanks! Your feedback helps us to improve technumero.com
Reader Interactions
About The Author
Hey Saurabh,
Thank You for this really easy to understand tutorial. Though the time decrease was just a few milliseconds but it was still beneficial. Thank You again 🙂
Regards,
Ashwani Kumar Singh
Thank your for the tutorial, where the actually put the code of 3rd one.
Hey Usman,
Glad that you found it informative. You should use the code at the bottom of function.php. As I advised in the post choose this method only if you know well what you are doing. And before making any edit/change, don’t forget to backup your files and content.
Technumero, thanks a lot. I think I will go with w3 total cache.
Hey Chieyine,
Glad that I could help. Thanks for nice response.
Thanks for the post,
What i learnt from this post is there is no way to “Remove query strings from static resources” completely. I am stuck at 84 for my website.
Thanks
Avinash
Hey Avinash,
Glad that I could help. That’s really a nice score. Although 75+ is a decent and acceptable score. Thanks for the awesome feedback.
This was really helpful! I’ve been scratching my head for a long time, your php code worked as dream. Thanks!
Hey,
Glad that I could help.
Thanks for your awesome feedback.
Yes indeed! Good points and good post…I tryed for my website as well and improved the perfection grade on gtmetrix. Best Regards
Hey,
Glad that I could Help.
Thanks for your feedback.
Hello,
Thank you for sharing this script. It worked at one point until my theme got updated. There is now a syntax error on the first line. Any ideas? Thank you for checking.
Hey Samantha,
Glad that you find it useful. Looking forward to listen more from you.
Thanks for dropping by.
Hello Saurabh,
Nice tips though. You have mentioned a plugin which has not been updated since a year, there are also other plugins for removing query string, what would you prefer? An updated one or old one?
Thanks,
Karan
Hey Karan,
Glad that you find this useful.
You can use other methods like W3 Total Cache which is good plugin and also gets regular updates or can do via function.php.
thanks for your response.
Hi Saurabh,
Your code worked to remove some query strings, but I couldn’t remove some strings added by Jetpack plugin’s Photon Module!
Anyways, very informative post!
Thanks for Sharing! 🙂
Hey Adithya,
Glad that you find it useful. Looking forward to listen more from you.
Thanks for your response.
Add to my functions.php and now the site is broken showing a 500 error. Any idea on how to UNDO this?
/*** Remove Query String from Static Resources ***/
function remove_cssjs_ver( $src ) {
if( strpos( $src, ‘?ver=’ ) )
$src = remove_query_arg( ‘ver’, $src );
return $src;
}
add_filter( ‘style_loader_src’, ‘remove_cssjs_ver’, 10, 2 );
add_filter( ‘script_loader_src’, ‘remove_cssjs_ver’, 10, 2 );
Hey Dennis,
If you are not able to log-in to WordPress, you can log-in to your Web Hosting account and can navigate to function.php file under your WordPress site folder. And can remove the unwanted code from there. To avoid such situation it is always advisable to create a back before editing core WordPress files. Hope, this will help. Looking forward to listen more from you.
Thank you so much, your code worked like a charm.
Hey Mariam,
Glad that I could help.
Thanks for your response.
Great explaination Saurabh
In Method 3 , the code has to be inserted in the end or at starting ?
Hey Aman,
Glad that you find it useful.
Code is to be placed in side the php tags of function.php. It is recommended to create a Back up before making any changes in core WordPress files or theme files. So that you can revert back if something went wrong.
Thanks for feedback.
I had tried solution 3 but Gtmetrics don’t find any changes in speed By Page score speed still 96% what should I do ? should I go for solution 1
Hey Manjesh,
if I was you, I must try that.
Anyway thanks for feedback if you had not commented to make a link only.
The “Remove Query Strings From Static Resources” worked perfectly on my VPS bringing it from 34% to 90%. Thank you so much for sharing this method.
That is a good score. Glad that I could help.
Solution #3 works excellent if you’re using a low number of plugins. For a heavy plugin loaded site (one of my sites uses 45 plugins) you have to balance between performance grade and page speed.
In my case I’ve increased performance grade BUT page speed went down significant (by more than 1 second). This was because too many query strings had been removed each time a page was loaded causing too much PHP performance load. Too get a better Google rank I’ve decided to offer visitors a better page speed.
Just my recommendation: always watch the more important metric – in my case it was page speed.
For a low plugin site I’ve got perfect results with this solution. Thanks!
Glad that you find it useful.
The Code Working well on my site.
Thank You
Glad that I could help.
Awesome , Third method worked perfect for me !!
I think improving the wordpress load speed is very useful. Very good advice.
Saurabh, I found your page by accident when I was looking for WP article to improve my beta test web page. After implementing the changes recommended in your blog article I was able improve my page speed by 500%. Thanks a lot
Great improvement man. Glad that I could help.
Worked for me to remove query string. Thanks
Hey Purva,
Glad that I could help.
Thanks for stopping by.
Disable photon and most of the query strings will go away
Yep. You are right, but still a considerable amount of query strings will left as it is and affect the performance. I would suggest you to use the code.
hi Saurabh K says
thanks for sharing
i like to use Solution # 3 but it is not working my site
i add code at the bottom of function.php file.
pls help
thanks
Hi,
Any solution for users who are using wp super cache?
Hi,
The code is already there in functions.php and “Prevent caching of objects after settings change” option is also unchecked but the problem is not resolved. I can’t put more burden on my shared hosting so I don’t want to install “Remove Query Strings From Static Resources” plugin.
Hey there,
Thanks for the solution – the ‘Remove Query Strings From Static Resources’ plugin worked like charm.
hey saurabh,
I run DesignrsDen(dot)com and i searched my site for pingdom and it showed me to Remove query strings from static resources.
i tried the code and the preformance score just improved from 41 to 52 but it is still in the red area.
– i cannot use W3 Total Cache, WP Super Cache as my server is “wordpress powered by godaddy” and it dosent allow these plugins to install
-I also tried Remove query strings from static resources plugin but still the pingdom shows the same issue.
please let me know how can i resolve this issue
I think solution 2 will work more effective than solution 3. unchecking the bos is more easier than inserting a code. I had personally use soultion 2 to my site and it really work.
Thanks for the info.
Thanks brother for your great tutorial. I have try this on my site.
SUPERB!
Keep up the good work!
Thanks
Good stuff Saurabh… if you have time maybe you can offer feedback on our free plugin also? It can accept custom “args” for query string removal:
Remove Query Strings
Anyway thanks for your consideration!
Hey Chris, Thanks for stopping by, i would love to share my feedback on your plugin.
thank you for making a complex issue so simple. The func.php code is working fine
Hey Moumita,
Glad that I could help.
Thanks for stopping by.
Hi Saurabh,
Thanks for a great article, and your suggestion for adding the code to the php file works well. That said, it causes a problem for me as I have this line of code in functions.php
wp_enqueue_style( ‘google-fonts’, ‘//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,900’, array(), CHILD_THEME_VERSION );
Is there a way to modify your code to exclude this font?
Best wishes,
Dave
Hi Deve, This code should work fine with Google Fonts.
However, if you are experiencing issue with Google Fonts. You can hook the following code in wp_footer. And remove the Google fonts code from functions.php
Find your code here..
https://fonts.google.com/?query=lato&selection.family=Lato:300,300i,400,400i,700,900
This code will increase your PageSpeed.
There are lots of great Web Safe Fonts available, you can use these instead of using Google Fonts.
https://technumero.com/use-web-safe-fonts-over-web-fonts/