1 / 10

UI Performance Optimization: Identifying Bottlenecks

This paper provides a framework for testers to identify and resolve client-side web application performance issues, ensuring a good user experience. It discusses the importance of quick page load and rendering time, and introduces a tool that captures and analyzes HTTP traffic to identify slow requests and bottlenecks.

michellewells
Download Presentation

UI Performance Optimization: Identifying Bottlenecks

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. UI-Performance Optimization by Identifying its Bottlenecks Akshita Aggarwal Software Developer Co – Author - Deepak Khatri Sr. Test Architect NIIT Technologies

  2. ABSTRACT More and more complexity on the front-end leads to delay. Client side performance issues have direct impact on user experience. So, finding out and resolving all client-side web application’s performance issues are of utmost importance for good user experience. PURPOSE This paper will bring easiness to a tester, with approach to identify potential problematic areas & bottlenecks. How he can find out better and refined solution. How a framework can be built on top of available open sources API to obtain simple and understandable reports.

  3. Need of UI Performance Optimization How long will I have to wait? • Pages should not only load quickly, but also run well. • Role of rendering time is equally important. • Design a framework that captures rendering time. Client expects response to be in less than 100 ms.

  4. Architecture Test Scripts Web Browser Proxy Web Driver Analyzer Reports/ Graphs Selenium Stand Alone Server TOOL

  5. Working Execute Output Selenium Scripts Make the selection for further details For Export (csv format) Design Tool Tester

  6. Key Features • HTTP traffic (response and render time)capture and modification • Efficient for troubleshooting, performance turning • Requires less user time and easy to understand. • Support for any client web Application • Automatic Selenium Scripts • Export summarized data for further usage

  7. Demonstration

  8. Conclusion • This tool can identify slow requests , bottlenecks where requests are blocked and their root cause. • It can be configured separately in the target environment and is well suited for test scripts. • Testers are benefitted as no overhead is required. • Hence it is advisable to profile your web page to find components • that you don’t need or components that can be optimized.

  9. References & Appendix • Little Proxy-free utility to watch and manipulate network traffic • Chrome dev tools for analyzing runtime performance • MSDN-web debugger tool • Google web developers for rendering performance Author Biography Total 6 months+ of IT experience. Software developer with NIIT Technologies. Qualification: PG Degree (MCA). Skilled knowledge and expertise in current computer hardware and software, Performance Testing & Engineering, Automation and few open sources. Q n A

More Related