Today web is more popular then Television. Million of peoples are searching several information’s in web. Looking into this there are many IT Companies working on several web applications to make the web better. Origin of Web Design stands on Client Server mechanism. I mean there is a server where resources are stored. According to the client request server response the data. Here speed & performance comes. In this session we will not discuss how to improve performance of a server rather we will focus on best practices to improve Website Speed & Performance.
Generally we do web development using HTML, CSS, JAVASCRIPT, JQUERY & any one of the SERVER SIDE programming skill. While designing the application let us share few key points which can help a programmer to design high performance web application.
Best practices to improve Website Speed & Performance
1. Always during web development try to reduce http requests as much as you can. Implement Cache feature while designing a web application. With the new version of HTML5 Application Cache helps a lot to improve performance of web. For the first time when user will request your webpage cache the common used static elements in client browser. For further consecutive requests load only dynamic things from server. This activity reduce http requests & improves the performance.
2. During web development we required to add many images to make our web page attractive. In this case I will suggest practice to use web optimized images in place of normal images. If you have a JPEG image convert it to PNG. PNG image files are less size compare to JPEG images. While displaying a large image prefer to load the image partially. Always remember to cache static images in browser memory.
3. Use of icon is very common in web development. If you are using icons for your application prefer optimized lightweight images. If possible replace the images with vector graphics fonts. Compare to images vector graphics icon provides better performance & reduces loading time. An example of vector graphics font icons are “font-awesome”.
4. Try to handle all those operations which can possible to do at client end. I mean validations, simple calculations, graphics etc. About client script if you are using JAVASCRIPT replace this with advanced JQUERY library. Compare to JAVASCRIPT JQUERY helps to improve better performance.
5. If you are using JAVASCRIPT files convert them to minify version. Minify version of JAVASCRIPT loads faster compare to simple js files.
6. Use of Ajax technology helps to improve the web better. Let’s talk about a case where user want to know the total number of T-shirts available in the store using your shopping cart application. Here when user click on the button to display total number of T-shirts avoid to request the whole page again. Only update the number by implementing an Ajax call. Effective use of Ajax makes web real-time.
7. Before deploy into production server always optimize your CSS files. Use minify version in place of normal one. Combine media queries & print style sheets in single file. Avoid to use @import statement in your CSS files.
As a Programmer
1. In case of a error avoid throwing exceptions. This process reduce performance. Show errors manually.
2. Avoid to use Recursive Functions or Nested Loops. This makes delay in page loading.
3. Always give priority to use client side validations. Ignore to implement server side validations.
4. While writing JAVASCRIPT practice to implement functions with return value. Functions are pre-compiled.
5. While possible use for each in place of normal for loop. For each takes less compiling time compare to for loop.
6. While doing string concatenation in JAVASCRIPT prefer to use StringBuffer method.
7. If you are using multiple images use CSS Sprites technique. It reduces http requests.
8. For animation prefer to use CSS rather then JavaScript or Flash.
9. If you found more then 4 to 5 conditional checking replace if & else if with switch case.
10. Reduce the number of third-party plugins you embed in your application.
From my experience I found the above listed techniques will help you to develop fastest web applications. I know you are also aware of many techniques to improve the web application faster. Feel free to share them here with your comments.
“Let us make our web faster n better.”
