Technology is evolving and we all aim for better user experience. Product companies utilize technologies like React and AngularJS to enhance the application's front-end and make it more interactive and intuitive.
The front-end performance testing of an application plays an important role in determining the overall performance of the application. Following are the key steps you should consider:
- Validate how resources are rendered on the pages
- Identify bottlenecks on client-side, even with significant server-side performance
- Measure application performance with different clients
Performance Testing: Client-Side vs Server-Side
| Key Factors | Client-Side | Server-Side |
|---|---|---|
|
Scope
|
Evaluate end-to-end scenarios
|
Evaluate logical scenarios
|
|
Focus Area
|
Rendering of front-end elements like CSS and JavaScript files
|
Server response time and application behavior under user load
|
|
Workload Modeling
|
Single user perspective
|
One or more users load
|
|
Test Infrastructure
|
Need different clients (desktop and mobile browsers) and servers
|
Need dedicated servers only for running tests and no major dependency on web browsers
|
- TTFB (Time To First Byte): Time taken to bring first byte from server
- Payload: Web page content size
- Speed Index: Average time to display content on web page
- Load Time: Time to completely load the web page content
- Time to Render: Time to process and display web page elements to users
- Time to Interact: Time to interact with first web element
- CPU Idle Time: Time for which CPU’s main thread remains idle and awaits response from third party requests
Shift-Left Performance Testing
Using shift-left testing approach, you can integrate the performance tests with any of the continuous integration (CI) tool similar to unit and functional tests. You can evaluate the performance of the application in the early stage of the development. Through CI and monitoring tools, the client-side performance can be evaluated for every commit made by the front-end developers.
Additionally, you can also develop a framework to integrate the performance tests with UI automation tests and run both the tests in parallel. This is popular approach followed by QA companies nowadays.
Best Practices
- Use images and JS code in compressed form
- Utilize CDN architecture to reduce the time to receive initial payload
- Enable better cache techniques to provide faster response time to users
- Use minification tool to Minify CSS, JavaScript, and HTML content
- Remove unnecessary static page resources (CSS and JS) to reduce rendering time
- Optimize server-side performance before proceeding with client-side testing
Have Suggestions?
We would love to hear your feedback, questions, comments and suggestions. This will help us to make us better and more useful next time.
Share your thoughts and ideas at knowledgecenter@qasource.com
