How to Defer Parsing of JavaScript in WordPress

Introduction

There are a few reasons why we should defer parsing of JavaScript in WordPress. The most important one is speed and performance. Generally, JavaScript is placed between the <head> </head> tags. When opening a website, it loads the code from top to bottom. This means that if you have lots of JS or long strings, it will take more time for the website’s content to appear, as it first waits for all the JavaScript to load.

By deferring parsing of JavaScript, the website would not wait for the JS code to load, which would result in a quicker loading time. Nowadays, optimizing a website for social media is crucial. Such features as Facebook, Twitter, Google+, Linkedin and other social network sharing buttons or feeds use JavaScript. However, we must keep in mind that content should be the priority, meaning that by deferring parsing of JavaScript we can greatly increase front-end user experience and SEO ranking. In this WordPress tutorial, we will cover several ways on how to defer parsing of JavaScript in WordPress.

Deferring parsing of JavaScript via functions.php

Alternatively, it is possible to carry out the task by editing one of WordPress core files. To defer parsing of JS, this code should be copied to the bottom of your theme’s functions.php file:

function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

Testing the Changes

Once you’ve are finished with one of the above options, use the same website speed tool and test your website. Here are the performance results after deferring JavaScript parsing in WordPress:

Defer Parsing of Javascript WordPress success in GTMetrix website optimization score

Congratulations, by following these few easy steps, you have boosted your website’s performance for a quicker and better experience!

Conclusion

In this short guide, we have learned how to improve the speed and performance of your WordPress website by deferring parsing of JavaScript. Remember, the faster and smoother your site is, the more traffic and happier visitors you will have!

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.

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:

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

In some cases (depending on your WordPress configuration) this code can cause 500 Internal Server Error. In that case, please contact our WordPress Development Group

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.

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.