Front End Performance Testing With Chrome DevTools
In the current world, about 200 million active websites are providing various services across different domains. Out of that 200 million, some websites fall into the same domain. So there is huge competition among those to attract people to their website. When considering the people's attraction the performance of the website is a very important thing. If the website is taking too much time to load or to satisfy the user's expectation that’s not a good or well-developed website. Front End Performance testing can be used to easily identify these loading issues, and developers can take care of those issues.
There are numbers of paid and non-paid(open source) tools in the modern world to test the FE Performance of a website. In this article, I’m going to discuss how to test the FE Performance of a website using the Chrome Developer tools(using the Performance tab in the Chrome Developer tools).
NOTE: This a manual test that should be done manually. For a Continuous Delivery Project, this is not a good approach. This will take some considerable time according to the test scenario carried out. Also, as this will be a manual effort, the accuracy of the test results may be not 100% correct.
What is Front-End Testing?
Front-end testing is a way for QA specialists to assess the performance of a product from a user’s standpoint. Several decades ago, front-end testing was not a necessity for QA teams. As pages used to run by simply loading an HTML file, little-to-nothing could go wrong. With the adoption of CSS and Ajax, a web page has become a series of external references and stringed operations. Now, neglecting front-end performance testing will bring tons of damage in terms of user retention and the extent to which the product adheres to business needs.
Benefits of Front-End Performance Testing
As front-end performance testing is connected to client-side issues, its impact is more visible to the end-user and directly affects the browsing experience. After having tested the performance of the entire front-end, in theory a QA team should end up with a stable and fully functional build ready to be brought to market. Following are some significant benefits front-end performance testing brings to the table.
- Detecting client-side performance issues
- Tests are simple and cost-effective
- Improved quality of user interactions
- Missing out on front-end end testing does lots of damage
- Can identify bottlenecks observed by front-end users on the browser level
What is the Chrome Developer tool?
Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. You can get more details and an idea on this by referring to the document by the Chrome developer team. In that, they have clearly mentioned how we can open the dev tools window and the use of each tab in there.
Prerequisites for a new test cycle
- Clear browser cache, cookies, and history from your Chrome browser(Better to take an incognito browser for the test).
- Make sure all other applications that consume system resources are terminated (eg: virus scanners, etc.).
- CPU usage should not be utilized excessively during this test. I have observed that when only the chrome browser is opened, the CPU utilization usually lingers around 30% — 40%.
- Make sure only one Chrome browser window is open with no other tabs, except the tab with AUT.
How to measure the FE Performance using DevTools
Before going into the test steps let me explain the test scenario first. I’ll take the navigation to a category(smartphones) on eBay as my test scenario.
Prerequisites
- Navigate to the eBay home page.
- Before we do the test, open up dev-tools, go to the Performance tab, and hit the record button.
IMPORTANT: You should stay 15–20 seconds after hitting the record button before you start your scenario. Chrome takes some considerable processing power to initialize the recording, which could affect your readings if you start right away.
Test Steps
- Ok, now the test has started. We are going to calculate the loading time of the Smartphones category page after clicking on the Smartphones link on the eBay home page. After the recording is on Click on the Smartphones link on the eBay home page.
- After the page is loaded wait for ~5 seconds in the end and stop the recording.
- The next step is analyzing the performance recording profile.
NOTE: You would need to repeat the same scenario 3–5 times and get the average value as the final result. If there are any outliers exclude them when you take the average.
Analyzing the profile
Explanation on the numbers in the diagram
- First, narrow down the timeline selection to start & end positions
- Event Click can be considered as the scenario starting position. The end position can be decided by looking at the screenshots in the timeline.
- These are the network calls that are executed in loading the page. If you want you can reduce the time taken for a specific network call(s) from the total time. For example, you can deduct the synchronous (blocking) backend API calls. By clicking on them you can get the time spend for each of these blocking calls.
- This summary view says how much time has taken for the current selection (also it has a nice breakdown of time taken for different FE tasks). You can reduce the time taken for blocking API calls (measured from step #3 above) from this total duration to get the pure FE time for this scenario.
Some Important Notes
- For a better accurate result, every test Scenario should be measured at least 3 times to retrieve the average. If there are any outliers exclude them when you take the average.
- CPU usage should not be utilized highly during the test. The CPU utilization was between 30% — 40% when only the chrome browser is open.
NOTE: As I explained earlier this is a manual test that should be done by an QE. So repeating this test multiple times would be a time consuming one. Also the accuracy of the test might be not 100% correct. An automated Front End Performance test will overcome this issue. In my next article I’ll explain on how to measure the FE Performnace with DataDog using an automated test suite.
Hope you learn something useful. See you in the next one ✌️
