Speaking of H5 performance testing , many students may have heard of it, but they don’t know how to do performance testing, or what performance indicators H5 should pay attention to. Let's take a look today. I hope that after reading this article, I can understand something.
Common indicators
1. Introduction of H5 performance related parameters
White screen time: the time when the user sees the content of the webpage for the first time, that is, the time when the first rendering process is completed
First screen time: the time when the user sees the first screen, that is, the entire webpage is completely displayed
First resource download time: the time from the start of downloading the first resource to the completion of the download
Total resource download time: the time from the start of the download to the completion of all resources
User operable time: the time from when the page starts to load to when the user can operate the page
When testing H5 performance on the APP client, pay attention to the general performance indicators of the APP when loading H5
Memory: The memory changes before and after loading the page, which can reflect the amount and size of resources in H5, such as the size of the image
CPU: If the style on the current page is too complicated, you can observe the CPU occupancy rate when the page is loaded. If the CPU occupancy rate is high for a long time, you need to consider optimization
FPS: In the H5 pages with complex animation effects or videos, you should focus on it to prevent serious freezes
2. H5 performance test points
There are several factors that affect the performance of H5: network bandwidth, DNS resolution, server processing capacity, etc. The following are the test points of H5 performance:
Common tool
At present, there are many free open source tools, which can be selected according to your own needs.
1、WebPageTest
WebPageTest is a free and open source online performance evaluation tool; it uses real browsers (IE and Chrome, etc.) and real consumer connection speeds to run free website speed tests from multiple locations around the world; Diagnostic information, including resource loading waterfall charts, page speed optimization checks and suggestions for improvement, give each piece of content a final rating.
Open the official website address:
https://www.webpagetest.org
Enter the URL address to be tested in 2 places in the above figure.
Select the address (Test Location) at 3. WebPagetest has test machines located all over the world. You should test from a location close to the user's access. Just drop down and choose. You can choose Android, iOS, PC and other devices, as well as different countries. wait;
Select what browser to use for testing at 4 places. Different locations support different browsers.
Supplement: Click the Advanced Setting drop-down to perform advanced settings, but we generally choose the default.
After the setting is complete, click START TEST to start the test;
2、Chrome DevTools
Chrome DevTools (Chrome Developer Tools) is a set of tools for web page creation and debugging embedded in the Chrome browser.
Open the webpage to be tested, press F12 to see the Network option, and under this option, you can see the corresponding network request time and type, as well as the resource size.
Similarly, you can also use packet capture tools such as Charels to analyze.
3、Page Speed
page speed is a browser plug-in of Google, which needs to be manually installed or added to Google Chrome,
Open the website to be tested and press F12 to see the PageSpeed option.
Click START to start the analysis, and an analysis report will be generated after the test is completed
4、Lighthouse
Lighthouse is an open source automation tool that can be run as a Chrome plugin or from the command line.
After searching for Lighthouse in the chrome app store, downloading and installing it, open the webpage to be tested, press F12, and you can see the options of Lighthouse,
After opening, click Analyze page load to start paging page performance and generate a performance analysis report.
The report style is as follows:
The meaning of relevant indicators:
First Contentful Paint: It is the point in time when the browser draws any content (such as text, image, canvas, etc.) to the screen for the first time.
Time to Interactive: refers to the point in time when all page content has been successfully loaded and can quickly respond to user operations.
Speed Index (Speed Index): Measures the speed at which the visible content of the first screen is drawn on the screen. Displaying as much content as possible during the first loading of the page can often bring a better user experience, so the value of the speed index should be as small as possible.
Largest Contentful Paint: Indicates the point in time when the visible element with the largest "content" of the viewable area begins to appear on the screen.
Total Blocking Time: Indicates the blocking time encountered during this analysis
About the H5 performance indicators and tools, I will introduce these, I hope it will be helpful to you after reading~
Finally, I would like to thank everyone who has read my article carefully. Reciprocity is always necessary. Although it is not a very valuable thing, you can take it away if you need it:
Software testing interview applet
The software test question bank maxed out by millions of people! ! ! Who is who knows! ! ! The most comprehensive quiz mini program on the whole network, you can use your mobile phone to do the quizzes, on the subway or on the bus, roll it up!
The following interview question sections are covered:
1. Basic theory of software testing, 2. web, app, interface function testing, 3. network, 4. database, 5. linux
6. web, app, interface automation, 7. performance testing, 8. programming basics, 9. hr interview questions, 10. open test questions, 11. security testing, 12. computer basics
These materials should be the most comprehensive and complete preparation warehouse for [software testing] friends. This warehouse has also accompanied tens of thousands of test engineers through the most difficult journey. I hope it can help you too!