Many of the web application face major challenge for performance. There are various ways to improve performance of the website. It can be Server Side Code Improvement (e.g. code analysis and refactoring, db side changes etc), Hardware Side (improve on hardware configuration, increasing number of servers etc) and Client Side. When i say client side here i mean User Interface (such as Image, JS, css etc). I am going to explain in this article about various opportunities for performance improvements from Client side. This is not very exhaustive list but some of the items which can be controlled and taken care easily.
o Avoid complete page refresh wherever possible. You can use AJAX calls. This way we can reduce amount of the network data to be transferred and complete page refresh.
o Use "GET" for AJAX request where ever possible if data being transferred is not sensitive, amount of data is less, or you are getting data from server. Reason behind this is POST request creates two connections for single submit one for header and other for body. But GET does this task in single connection. Get performs better then POST request.
o Minify the JS/CSS file. This will reduce the JS/CSS file size, which will be downloaded faster from server. Minifying JS/CSS removes unnecessary blank lines, comments. Which helps in reducing the file size. Less file size means less data to be downloaded from server.
o Reduce the number of js/css file, combine them in single and use them. Less number of file mean fewer HTTP request to server for downloading them.
o Optimize the image file. This process will reduce the image file size by little compromise on quality of the image. Check in Google there are online image optimizer available e.g. http://tools.dynamicdrive.com/imageoptimizer/
o Put css in top and java script at the bottom of the code.
o Specify dimensions that match those of the images themselves. Create image of required size and use them rather than fixing size using height and width attribute in <img height="100px" width="100px" /> tag. E.g. if your application needs 100X100 image and you have same image but of different height X width say 300X300 than don’t set height and width to 100X100 in image tag for your need. Create image of required size and use it. This is because browser still downloads bigger size image.
o Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints. But make sure above point is taken care when you specify the image height and width.
o Avoid empty image tag. E.g. <img src="" /> or var img=new Image(); img.src="";
o Use png image on top of gif images.
o Use pngcrush to optimize the image before using them. http://pmt.sourceforge.net/pngcrush/
o Avoid 404 errors, this means make sure there are no reference to missing files in your jsp.
o Use Image Sprite. Image Sprite is collection of many images into single image. This way only one server call will be made and many images can be downloaded. Using css we can render the images from sprite image. There are websites using which you can generate css for sprite images. e.g. http://www.spritebox.net/
below image is sprite image, where two images are combined in single image.
below css will split the image into two separate image.
img.im1{width:51px;height:32px;background-position:-1px -1px;background-repeat:no-repeat;background:url(sprites.JPG); }
img.im2{width:52px;height:33px;background-position:-54px -1px;background-repeat:no-repeat;background:url(sprites.JPG); }
you need to use these class in <img> tag as shown below:
<img class="im1" src="img_trans.gif" width="1" height="1" />
<img class="im2" src="img_trans.gif" width="1" height="1" />
here src is one transparent image, this is required to be mentioned... below is snap how it comes in browser.
No comments:
Post a Comment