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.

Optimization Tips

Leave a Comment

Current month ye@r day *

Comments

  • Maris King September 11, 2012, 1:55 am

    Thanks for that quick note on editing functions.php or custom_functions.php.
    I might be doing something wrong on editing that and might not be able to bring it back.

    Reply
    • Matthew Horne September 11, 2012, 1:46 pm

      I would be happy to take a look for you, so fat all sites that ive used this script on havn’t had any problems, but there are themes that may have issues that I don’t know of yet.

      Reply
  • Larry James September 16, 2012, 2:45 am

    Hi Matthew, I have added your code to my functions.php file, but I wanted to ask you a question. I am using the W3 Total Cache plugin to improve the performance of my blog. Does the W3 Total Cache plugin not do this for me?

    Reply
    • Matthew Horne September 16, 2012, 3:18 am

      Hi larry, w3 does not remove query strings in fact one of the options under browser caching called prevent caching of object change can add query strings. Sort of like giving each cached file a unique Id to check for changes. But you can manually clear cache and personally I would rather not have the queries for performance purposes..

      Reply
  • Nate Dalliard December 13, 2012, 3:16 pm

    Hi Matthew, where do I put this in Thesis 2.x? Or isn’t it necessary there? Thank you!

    Reply
    • Matthew Horne December 13, 2012, 3:23 pm

      custom.php or master.php.

      Custom.php is found in the skin files, via ftp or filemanger on the server.

      located – wp-content/thesis/skins/skin_name/custom.php

      master.php

      located – /wp-content/thesis/master.php

      Reply
  • Vivek Nath.R January 10, 2013, 2:14 pm

    After adding the above code in my functions.php, I’m getting server error.

    Reply
    • Matthew Horne January 10, 2013, 3:05 pm

      where did you add the code?

      Reply
      • Vivek Nath.R January 10, 2013, 4:10 pm

        At the bottom of functions.php and I’m using Twenty twelve theme.

        Reply
        • Matthew Horne January 10, 2013, 4:52 pm

          I believe there is a function with 2012 that conflicts, but I will have to check it out.

          Reply
          • Vivek Nath.R January 10, 2013, 4:56 pm

            Okey, please update the tutorial once you find the solution and let me know.
            Thanks.

  • anand2cs January 22, 2013, 5:38 am

    nice tip, but i facing problem with my posts thumbnail images. in pingdom all results fluid with warning of images in blog @remove query strings from static resource..

    Reply
  • Ratanak Ou January 25, 2013, 7:33 am

    It seems does not work for my blog. I also added into the function.php but I still see the Query when I checked with GTmetrix. Please help !

    Reply
    • Matthew Horne January 27, 2013, 7:14 am

      It will only strip wordpress related queries, queries from external resources may not be stripped.

      Reply
  • Thomas Zickell January 26, 2013, 11:24 pm

    Will this work on Woo and Genesis-based themes? great articles all by the way thank you for the tip I always see these must be removed but never knew the best way to do it.

    Reply
    • Matthew Horne January 27, 2013, 7:15 am

      Hi, thank you, I have used this on many themes and in almost all cases it works. It depends on what is already in the functions, as some themes already have some method to either add or strip query strings.

      Reply
      • Thomas Zickell January 31, 2013, 5:48 am

        Hi Matthew,
        So if I’m using a genesis base theme manager just remove the “?” and replace it with either nothing or “#” has that worked at all ever? The reason I ask is I was given some other vices well I just want make sure it’s solid. Thank you very much for your response.
        Sincerely,
        Thomas

        Reply
        • Matthew Horne January 31, 2013, 6:15 am

          You can always add this to your functions.php via your hosts file manager in cpanel or whatever file manager your have, Ftp will work to, add the script, upload and test out the site, if it works then its all good, if no then you can easily removed it.

          Query strings are there for a reason in terms of notifying browsers of an updated script, but wordpress adds them to everything including resources that don’t change often at all. So you can remove them and then set your cache to perhaps 1 week, that way you save processing lots of queries but also still benefit from users getting fresh versions of the site.

          Regards

          Reply
  • Ivan Kreimer February 13, 2013, 7:33 pm

    Matthew, thanks for the post. I’m using Thesis 1.82 and this doesn’t seem to work. Of course, it’s not your fault, it’s me that doesn’t know what to do.

    Anyway, what I did is put that same code in my custom_functions.php, save it, empty all the cache, refresh the home page and see the source. The query strings are still there!

    What am I doing wrong?
    Thanks

    Reply
    • Matthew Horne February 14, 2013, 6:35 am

      Whats your URL, so I can check if you have some other settings such as a W3 total cache settings that adding query strings.

      Reply
  • Agung Setiawan February 23, 2013, 6:41 am

    work perfectly on my site,
    after reading this, i write a tutorial in the same topic to help more other people

    thank you

    Reply
  • placebo February 28, 2013, 8:36 pm

    Guys, If I add this code in my functions, my lightbox plugin (easy fancy box) does not work. Andy idea how can I bypass this? With this codesnippet I receive 98/100 by pingdom. Without this code snippet 88/100… Thx

    Reply
    • Matthew Horne March 1, 2013, 7:41 am

      What the site URL, if you add this snippet then email me once its up I will check the site for errors and see what needs to be changed. I can’t change the above script, but it may be a simple JS error, often replacing $ with jQuery. WordPress should always use jQuery instead of $ as the dollar sign can causes conflicts and errors. It may be that the plugin also requires a query string for its current state, but send me an email when you have added the script.

      Reply
  • Amjad March 2, 2013, 10:49 pm

    Its good but it breaks google fonts stylesheet url. Is there any way to add it as an exception?

    Reply
  • coach-abondance April 20, 2013, 7:03 pm

    I there,

    I faced a problem with this nice hack, namely with google maps integration.
    The initial code
    script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&language=fr&ver=3.5.1'
    was also troncated, which brings an error “The Google Maps API server rejected your request. The “sensor” parameter specified in the request must be set to either “true” or “false”.
    I just add an exception to the function :

    $parts = explode( '?', $src );
    $part_test_google = $parts[0];
    ($part_test_google == 'http://maps.google.com/maps/api/js') return $src;
    else return $part_test_google;

    Similar proclem is also reported for google fonts.
    Hope it helps !

    Reply
    • coach-abondance April 20, 2013, 7:13 pm

      Even easier :

      $parts = explode( '?ver', $src );
      return $parts[0];

      Just truoncate version, not other queries

      Reply
      • Matthew Horne April 21, 2013, 5:59 am

        I have yet to revisit this and make changes to be more specific, stripping the version will likely be the best option.

        Reply
  • Kukuh Nova Putra June 2, 2013, 4:35 pm

    Hi Matthew, i have add your script on fucntion.php and it’s work.
    But when I try Re-Test Page with gtmetrix, the “Remove Query strings from Static Resources” become 97, so this is not work perfectly.
    Any solution?

    Reply
    • Matthew Horne June 3, 2013, 4:08 am

      Assuming your talking about the site you have linked when commenting.

      I tested the site and indeed this script will break if we remove all the parameters.

      “/?custom-css=1&csblog=1&cscache=6&csrev=20″

      It looks like its some CSS you added to custom.

      I would add those contents directly to the main stylesheet.

      Also if you did remove that link and add the CSS to the main stylesheet, you would also fix the order of style and scripts recommendation on gtmetrix.

      You could use a child theme, that way you can edit the theme without worrying about updates.

      Reply
  • Matthew Horne June 3, 2013, 4:03 am

    Hi Kukuh, the reason for that is the script above will only remove query strings that have version numbers. Query stings do have a purpose, that purpose is in some cases important. This was pointed out to me by Coach-Abondance above, as you can see the script he used has a query string, however it contains so relative information that will alter the behavior of that script.

    “http://maps.google.com/maps/api/js?sensor=false&language=fr&ver=3.5.1″

    Using the script I had before would break this, so he suggested that I just remove the version number instead, which will cover most of the scripts, but not all.

    Also I cannot manipulate external resources, so if you have resources loading outside of your server then you will not be able to manipulate them.

    Reply
  • Kukuh Nova Putra June 3, 2013, 6:50 pm

    Thank you very much for your reply. I must learn optimation blog with your post :)

    Reply
    • Matthew Horne June 4, 2013, 6:57 am

      Thats cool man, I am writing an ebook for webmasters to use to maintain their sites in terms of efficiency, I do not know when it will be finished, but I am slowly chipping away at it.

      Reply
  • Salman Ahmad August 10, 2013, 10:12 am

    I tried this method but the problem still persists and however previously I was getting an error:
    “Eliminate external render-blocking Javascript and CSS in above-the-fold content”
    And I’m not getting this anymore and the site speed is now 90+ according to google developer tools.
    How is it so ? Could you please explain ?

    Reply
    • Matthew Horne August 10, 2013, 11:31 am

      Query strings are not cached by some proxy browsers or servers, removing the query string ensure the resource can be cached. The code above will only remove version numbers and not query strings that are required for certain functions.

      Reply
  • Codeaddict August 20, 2013, 9:15 pm

    after adding the code, my CSS combined sprite images got all messed up!

    Reply
    • Matthew Horne August 21, 2013, 12:44 pm

      Some times query strings are required for certain things to function.

      Reply
  • Jim M September 4, 2013, 3:41 pm

    Does it still work with v3.6? I tried to applied the code but after causing my browser the unwanted strings are still there.

    Reply
    • Matthew Horne September 4, 2013, 10:55 pm

      yes it works with wp 3.6. I am using it on this site and the query strings for version numbering is absent. You may need to clear your cache to see it update.

      Regards

      Reply
  • zanchit September 9, 2013, 10:05 am

    Hi
    Have added the code to bottom of functions.php , made sure the ‘prevent caching’ is unchecked in W3, emptied browser cache, retested and still have the same problem in pingdom. getting 50/100.
    any advice much appreciated

    Reply
    • Matthew Horne September 10, 2013, 9:40 am

      Use Gtmetrix to measure the site. It gives better results.

      You have a grade A for pagespeed and Yslow and the site loaded as follows:

      Page load time: 2.69s
      Total page size: 2.72MB
      Total number of requests: 39

      I would recommend optimizing the images in the slider using tinypng.org just download them from the server and then drag and drop them in to tinypng.org and re-upload them to the same folder ensuring they have the same file path name.

      Reply
  • Loosi September 12, 2013, 2:18 am

    I added in my website but no changes in speed. I am using wordpress twenty twelve theme.

    Reply
    • Matthew Horne September 17, 2013, 7:40 am

      Its not designed to improve speed on its own, it is designed to help strip query strings from static resources that have a version number. This then helps aid caching of those resources.

      Reply
  • 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..

    Reply
  • Shemul September 23, 2013, 6:19 pm

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

    Reply
  • 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?

    Reply
  • 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.

    Reply
  • Hardeep November 3, 2013, 11:04 am

    Thanks bro, its works like a charm.

    Reply
  • Lolo November 19, 2013, 11:33 am

    Great and simple, thank you!

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

    Thanks very much.

    Reply
  • Lobo December 15, 2013, 8:46 am

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

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

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

      Reply
  • bambangmono December 18, 2013, 6:14 pm

    tanks for share, i have a try but no work

    Reply
    • 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

      Reply
  • 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?

    Reply
    • 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.

      Reply
  • 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.

    Reply
    • 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.

      Reply
  • 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

    Reply
    • 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

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

    Wow great this works perfect for my site… thank you

    Reply

This site rocks the DIYWP Optimized Skin for Thesis & is hosted by Webhostingbuzz