WordPress Optimization | Remove Query strings from Static Resources

WordPress Optimization | Remove Query strings from Static Resources

Query strings – What are they and why should we remove them?

Do something right now. Right click on your site and view source.

What do you see?

I bet when viewing your source code you see URL’s that look like this:

http://sitename.com/wp-content/plugins/js/some_js?ver=3.4.2

or something to that effect.

They can be seen on images, CSS and JavaScript in most cases. Most plugins affix them to their URL’s but there is a problem with them.

Firstly - it can give away your WordPress version. In most cases this isn’t a problem as you should be keeping up to date as WordPress releases regular security fixes. But if your running an older version of WordPress some people may pick up on that and exploit the vulnerabilities which will be widely known by that point.

Secondly - Most are not cached by some proxy caching servers. These include content delivery networks.

Removing these queries from static resources such as CSS and JavaScript is simpler than you think, as you know I hunt the web for solutions to your problems, so that you may benefit from the results. A faster web benefits everyone.

So how to do we remove those query strings?

You will need to locate your themes functions.php files, for thesis users, you will edit custom_functions.php

caution when editing your functions.php or custom_functions.php for thesis, I recommend editing using your file manager on your server in case you do something wrong, you can quickly reverse it.

copy and paste this code inside your functions.php

Update: 04/05/2013 – please remember to add the code inside the PHP tags of your functions.php file.

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 );

Save your file then clear cache. Refresh your site with control f5 to clear your browser cache.

Again go back and view your source, there should be no more query strings on your CSS and JavaScript URL’s

So in just 5 minutes or less, you have just improved your site.

I hope you found this useful and don’t forget to sign up for more great ways to improve your site.

About the Author

Matthew Horne - Web Developer

Matthew Horne is web developer who specializes in optimized development. He also builds custom solutions instead of reverting to plugins. Matthew Has a strong understanding of PHP, JavaScript, jQuery.

73 comments… add one

  • Jacques September 19, 2013, 4:40 am

    Matthew,

    Great Tip, I gained 10% on Gtmetrix.

    It worked just fine on EWA Theme.

    You are the Boy..

    Thank you,

    Cheers..

  • Shemul September 23, 2013, 6:19 pm

    Thanks, It worked fine in my thesis. Have a look at http://dhakaresults.com.

  • Emiel October 24, 2013, 1:25 pm

    This piece of code works fine:

    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 );

    But since I wanted to remove ?v= query strings too, I changed the code to:

    function _remove_script_version( $src ){
    $parts = explode( ‘?v’, $src );
    return $parts[0];
    }
    add_filter( ‘script_loader_src’, ‘_remove_script_version’, 15, 1 );
    add_filter( ‘style_loader_src’, ‘_remove_script_version’, 15, 1 );

    For some reason it doesn’t work. It removes the ?ver=, but not the ?v= query strings. Any idea why?

  • Matthew Horne October 25, 2013, 5:39 am

    If you are adding both, you would need to change the function name so they are separate. You cannot load two functions with the same name. You could also combine them, but I have not tested that.

  • Hardeep November 3, 2013, 11:04 am

    Thanks bro, its works like a charm.

  • Lolo November 19, 2013, 11:33 am

    Great and simple, thank you!

  • Кино любитель December 11, 2013, 1:30 am

    Thanks very much.

  • Lobo December 15, 2013, 8:46 am

    Usefull! What would be the single function to include both “ver” and “v”? Thank you!

    • Matthew Horne December 15, 2013, 8:52 am

      I will do some testing and update the post with the answer.

  • bambangmono December 18, 2013, 6:14 pm

    tanks for share, i have a try but no work

    • Matthew Horne December 19, 2013, 6:04 am

      Hi that could be a result of wordpress.com, I don’t use wordpress.com because they are very limited.

      Regards

  • The Guy January 17, 2014, 6:27 am

    Hi Matthew, I see on your site that you are very pro – Thesis as a theme.

    When I was researching themes last year I decided on Genesis since it involves a lot less coding. Reports of the latest version of Thesis is quite scary and IT consultants I’ve spoken to have confirmed this.

    Do you think Genesis is comparable and able to be as fast and as stable as you make Thesis?

    • Matthew Horne January 20, 2014, 6:35 am

      Hi, the current version of Thesis 2.1 is considerably better than its initial release version. Thesis is designed for developers and users alike – Developers can create amazing skins using the Thesis API and provide a whole bunch of custom options specific to the Skin. Users can download or purchase these skins ( some are free and some are paid ) and easily customize there sites via the options provided by the developer. These options include but are not limited too – Color Schemes, Font API, Auto Typography, ability to disable display elements ( literally anything can be disabled or enable to help the user build something that fits their taste – but the developer must include this ) Ability to control the styling of individual elements ( this is relatively new – something i am playing with atm ) as well as the ability to include boxes ( which are like plugins ) as part of the core of a skin without hacking the code to death.

      Example a skin for a photographer – in an ideal world it should include a customizable gallery as part of the skin – As a developer I can and have built a gallery in the form of a box – however for a skin I am working on, this will be included as part of the core of the skin and that means when a user uploads the skin – they do not need to add any plugins ( which are not efficient ).

      I have worked with both Thesis and Genesis from an optimization point of view Thesis wins hands down. Also from a developers point of view Thesis is much easier to code as it is based on Object orientated PHP with excellent logic. Genesis has to be customized and coded just like thesis to make truly unique themes/skins but Thesis has a single logic that once learned can be applied to every skin out there.

      From a users point of view – A well built skin would ensure a user would not need to code a single thing – Developers are working on skins and you will see over the coming months and years a vast number of skins being pushed out both by 3rd parties like me and by DIY Themes themselves. In 2.2 I believe an optional options page is being created to be similar to Thesis 1 for those accustom to that method of options.

      Thesis is also much easier to mod and extend without conflicting as well as it being a future proofed framework that includes some often overlooked features like Schema.

      When all is said and done, it boils down to user preference – Thesis can produce the most efficient websites with the least amount of code.

  • jason404 February 8, 2014, 5:04 pm

    I’m confused, as I think I came here hoping to find out how to *add* query strings, for css files, so that they get updated easily through the Amazon CloudFront CDN, without having to manually invalidate them.

    • Matthew Horne February 9, 2014, 4:46 am

      The same sort of filter could be used in another way to first strip the default query string and then add a query string. I can do some testing and see what will be appropriate.

  • Friendship SMS February 24, 2014, 12:50 pm

    thanks for this article…
    I really love it !!
    keep it up good work !! :)

    But unfortunately it’s not working for me on my website :(

    http://gtmetrix.com/reports/explorequotes.com/vRePFvek

    • Matthew Horne February 27, 2014, 4:41 pm

      Did you clear your cache after you included the scripts? It should work as long as you add it to your themes functions.php or for thesis custom.php

  • ANDROID APPS APK March 25, 2014, 5:43 am

    Wow great this works perfect for my site… thank you

  • Charles Kiyimba June 27, 2014, 11:30 am

    Thanks for the article. I have inserted the code in the functions.php file but it’s still not working. What could have gone wrong? I use Weaver 11 Pro Theme.

    This is how I went about it.

    I looked for the functions.php file in Weaver 11 Pro Theme in Appearance >Editor. I couldn’t see it. I then chose the option of logging into my cPanel, went to File Manager and followed this path Public.html > wp-content > themes > weaver-ii-pro > functions.file. (the path is like this: http://www.cashwithgoleza.com/public.html/themes/weaver-ii-pro/fucntions.php) I then right-clicked on the file to select edit. I clicked on edit and was redirected to a page, where I inserted the code just before the ending PHP tag (?>). I saved the changes and went back to my WordPress Dashboard. I cleared the cache in the 3W Total Cache Plugin. I also cleared the browser cache by clicking on F5.

    I thereafter checked the speed performance with GTmetrix.com. My performance report still had the message “Remove query strings from static resources with a list of 20 strings to be removed, the same number as before I performed the exercise. I would like to know what else I didn’t do right.

    Please let me know for I am getting perturbed if I don’t rectify that seemingly simple issue. Thanks so much for this useful article.

    • Matthew Horne June 27, 2014, 12:23 pm

      Do you have W3 total cache enable and do you have this option enable in browser cache section.

      Prevent caching of objects after settings change

      • Charles Kiyimba June 27, 2014, 5:35 pm

        Yes, I have 3W Total Cache enabled and with all settings done. I disabled the option ” Prevent caching of objects after settings change”. But whenever I made a performance test with GTmatrix, the query strings were still there. Besides, the speed went down. I removed the code and the speed grade went up to 80% with a Yslow grade of 92%.

        I think the code works with specific themes. It may not be working with Weaver ii pro. I am going to contact the developers and ask them what I can do to remove the query strings. Anything else you know I can do to remove them?

  • eco-emilio July 7, 2014, 5:34 pm

    Hi there,

    I just tried this little trick and all the querystrings were re-written as “?8aa659″, which GTMetrix still considered a querystring and gave an F (45%).

    Is this the expected behaviour of the script you provided?

    Cheers,

    • Matthew Horne July 9, 2014, 6:25 am

      Do you have W3 total cache and the option “Prevent caching of objects after settings change” enable – if so that is what is appending the queries which is used for cache control.

      By default it is not enabled.

  • Sylvain August 29, 2014, 8:36 am

    Thanks a lot……Works as a charm for me….Always looking for function.php solutions instead of always installing a plugin. Just for the sake of sharing…I add the whole bunch of code to my function.php file :

    First part defer loading of JS and second is your code…Again Thanks.

    function defer_parsing_of_js ( $url ) {
    if ( FALSE === strpos( $url, ‘.js’ ) ) return $url;
    if ( strpos( $url, ‘jquery.min.js’ ) ) return $url;
    return “$url’ defer=’defer”;
    }
    add_filter( ‘clean_url’, ‘defer_parsing_of_js’, 11, 1 );
    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 );

  • harga honda brio September 19, 2014, 6:31 pm

    Remove query strings from static resources will be destroyed by adding the following line to the last line of functions.php (wordpress)

    function _remove_script_version( $src ){
    $parts = explode( ‘?’, $src );
    return $parts[0];
    }
    add_filter( ‘script_loader_src’, ‘_remove_script_version’, 15, 1 );
    add_filter( ‘style_loader_src’, ‘_remove_script_version’, 15, 1 );

  • Anders September 23, 2014, 6:55 pm

    It works on my WP 4.0 with Nginx, my site is now lightning fast.
    I don’t use W3 cache.
    Thank you.

  • Atul Kumar Pandey January 3, 2015, 1:01 pm

    Thanks for providing a solution to remove the strings from static urls. However for non geeks I would like to suggest a plugin called Query Strings Remover [ http://atulhost.com/query-strings-remover ] which is worth trying.

Leave a Comment

PSD Conversions

Get started on your website today by hiring a professional developer who understands the needs of today's web. Optimized coding standards for PSD to WordPress conversions.

Contact Now!
Back to Top