Steps to Improve the Performance of Web Application

In recent times performance has become a major hurdle in developing Web Applications. Though there are many applications with stunning design and interface, the performance of many such applications are not up to the mark. We often find web pages taking minutes to load. By following few steps we can easily achieve the best performance rating,

1.Gzip page resources

Gzipping is the most efficient way of saving the bandwidth and speed up the site. What exactly Gzipping does? Well, Consider a browser requests for a file (say ?sample.html?) to a server. Suppose if the server doesn?t support Gzipping then it sends the requested file (?sample.html?) uncompressed. If the size of the page is 200KB, then the server sends as is. The Browser then takes longer time to display the page. Now Consider this Scenario. Suppose a browser requests for a 200KB file to a server which supports Gzipping, then the server sends a compressed version of the page to the browser with some 50KB which is pretty faster for the browser to display. What is the problem?? 200 KB is actually huge for the browser. This contains lots of content. Most of the content consists of HTML elements (Both opening and closing.)So, obviously words are repeated too often making the text big. So the Simple solution for this is to Zip it. Typically Gzip is done at server side.

2.Minify JavaScript and CSS external resources

Minification refers to removing unwanted stuff from the page without affecting the functionality of the source code. Here unwanted stuff means spaces, comment lines, new lines. Though these characters help in debugging the code and code beautification but this become expensive at production. These characters unnecessarily increase the size of the page making the page loading slow. Minification is done manually using YUI Compressor

3.Make fewer HTTP resource requests

Most of the response time is consumed at the front end due to multiple HTTP requests. These requests include image, CSS, JS files. We can easily reduce the number of HTTP requests with little care. Below are the few techniques for this, a.Combining multiple files into a single File: Combining multiple files into a single file will reduce the HTTP requests. This needs to identify the files which can be combined. b.Image Maps: Combining Multiple Image into a single image. This only works if the images are contiguous like for Navigation Bar. c.Sprite Images: This is the most efficient method to reduce the HTTP requests. This involves in the combination of multiple images in a single image and accessing these using ?background-position? property of CSS.

4.Page resources should have an “Expires” Header

Expires header tells the browser when a resource is to be loaded from source and when to fetch form browser cache. When we set the expires header for an image (for suppose), then whenever the image is requested it is being fetched from browser?s cache, thus reducing the number of HTTP requests. Expires header is recommended to be set for one month to one year. At most care should be taken when you are planned to use this, as extensive use of this leads to many performance hazards. Since the ultimate purpose of setting the expires header is to reduce the number of HTTP requests, but it is difficult to know when to make a request and when not to. Suppose if there are frequent updates to a web page then setting expires header in that case may become evil.

5.Avoid the use of CSS expressions

CSS expressions are the powerful way of dynamic styling. For example the CSS expression for changing the background color dynamically is as follows, background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” ); Here the expression consists of a JavaScript expression. The CSS property is set to the result. The dangerous thing about using CSS expressions is that they evaluate more frequently than expected. They are evaluated on every page render, page resizing, scrolling and even on mouse move. Moving the mouse around the page can generate around 10000 expressions. Hence care should be taken when handling them. It is always suggested to use event handlers than CSS expressions.

6.Avoid Nested Tables

It is very important for the Web pages need to download fast. Speed is very important for the Web pages. Nested tables cause the pages to download slowly. If there is a single page then it is not a problem. But if there are nested tables it gets more complicated for the browser to render, and so the page loads more slowly. And the more tables you have nested inside one another, the slower the page will load. So whenever you create a page with nested tables then that affects the performance.Normally, when a page loads the browser starts at the top of the HTML and loads it sequentially down the page. However, with nested tables, it has to find the end of the table before it can display the entire thing.

7.Configure ETags for page resources

Etag or entity tag is a part of HTML for making web cache validation. They are the mechanism by which server and browser use to determine whether a component in the web browser?s cache is matching with the one in the server.This allows caches to be more efficient, and saves bandwidth, as a web server does not need to send a full response if the content has not changed. The problem with ETags is that they typically are constructed using attributes that make them unique to a specific server hosting a site. ETags won’t match when a browser gets the original component from one server and later tries to validate that component on a different server, a situation that is all too common on Web sites that use a cluster of servers to handle requests. By default, both Apache and IIS embed data in the ETag that dramatically reduces the odds of the validity test succeeding on web sites with multiple servers.

