Category: Optimization & Best Practice

How to Remove Version Query String From Static JS And CSS Files

A website owner should always be trying to improve the speed of their website as much as possible. When you analyze your page using any page speed analyzer such as Page Speed, YSlow or Pingdom, you are very likely to see suggestions to remove query strings from static resources, such as Stylesheets and JavaScript files. This is a problem as many proxies will not cache the resources if it has a query string in the URL. A tip on the Google best practice pages is to remove all query strings from your static resources to enable proxy caching of the file. So in this article I will show you how you can easily remove version query string from static scripts and stylesheets.

Most of the stylesheets and JavaScript files added by WordPress plugins and themes usually have version query string (?ver=) in their URL. And we want to remove version query string from these static resources to make our pages and static resource to cache so that the pages can load faster. There are a couple of plugins in WordPress respiratory that does this job but this is an easy enough task to use plugin.

Just paste this following WordPress snippet in your theme’s functions.php file to remove version query string from static scripts and stylesheets resources. Once you are done adding this snippet in your theme, head back to analyze your page again and notice the difference.

https://web.archive.org/web/20220701054219if_/https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-7443478584383873&output=html&h=280&slotname=3463695748&adk=2171063462&adf=4260535974&pi=t.ma~as.3463695748&w=336&lmt=1775836510&psa=0&format=336×280&url=http%3A%2F%2Fwpcodesnippet.com%2Fremove-version-query-string-static-js-css-files%2F&wgl=1&dt=1656654141627&bpp=1&bdt=2660&idt=1111&shv=r20220613&mjsv=m202206090101&ptt=9&saldr=aa&abxe=1&prev_fmts=336×280&correlator=866940032436&frm=20&pv=1&ga_vid=2014663794.1656654144&ga_sid=1656654144&ga_hid=2026761337&ga_fc=0&u_tz=0&u_his=8&u_h=926&u_w=428&u_ah=926&u_aw=428&u_cd=24&u_sd=1&adx=30&ady=1714&biw=428&bih=781&scr_x=0&scr_y=0&eid=44759875%2C44759926%2C44759837%2C31067528%2C31067629%2C31068030%2C31062930&oid=2&pvsid=1571916119939077&tmod=4619812&uas=0&nvt=1&eae=0&fc=896&brdim=0%2C0%2C0%2C0%2C428%2C0%2C428%2C926%2C428%2C781&vis=1&rsz=%7C%7CoeEbr%7C&abl=CS&pfx=0&fu=0&bc=31&ifi=2&uci=a!2&btvi=1&fsb=1&xpc=2VD5mXF85c&p=https%3A//web.archive.org&dtd=2142

// remove version query string from scripts and stylesheets
function wcs_remove_script_styles_version( $src ){
    return remove_query_arg( 'ver', $src );
}
add_filter( 'script_loader_src', 'wcs_remove_script_styles_version' );
add_filter( 'style_loader_src', 'wcs_remove_script_styles_version' );

How to Stop Loading Contact Form 7 JavaScript And CSS in WordPress

Contact form 7 is undoubtedly one of the most popular plugins in WordPress plugins directory. It makes our life a lot easier by allowing us to create contact forms without any PHP knowledge and add them in our website with the help of shortcode. The plugin is super easy to set up and use. But the only downside I could see is that it automatically inserts couple of JavaScript and CSS files on pages. Although it’s essential to have those files on page for proper functioning of Contact form 7 but it’s useless to keep plugin JavaScript and CSS files on pages that do not have any contact form.

In this topic, we will see how to remove or stop loading Contact form 7 JavaScript and CSS files. Contact form 7 use standard wp_enqueue_scripts function to load these static plugin files which makes it easy for us to stop them from loading on all WordPress pages and allow them manually, to load on pages that actually contains a contact form.

So following code snippet will disable the loading of plugin JavaScript and CSS files. You must add this code snippet into your theme’s functions.php file.

https://web.archive.org/web/20220523115517if_/https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-7443478584383873&output=html&h=280&slotname=3463695748&adk=2438680785&adf=246442902&pi=t.ma~as.3463695748&w=336&lmt=1775835035&psa=0&format=336×280&url=https%3A%2F%2Fwpcodesnippet.com%2Fstop-loading-contact-form-7-javascript-and-css%2F&wgl=1&dt=1653306921116&bpp=1&bdt=4153&idt=7200&shv=r20220613&mjsv=m202206140101&ptt=9&saldr=aa&abxe=1&prev_fmts=336×280%2C300x250%2C0x0&nras=1&correlator=7679915271680&frm=20&pv=1&ga_vid=1932052441.1653306929&ga_sid=1653306929&ga_hid=241297331&ga_fc=0&u_tz=0&u_his=7&u_h=926&u_w=428&u_ah=926&u_aw=428&u_cd=24&u_sd=1&adx=30&ady=1792&biw=428&bih=781&scr_x=0&scr_y=0&eid=44759875%2C44759926%2C44759842%2C42531556%2C31068039%2C31064019&oid=2&pvsid=1341909750081000&tmod=1118653441&uas=0&nvt=1&eae=0&fc=896&brdim=0%2C0%2C0%2C0%2C428%2C0%2C428%2C926%2C428%2C781&vis=1&rsz=%7C%7CoeEbr%7C&abl=CS&pfx=0&fu=0&bc=31&ifi=2&uci=a!2&btvi=1&fsb=1&xpc=KqCj4au9CH&p=https%3A//web.archive.org&dtd=9295

// stop loading Contact form 7 JavaScript and CSS files
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

Super easy. Right?

Now if we want to include Contact form 7 JavaScript and CSS files on a page, then we will add this code snippet.

// selectively load Contact form 7 JavaScript and CSS files
function rapidx_deregister_javascript() {
    if ( is_page( array( 'contribute', 'contact-us' ) ) ) {
        if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
            wpcf7_enqueue_scripts();
        }
        if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
            wpcf7_enqueue_styles();
        }
    }
}
add_action( 'wp_enqueue_scripts',