Do you know deferring jQuery is one of the most effective techniques for managing asynchronous execution in JavaScript?
jQuery is one of the handy JavaScript libraries that most web developers often use to make their tasks easier. However, sometimes using jQuery can hamper the website’s performance, which negatively impacts the user experience.
According to statistical research, approximately 76% of popular WordPress themes are using jQuery. Here, jQuery deferred comes into the scenarios. Here, we will discuss what jQuery is, the importance of deferring jQuery, and the easy way to defer jQuery and speed up a WordPress website.
What is jQuery?
jQuery is a free JavaScript library that wraps up a lot of core JavaScript functionalities in methods. you just need to call those methods with simple syntax. Let’s understand this with an example.
You want to change the text in <p> tag, in the case of JavaScript, you need to write the below code:
The JavaScript syntax:
document.getElementById(“myElement”).innerHTML= “Hello, world”;
On the other hand, in jQuery, you need to write the below code:
The jQuery syntax:
$(“#myElement”).text(“Hello, world”)
In the above example, you can see how using jQuery can make the work easier.
The importance of deferring jQuery
While jQuery can make things easier for a web developer, it typically slows down a WordPress website. During the initial page loading time, if the user’s browser comes across a jQuery that is not deferred, it pauses the HTML parsing and starts to execute the jQuery, which increases the Total Blocking Time (TBT), slowing the page rendering time.
By adding a defer attribute in jQuery or installing a WordPress optimization plugin RabbitLoader, you can significantly improve the website’s initial page loading time.
<script src=”path/to/jquery.js” defer></script>
Let’s focus on the importance of deferring jQuery, which includes:
- Faster a website’s initial page loading time
- Provide a seamless user experience
- Improve the conversion rate
Faster A Website’s Initial Page Loading Time
A jQuery in the HTML <head> tag blocks the HTML parsing process, which typically increases the page rendering time. Deferring jQuery instructs the browser to execute the jQuery later. This would significantly improve the website’s initial page loading time.
Provide A Seamless User Experience
Providing a seamless user experience should be one of the top priorities of every website owner. When users visit your website, the first thing they come across is PageSpeed. By providing a fast-loading website, you can impress your users and engage them with your website’s content, which improves the website’s average on-page time and reduces the bounce rate.
Improve The Conversion Rate
Conversion rate is a factor that is used to measure the percentage of website visitors who are converted into potential customers and complete a desired action on your website. The relation between average on-page time and conversion rate is positively correlated.
When users spend a long time on your website, it’s possible they will convert into potential customers, which significantly improves the website’s conversion rate.
What is HTML defer and Async attribute
In HTML, defer and Async are two common attributes which is used in the <script> tag to optimize the coding file. Although the purpose of using these two HTML attributes is almost the same (speed up the website), there are some differences in their functionalities.
Async
The HTML attribute ‘Async’ instructs the browser to load the JavaScript functions asynchronously as soon as it is possible.
The HTML syntax:
<!DOCTYPE html>
<html>
<head>
<title> asynchronous a JavaScript function </title>
<!– adding async to the JavaScript function–>
<script src=”home-page.js” async></script>
</head>
<body>
<h1> asynchronous a JavaScript function </h1>
<p>……</p>
</body>
</html>
Defer
By deferring the JavaScript function, you instruct the browser to execute the function after the HTML parsing is completed.
The HTML syntax:
<!DOCTYPE html>
<html>
<head>
<title> defer a JavaScript function </title>
<!– adding defer to the JavaScript function–>
<script src=”home-page.js” defer></script>
</head>
<body>
<h1> defer a JavaScript function </h1>
<p>……</p>
</body>
</html>
Easy ways to defer jQuery
At this point, you already have some idea about jQuery deferring. Here, we will discuss the easy way to defer jQuery. Two ways you can do this:
- Defer jQuery manually
- Using any plugin
Defer jQuery manually
Follow the below steps to defer jQuery manually:
Step 1: To kick off the website optimization process, first, you need to identify the jQuery from the WordPress theme by adding a line of code in your header.php file.
wp_enqueue_script(‘jquery’);
Step 2: It’s essential to create a child theme to safe your modification after updating the main theme.
Step 3: Add the below lines of code to your child theme’s function.php file in order to add the defer attribute in jQuery.
function defer_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, ‘/js/jquery/jquery.js’, [], null, [ ‘strategy’ => ‘defer’]);
wp_enqueue_script(‘jquery’);
}
}
add_action(‘wp_enqueue_scripts’, ‘defer_jquery’,100);
Using any plugin
As you can see in above, manually deferring the jQuery involves a lot of coding solutions which can be daunting for a non-coder. Here, we will see how to defer a jQuery effortlessly by installing the optimization plugin which helps you to achieve a good PageSpeed performance, enhancing the user experience and boosting your conversion rate.
As deferring jQuery is one of the toughest optimization methods, a few optimization plugins, like RabbitLoader, are able to do this.
Not only deferring the jQuery, but RabbitLoader also performs all necessary optimization methods to boost your WordPress website’s PageSpeed performance.
Conclusion
Providing a fast-loading website leads you to achieve a better conversion rate. Along with the other optimization methods like image optimization, CSS & JavaScript optimization, deferring jQuery is also essential to boost your website’s page loading time.
In this guide, we have discussed what jQuery is, the importance of deferring jQuery and the easiest way to do this. If you have enough time and are technically sound enough, then you can do it manually by following the above three steps. Otherwise, install an optimization plugin like RabbitLoader to defer jQuery and improve your WordPress website’s PageSpeed performance effortlessly.
Tom Chris