Client side performance in Web based Banking applications Divakar Prabhu Infosys Limited (NASDAQ: INFY)

Abstract Response time which is one of the critical performance indicator of web page is more influenced by the client side activities than by the server or network conditions, i.e. upto 80% of the user’s time (response time of the web page) is spent waiting for events at client side other than the main HTML page to download. Client side technology is ever changing and is making the browsers better and faster. Applications in Banking and Finance space have been at the forefront in adopting these technologies to provide superior user experiences. Web developers must consider optimizing the client side technologies for web applications as a proactive approach because improving the client end performance by 50% can reduce the total response time by upto 40-45%.It has been seen that following certain best practices during development or optimization of the code, for e.g. tuning the Javascript, AJAX or avoiding large DOM objects have been more effective in reducing performance problems. 2

Abstract (cont..) Regardless of the technology used, using tools for testing the client side performance is a good practice that can be used to track the HTTP traffic to isolate bottlenecks. HttpWatch, Fiddler and Y Slow are some tools available to name a few. This paper focuses on the importance of Client side Performance and describes some of the approaches available for optimizing the code to ensure better user experiences. It also describes some of the tools available in the market for analysing and testing the client side performance. 3

Importance of Client Side Performance Web page GET GET Request to server Images-gifs Tables Text Style sheets Table contents Java script GET

Importance of Client side performance Client side optimizations give better returns 5 Time taken for the HTML page to download for a trading portal is only 4.6s whereas the total time for the page to download was 38.72s.

Importance of Client side performance (Cont’d) Web Caching doesn’t always improve performance Caching seldom works the way it is designed Business Benefits Improves customer perception of the Web application and better marketing of the products Users Perception of Response time End user response time is the time taken to display the whole page 6

Importance of Client side performance (Cont’d) Increasing use of 3rd Party contents in Banking Applications 3 rd party content in Web applications will cause adverse impact to performance. 7

Challenges in measuring Client Side Response Modern Web applications are more dynamic than the traditional Web applications and allow developers to leverage the browsers or client as application development platforms. Browser dependent behavior Communication- Async and Synchronous Limited connection issue in Browsers 8

Client side Performance Testing Performance testing therefore needs to have End to End approach starting at the browser and span full application platform starting at the JavaScript & Rendering Engine of the Browser over the Network 9

Client side Performance Testing Requirement Analysis checklist Specific questions that can be asked to End User Community (Business) and Architect during NFR collection are as follows  What technologies will be used in the presentation layer?  What are the different 3rd party content used for news, market data or tickers?  What is the maximum acceptable response time for the pages?  What is the size of web page content?  Will the page be accessed by mobile devices?  What are the different browsers that will be used?  What are the pages that are heavy or important from business stand point?  What are the pages that refresh frequently?  What is the caching logic used? 10

Client side Performance Testing (Contd) Tools available to test the client side performance  HTTPWatch- A network traffic monitoring tool which is used by various organizations as industry standard to fine tune their Web applications  Fiddler- A web debugging tool that analyzes the background communication that goes between browser and the servers by logging all the ongoing traffic in a session  Yslow- Open source tool that works with Firebug, a Firefox add-on, analyzes the web pages and suggests ways to improve the performance. 11

Best Practices and optimizations to be Used during development JavaScript  Javascript should be placed at the bottom of the page  JavaScript code must be external since it is downloaded the first time and is cached for later usage.  Avoid loading large script files, group scripts logically  Compacting code leads to increased performance  Caching frequently used objects helps in improving response of the pages  Avoiding memory leaks can exponentially increase performance AJAX  Use caching for responses wherever possible  Use ‘Get’ or ‘Post’ methods for all AJAX requests  Avoid DOM elements if possible or use it sparingly 12

Best Practices and optimizations to be Used during development (Contd) HTTP Requests  Ensure that only valid requests are sent to the server.  HTTP requests can be sent in parallel rather than in sequence  Redirections should be avoided because each redirect will result in increase of time of the request due to standard operations CSS  CSS should be made external to since it can be downloaded the first time and cached for later usage.  CSS reference should be at top of the web page, HTML rendering engine that interprets the CSS is called first.  CSS circular references or duplicate references should be avoided  CSS file size should be as small as possible since it impacts the speed at which the page loads. Distributed Content Files  CDNs can be used to deliver both static and dynamic web pages and can be one of the best ways to optimize performance. 13

Conclusion In addition to the load testing tools that are currently being used to determine Server side response time, Client side performance testing tools can also be used. Most of the tools mentioned in the paper are freeware and can easily be downloaded and used in the projects. Following good practices during development and diligent testing of Client Side parameters can go a long way in improving the performance of the web pages and consequent user experience. 14

References  Infosys project experience      and-how-to-do-it/  ndex.html?ca=drs-

Q&A: 16