WordPress Tutorial

How to Remove Query Strings From JavaScript and CSS in WordPress

Introduction

Query strings are URLs that contain either ? or &. Static resources (such as JavaScript and CSS) are usually cached by proxies or CDNs. When a developer makes a change, it will not be rendered instantly due to caching effects, which is when query strings come into play. These strings are not cached, thus allowing updates to be rendered immediately. However, it will also increase the loading time of a webpage. Website optimization tools suggest removing query strings from static resources to increase website speed. This is especially useful for a WordPress site, as it will provide it with many benefits.

Removing query strings from static resources will enable caching on proxy servers, thus increasing the overall WordPress site speed. Your CSS and JavaScript will make fewer server requests, thus decreasing the resource usage of your WordPress site. This will also give your WordPress site a SEO boost, as WordPress sites with better optimization generally have a higher rank on Google.

The downside of query string removal in WordPress can be easily overcome by managing your cache, which will be further explained in this WordPress optimization guide.

What you’ll need

Before you begin this guide you’ll need the following:

  • FTP access
  • WordPress Admin Panel access

Step 1 — Analyzing the site

For this step, I would recommend using GTMetrix. After analysing a test WordPress site, here are the results:

query-string-analysis-1.

Depending on your WordPress theme, website size, and other factors, the amount of CSS and JavaScript files may vary. Each time a visitors enter your website, the browser will make a request to get CSS, JavaScript or other static content. This will generate more requests to your server and will take a bit more time to load. If you are using a Content Delivery Network, browser caching or WordPress cache plugins your files may not be cached resulting in slower file delivery, thus removing query strings will help improve your WordPress site caching and decrease your resource usage at the same time.

Step 2 — Removing query strings in WordPress

There are a few ways to effectively remove query strings from static resources in WordPress.

Option 1 – Removing query strings from static resources (CSS, JavaScript) in WordPress using plugins

The most convenitent plug-in for query string removal in WordPress would be Speed Booster Pack

After implementing Speed Booster Pack to WordPress, navigate to the Settings of the plugin.

remove query strings in WordPress Booster Pack 1

Tick the box Defer parsing of javascript files and press Save Changes

remove query strings in WordPress Booster Pack 2

It is also possible to use plugins such as Remove Query Strings From Static Resources or Query Strings Remover to reach the same goal.

Option 2 – Removing query strings from static resources (CSS, JavaScript) in WordPress via functions.php

IMPORTANT! Make sure to have a backup of functions.php file before making any changes.

Query strings can be removed from WordPress by adding this code at the bottom of your functions.php file located in wp-includes directory:

In some cases (depending on your WordPress configuration) this code can cause 500 Internal Server Error. In that case, the plug-ins from Step 1 will do the trick.

Countering the downside of query string removal in WordPress

Proper management of WordPress cache will allow you to deliver the latest files to all visitors without causing any issues. If you are using WordPress caching plugins, you will simply need to clear your WordPress cache after making a change. Same goes if you implemented browser caching for your WordPress site, clearing the browser cache will let you see the latest changes. These few tricks will let you counter the small disadvantage that removing query strings from static resources in WordPress may cause.

Step 3 — Testing the changes

For comparison, here are the results of GTMetrix analysis after removing query strings from static resources in WordPress:

query-string-remove-Wordpress-analysis-2

Conclusion

In this short guide, we have learned how to increase the performance of your WordPress website by removing query strings from static resources such as JavaScript or CSS.

Add Comment

Click here to post a comment

Join thousands of subscribers worldwide

and get awesome deals & the newest tutorials to your email

Please wait...

Thank you for sign up!

Start saving now!

All-in-one web hosting & domain name from

$2
15
/mo
More in WordPress Tutorial
How to Login to WordPress Dashboard

Close