8. Use a Content Delivery Network to deliver page resources

The use of Content Delivery Network solves many performance related issues. Especially it solves the major problem ?latency?, the amount of time it takes for the host server to receive, process, and deliver on a request for a page resource (images, CSS files, etc.). This also solves the bandwidth issues and makes the files globally available. Typically, latency is in the 75-140ms range, but it can be significantly higher, especially for mobile users accessing a site over a 3G network. This can easily add up to 2 or 3 seconds of load time, which is a big deal when you consider that this is just one factor among many that can slow down your pages.A CDN caches static resources in distributed servers.

9.Avoid redirects on page and its resources

Redirection refers to change in the URL to a different location. The important thing to remember is that redirects slow down the user experience. Inserting a redirect between the user and the HTML document delays everything in the page since nothing in the page can be rendered and no components can start being downloaded until the HTML document has arrived. We often miss the trailing ?/? at the end of the URL for example http://www.w3schools.com which results in the 301 response making it to redirect to http://www.w3schools.com/.

10.Page should not have a large number of nodes

Reducing the number of nodes in a web page also accounts for fast rendering of a web page.For best performance, the number of child nodes attached to individual nodes in a content repository should not exceed 1,000 (as a general rule). Apart from this the other factors which improve the performance are below.

11.Page DOCTYPE(s) should be defined as strict

The declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. In HTML 4.01, the declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly. There are few XHTML elements and attributes which are available in one DTD but not available in another DTD. So while writing your XHTML document you must take care while selecting your XHTML elements or attributes. However XHTML validator will help you to identify valid and invalid elements and attributes. Following are the XHTML attributes, XHTML 1.0 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. XHTML 1.0 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. XHTML 1.0 Frameset This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content. XHTML Transitional is much looser than Strict and allows you to have older types of HTML code. But there are many good reasons for following the Strict rules?for example, updating your site design will take less time in the future and your site will be more compatible with future improvements in technology.

12.Put JavaScript at or near the bottom of the page

When we put the JavaScript files at the top of the page, the browser loads the JavaScript before the markup, images and text are being loaded. Since browser loads the JavaScript Synchronously, while loading the JS file it doesn?t load the markup. Hence we can see a blank page in the beginning. Whereas , if we place JavaScript at the bottom of the page the page initially get loaded and then the JavaScript, thus giving the user a good interface.

13.Move CSS to the document HEAD at the top of the page

Putting the CSS in the body of the page may affect the performance of the page. This is because the browser stops the rendering of the web page until the external styles are loaded. Hence it is always a good practice to load the CSS files at the top of the Head.

14.Externalize JavaScript and CSS

It is always a best practice to externalize the JavaScript and CSS files. This not only makes the browser to load synchronously but also makes debugging easy. NOTE: However,15% of the nodes with ?style? are allowed.

15.Remove duplicate referenced scripts

We often see this

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

Including both minified and unminified versions in the same page is of no use and in turn causes an overhead in loading those files. Hence this should be removed.

16.Reduce DNS lookups for page resources

Multiple DNS lookups also takes considerable amount of time. Hence we need to reduce the DNS lookups for a page resource. A limit of 6 is allowed.

17.Page should not exceed an overall weight of 700KB

The page size should not exceed 700KB. This can be achieved by Gzipping and minification of the pages.

18.Images should not exceed 100KB in file size

Images size should not exceed 100KB size. This can be achieved by image optimization techniques like compressing the image to required format.

19.Reduce HTTP 4xx and 5xx status Responses

Try reducing the HTTP 4XX and 5XX responses by proper handling. This also helps in the performance improvement of the Web Page.

Watch now: Essay Tips
About This Author

Venkatesh has 2 years experience in the field of web Designing. He holds bachelor degree in Computer Science Engineering from JNT University ,Hyderabad. Venkatesh is well versed with HTML5, CSS3 and JQUERY. He has also worked on KINETIC JS and EXT JS. As a UX developer, Venkatesh has tried to bring about effective teaching and learning in the courses he designed.

Comments are closed