tinkerEdge > Blog > Web Performance > Load JQuery Asynchronously Improves Website Speed

Load JQuery Asynchronously Improves Website Speed

  • Web Performance
  • Cheok Lup

The popularity for using JQuery on websites have grown in recent years, and as high as 40% of websites out in the Web are employing JQuery. It is common in seeing web developers to use JQuery for sliding animations, form error checks, and interactive functionalities on websites. Many website owners do not realize that their website speed performance is impacted as the popularity for JQuery increases.

JQuery loads synchronously from as being called-up in thesection of the web page. It also blocks page loading, and download of other contents, i.e. CSS, Javascript, images. An uncompressed JQuery 1.6.2 is more than 200KB in file size, while the similar compressed file is approximately 90KB in file size.

This is getting worrysome for website speed performance, as JQuery continues to improve and increases in file size. A recent case study done by Microsoft suggests that website speed performance has improved by loading JQuery asynchronously, and has brought incremental business value in getting more search and on-page clicks. Excited by case study results, I proceeded to experiment with the JQuery Loader that asynchronously loads JQuery for web pages.

Here is a screenshot of the waterfall chart of the web page, prior to the experiment. And it is true enough, the JQuery file is indeed blocking other content from rendering.

Summary Table – Before Experiment

Website Speed Test Summary Table - Before Experiment

Waterfall Chart – Before Experiment

Website Speed Test Waterfall Chart - Before Experiment

Now let us see the results of the waterfall chart after the implementation to load JQuery asynchronously on the web page. The JQuery file no longer blocks other content from loading, and tremendously improved on the Start Render Time from 1.598s to 0.479s. Overall, the Load Time for the web page has improved from 4.479s to 3.429s.

Summary Table – After Experiment

Website Speed Test Summary Table - After Experiment

Waterfall Chart – After Experiment

Website Speed Test Waterfall Chart - After Experiment

Key Takeaways
Asynchronous loading of JQuery file do improve the load time for websites. Unfortunately, I was not able to obtain the analytics to depict any business benefits increment, i.e. search clicks, bounce rate, on-page clicks, for this experiment. You might want to implement the asynchronous JQuery loading on your website, and share your findings.

This website uses cookies and asks your personal data to enhance your browsing experience.