Improving the performance of web page | web application

The first step in improving the performance of your web page is to measure the current performance of the web page.

If you are using Google Chrome then try Speed Tracer. If you are using Firefox then try
Page Speed.

You can also try online performance testing at webpagetest.

Let us see some simple rules to improve the performance of the web page,

Rule: Remove broken links (<a>).

Rule: Combine the external javascript links into 2 or three links to reduce the HTTP request.

Rule: Use inline javascript for fewer lines of script.

Rule: To make the home page load faster have only the scripts needed for the home page either as external link or inline.

You can also try to defer the loading of javascript.

Rule: Try to defer the loading of javascript if possible.

Refer Browserscope for knowing the we browsers parallel loading capabilities of javascripts and other resources.

Rule: Combine the external css into 2 or three files to reduce the HTTP request.

Rule: Use inline css for fewer lines of css.

Rule: To make the home page load faster have only the css needed for the home page either as external link or inline.

Rule: Compress and compact the html, css and javascript resources to reduce the number of bytes sent over the network.

Rule: Minimize DNS lookups to reduce the resolution requests. Use URL paths e.g. host your site on www.xyz.com/abc instead of abc.xyz.com. Serve the startup javascript and other resources from the same host.

Rule: Minimize redirection from one URL to another.

Rule: Use image compressor. This would reduce number of bytes sent over the network.

Rule: Make the styles (css) load before the scripts (javascript). This would enables better parallelization of downloads and speeds up browser rendering.

Refer Browserscope for knowing the we browsers parallel loading capabilities of javascripts and other resources.

Rule: Parallelize the loading of resources.

Rule: Have the inline style and external style sheets in the "head" section.

Rule: Remove the unused css, javascript and html. This would eliminate unwanted bytes sent over the network.

Rule: Specify the size (height and width) of the image in the img tag.

For more details please refer Web Performance Best Practices and Let's make the web faster
.
Now try applying the above rules to your web page and measure the performance.

Watch the below two videos for more on improving web page | web application performance.

Speed Tracer



Page Speed