Saturday, April 14, 2012

Web application Performance Optimization Part 1: Optimizing JavaScript

From the past few years JavaScript has become the most widely use technology for web applications. JavaScript makes the user interface more interactive and responsive. If we take a look at SharePoint 2010. It has more interactive and responsive interface with fewer page round trips to the server and all this because of the more use of JavaScript.

In today’s post, I’m going to share some of the techniques that I used to optimize SharePoint/ASP.NET applications from JavaScript perspective. All of the following techniques are common for other technologies too.

Move Scripts at the Bottom

The HTTP/1.1 specification suggests that browsers download two components in parallel per hostname. Many web pages download all their components from a single hostname. While download/execute script tags, browser won't start any other downloads. So if we add scripts in head section of the page. It blocks parallel downloads.

Move/Load Scripts after page contents – (ASP.NET, SharePoint) has solutions for ASP.NET and SharePoint to unblock parallel downloads.

Avoid Inline Scripting

First question that comes in mind when developer is coding JavaScript: Should JavaScript be contained in script file, or inlined in the page itself? Using script file in the real world generally produces faster pages because the JavaScript files are cached by the browser. JavaScript that is inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript is in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.

Now the decision between number of HTTP requests and the size of the HTML document is difficult. If we create a matrix on our applications then most of the time script files will be the best option. Because we can overcome to HTTP request issue by using CDN, different host name, and combining script techniques.

Minify/Compress JavaScript

The amount of data sent in each server response can add significant latency to your application, especially in areas where bandwidth is constrained. Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time.

JavaScript Compression Tools Comparison has comparison between different tools.

Remove Duplicate (i.e. Redundant) JavaScript

These days’ applications are using different JavaScript libraries, plugins, and custom scripts. When developers are using these libraries, plugins, etc… in some situations they never realize that they’re replicating same code/components in the form of different versions.

Let’s say, if we’re using jQuery library along with different plugins into our application. Sometimes different plugins are compatible with different versions of jQuery or some plugins are completely dependent on other plugins or some plugins have additional functionalities by adding other plugins. Any one of these situation sometimes cause script duplication.

1 comment:

  1. Thank you so much for this review! I found it very helpful, this seem like a program that would be of great use to me. Keep it up!

    Arabia Interactive - Web Design Dubai