Remove Query Strings from Static Resources

What are query strings?

Upon testing your website with a tool such as GTmetrix, Pingdom, or Google's PageSpeed Insights you may have come across the suggestion to remove query strings from static resources. Query strings are the URLs that you see containing special characters such as ? and &. Scripts and style sheets can sometimes contain a URL with an appended query string in order to identify the version of the asset or for purposes of cache busting. An example of a query string may resemble something like this:

/wp-includes/css/dashicons.min.css?ver=4.4.2

Removing query strings from static resources is important since if they remain, they can cause caching issues. Certain proxy caching servers and even some CDNs cannot cache static assets with query strings, resulting in a large missed opportunity for increased speeds.

How to remove query strings from static resources

There are various solutions available to removing query strings. The following describes a few ways to do so.

WordPress

For WordPress users there are a few options available when wanting to remove query strings from static resources. Here are a few suggestions:

• First solution: Edit your functions.php file to include a function that removes the query strings from all of the scripts and style sheets that are associated with your domain. The following snippet can be added to the bottom of your functions.php file which can be found and modified by going to Appearance > Editor in your WordPress dashboard.

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

• Second solution: If you are using the W3 Total Cache plugin, an option may be unchecked to avoid the creation of query strings. This option can be found by navigating to the W3 plugin Performance tab > Browser Cache. Within the General section of this page there is an option called "Prevent caching of objects after settings change".

  This option is deselected by default but if for any reason it is enabled, simply deselect it and save your settings to prevent the creation of query strings.

• Third solution: If you aren't using W3 total cache and aren't comfortable editing your functions.php file, you can opt to use a plugin which will allow you to remove query string. The remove query strings from static resources plugin is an easy to use and lightweight plugin that performs the same function as step one, but without modifying any PHP code yourself. Simply install and activate the plugin and your query strings are removed.

• Fourth solution: There is a fairly new WordPress plugin that allows you to get a little more granular with the removal of query strings. The remove query strings plugin removes query strings beginning with ver by default, however, you can add a custom snippet in your wp-config file to tell the plugin to remove other types of query strings as well. For example, this snippet removes all query strings beginning with ver, version, and my-arg.

  `define('REMOVE_QUERY_STRING_ARGS', 'ver,version,my-arg');`
  

Drupal

To remove query strings from CSS filenames within Drupal, the following code snippet can be added to your template.php file. Just remember to modify MYTHEME with your theme name.

<?php

/**
* Implements template_process_html().
*/

// Remove Query Strings from CSS filenames (CacheBuster)
function MYTHEME_process_html(&$variables) {
    $variables['styles'] = preg_replace('/\.css\?[^"]+/','.css', $variables['styles']);
}

?>

Ensure you completely clear your website's cache upon implementing any one of the above solutions.

Joomla

For Joomla users, the option to enable search engine friendly (SEF) URLs is located within the dashboard under Global Configuration > SEO Settings. Enabling this option cleans up your URLs to be more appealing to both humans and search engines (e.g. http://example.com/index.php?page=name compared to http://example.com/name). However, despite SEF URLs being activated, the non-SEF URLs may still be accessible. Therefore, in order to avoid search engine bots from crawling duplicate content you can define the following snippet within your robots.txt file.

User-agent: *
Disallow: /*?*

This will disallow any search bots from crawling content that contains a ? within the URL. This should however be used with caution. For more information regarding robots.txt and query strings read the article, a deep look at robots.txt.

Additionally, implementing a Joomla extension, such as JoomSEF, has the ability to generate SEF URLs while also performing duplicates management.

PHP

If you're building a site in PHP and want to implement a function that can easily remove keys and their values you can use the snippet below. This code will remove the variable $key and its value from the given $url.

function remove_querystring_var($url, $key) {
    $url = preg_replace('/(.*)(?|&)' . $key . '=[^&]+?(&)(.*)/i', '$1$2$4', $url . '&');
    $url = substr($url, 0, -1);
    return ($url);
}

Versioning alternative

To configure version control for assets without the use of query strings, you can define the version within the actual path of the file. For example:

https://example.com/fontawesome/4.5.0/font-awesome.min.css

This way, the version number is defined by a folder name which references the specified version of the file. Query strings are therefore not used and the version number is still specified.

Remove query strings from static resources example

To demonstrate an example of the before and after results from Pingdom, a test site which contains query strings within the asset URLs is tested with the following results.

Pingdom's grade for the remove query strings from static resources recommendation is only 22 as there are currently 7 resources that contain query strings. Upon implementing the snippet provided in the section above to the functions.php file, we ran the test again to receive the following new results.

There are no longer any resources containing query strings and therefore the Pingdom test returns a grade of 100.

This score may not be achievable in all cases as resources loaded from third party URLs may contain query strings within them that you have no control over. In this case, these URLs can be safely ignored. Your effort to remove query strings from static resources loaded from your domain should be the main priority.

Query strings and CDNs

As previously mentioned, query strings can inhibit proxy caches and CDNs from caching static resources. However, with KeyCDN we offer the Ignore Query String feature. This setting is enabled by default for all new Zones and essentially treats a request with a query string as if it does not have any. This allows KeyCDN to therefore properly cache and deliver the resource through our edge servers. Read our article for a full list of KeyCDN Pull Zone settings.

When using a CDN which does not have the option to ignore a query string, simply removing them with the options provided above is the best solution to ensuring that your files get cached and delivered as quickly as possible. Be sure to test the grade of before and after changes are made with a tool such as Pingdom. However, remember that if you do not remove query strings but are ignoring them via KeyCDN, the Pingdom recommendation given to remove query strings for static resources can be safely ignored.