How to remove query strings from CSS and JS in WordPress?

How to remove query strings from CSS and JS in WordPress?

If you are a website owner, who is very much cautious about your website’s speed, you’re great!

Loading speed is something that all website owners should take seriously – mainly to impress/please users; to make it comfortable and pleasant for their users to access their website.

And also to impress search engines because search engines tend to rank fast loading websites well in their search results – for the same reason – they want to impress their users.

And if you are speed conscious, you should have checked your site speed on sites like pingdom or GT Metrix.

And you would have noticed a speed suggestion like this: Remove query strings from static resources.

So… what are query strings?

What are these query strings? Why do they appear in CSS and JS files?

Query strings are URLs that have either “?” or “&”.

But why do these appear in the URLs and what’s the cause?

Actually query strings are used by plugin developers to push updates.

The static resources (like CSS and JS files) are usually cached by proxy servers or CDNs. And when a developer has to push an update, it won’t be rendered immediately because of the caching effects.

Which is why they use query strings to instantly render updates, as query strings won’t be cached.

But as a side effect, since they are not cached, they contribute to the loading time of a web page.

How to remove query strings from static resources?

Now that it is clear that query strings increase the loading time of your webpages, you should absolutely make sure that you remove those from your static resources.

There are two ways to do it. Either by implementing a code, or using a plugin.

#1 Implementing a code

Well, if you are confident with modifying the code and if you know what you are doing, this is the best way to do it.

But if you are not very confident about modifying site codes, it is better to choose option #2.

You have to add the following code in the function.php file of your site. You can do this in three ways:

  • Either through your WordPress Dashboard (I won’t recommend this)
  • Through online File Manager
  • Through FTP

However you do this, make sure you take a backup of your functions.php file so you don’t break anything.

It is better to avoid editing through WordPress Dashboard because if anything goes wrong your site will break and you cannot access the function.php file to correct the mistake!

Accessing your theme’s function.php file via online File Manager will require you to have cPanel access.

Paste the following code in the functions.php file and save:

// Remove query string from static files
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 );

#2 Use a plugin to remove query strings

Installing a plugin for this is the simplest way to deal with this, if you are not very skillful in editing the code.

I can recommend three plugins. Install any one of them to get the job done!

Remove query strings, Speed Booster Pack, and Query Strings Remover.

Remove query strings from static resources using any one of these methods and enjoy a boost in loading speed of your website!

About the Author

I'm Jane, the owner of Best Hosting And Design, where I help bloggers and website owners to create and maintain their websites. Check out the services I offer here so you can make use of them. For cutting-edge business tips, please head over to Jane Sheeba.

Leave a Reply 3 comments

Robin Khokhar - May 12, 2016 Reply

Hi Jane,
I will surely check by pasting this code in the wordPress. If it works then will be great for me. As i am unable to do that. So, thanks for sharing.

Milton B - June 21, 2016 Reply

Query strings have always been a menace. It’s nice that you have that small piece of code to get rid of them. Hopefully it can replace the plugin that I already use. By disabling the plugin I can save some resources and get work done at the same time. Thanks a ton Jane.

di sekitar - December 15, 2016 Reply

how long code or plugin take effect for removing query string?

because i have tried option 1 and 2, but when I scan my website in GTMetrix, the result still same.

Leave a Reply: