As mentioned in the general article, “for independent pages can be independently subcontracting the way to improve the speed of startup.” In practice, how does Tencent classroom applets analyze problems and optimize them with independent subcontracting? How do you know how long it takes to launch from a page in production to verify the optimization? This article will cover all of them.
The background,
In the current environment, wechat small program has become an important operation channel. In order to meet the requirements of high efficiency of page launch and iteration in the small program side, H5 and APP side, a large number of operation and activity pages choose the form of embedded H5 in WebView in the small program side. Therefore, Tencent classroom applet implements common-ACT page as a common applet WebView hosting page.
This page has carried the operation of 20+ series of activity pages, such as “give one, get one”, “Tang Dou Welfare Club” (upgraded to KBONE structure after iteration), “pull new red envelopes”, “Spring Festival activities” and “March promotion” in wechat mini program.
Since most of the activity is online, the page load time problem is not obvious when users jump from the main site to open the active page. But in the offline operation of the campaign, the user mainly starts the small program and opens the activity page by scanning the small program code. The problem of slow startup is very prominent, and it is urgent to optimize the startup speed of the general activity page.
After the analysis of the small program startup process, and the webView page less dependent on the small program public methods and common components of the characteristics, the choice of the page split independent subcontracting method optimization. The volume of independent subcontracting of active pages is reduced by 93% compared to the main package. After the comparison of small program performance speed monitoring, it is found that the overall speed of users to start the page after optimization is increased by 30%, and the high-end computer can start the common-act page within 1s on average.
Second, small program activity page launch process analysis
2.1 How to open h5 on the Common-Act page
Commmon-act, as a common applet page that hosts H5, is responsible for processing different forms of input parameters, obtaining the complete URL required by the business, and injecting user tickets into the Web page in the form of Query.
As you can see, the whole process of opening the page is serial. The user needs to start the applet from the common-act page. The onLoad phase of the page generates an H5 link with parameters and transmits it to the < WebView /> component of the view layer via setData. In the case that the page address is included in the page parameters (no need to exchange the URL from the configuration platform), the whole opening process is about the small program startup time + H5 loading time.
2.2 Common-Act Active page startup stages
Applet startup refers to the onReady life cycle when the user clicks the applet card/scans the code/clicks another jump link to call the applet to the first screen.
H5 loading refers to the time from the start of preparing to open a new Web page (navigationStart) in the WebView to the first screen of the page. The stages and corresponding pages of the complete process are shown below.
2.3 Startup and loading process of wechat applet
According to the official wechat document, the startup process of wechat small program includes the following parts:
- Small program resource preparation
- Code injection
- Home page rendering
Resource preparation can be divided into two stages: small program environment preparation and code package preparation.
During the startup process, small program code package preparation, developer code injection, and home page rendering are developer related and can be optimized by the developer. Other parts are currently unavailable to developers.
Three, small program active page start time optimization scheme
3.1 Small program active page startup status
Through the small program management background startup data, it can be seen that the average startup data of the whole small program in the first week of May under the condition of full update is shown in the figure
| All the models | Low-end models | |
|---|---|---|
| Download the code package | 600ms | 1000ms |
| Code injection | 270ms | 700ms |
| First apply colours to a drawing | 170ms | 400ms |
| The total time consuming | 3900ms | 7800ms |
But the current small program management background lacks specific data from different pages.
The common-act page is a general subcontract, and both the package preparation and the code injection phases execute the complete main package. Loading and processing the main package can take a long time due to the synchronization of the basic information and common methods that many core pages depend on. But most of the main package content is independent of the active page logic.
So you can optimize from that perspective. Downloading and injecting only the packages required for the active page will greatly reduce the time required for package preparation and code injection. For the start speed increase effect will be more obvious.
3.2 Independent subcontracting scheme
An independent subcontract is a special subcontract in a small program that can operate independently of the main package and other subcontracts. When starting a small program from an independent subprogram, the main package does not need to be prepared synchronously (starting a small program from a normal subprogram page requires the main package to be fully loaded). The main package will be downloaded and parsed only when the user enters the ordinary subpackage or the main package inside the page. Therefore, it can improve the loading speed of small programs. (Document visible: independent subcontracting)
Since the content in the main package and other subpackages cannot be relied on in the independent subcontract, all related dependencies need to be located in the page folder. The common dependencies involved in the analysis page include: Basic NPM package dependencies: @tencent/imwxutils (encapsulates some small program base methods), @tencent/imlog-wx (for logging), simp-Base-Converter (for shortening parameter length)
Landing related: judge the landing state, obtain small program landing ticket
Routing related: Page jump
Request related: keFetch (Business encapsulated request method)
The above dependencies on the basic capabilities of the container page need to be sorted out and put into the page folder. The page file directory is as follows:
Common - act / ├ ─ ─ common - act. CSS ├ ─ ─ common - act. Json ├ ─ ─ common - act. Ts ├ ─ ─ common - act. WXML ├ ─ ─ node_modules /... ├── package.htm │ ├─ class.htm │ ├─ class.htm │ ├─ class.htm │ ├─ class.htm │ ├─ class.htm │ ├─ class.htm │ ├─ class.htm │ ├─ class.htm │ ├─ class.htm │ ├─ class.htm │ ├─ class.htm │ ├─ class.htmCopy the codeAfter independent subcontracting, the independent subcontracting size of common-Act pages in the build product was 134.92KB, a 93% reduction compared to the main package volume.
3.3 Small program performance speed measurement report scheme
The optimization of page startup speed needs to have more detailed startup data as the basis, the current management background performance data can not meet the needs of page startup speed monitoring. The applet Performance API returns the following performance metrics:
- Startup time: the startup time of a small program, which is only thrown on the startup page
- Code injection duration: thrown when the main package or subpackage is injected
- First render time: Render time on the first screen of the page, which is thrown when the page opens
- Route duration: Thrown when a page is skipped
Other factors that may affect the startup speed and corresponding data to be reported include:
- Use getSystemInfo to return the model and basic library information
- GetNetworkType returns the network type and signal strength
- GetAccountInfoSync returns the version number of the applet
- The page path and page parameters are reported as reference information for log analysis
Based on the data, the following fields are reported in the IMLog
| project | message | cmd | pathname | cost_time | addition | platform | query |
|---|---|---|---|---|---|---|---|
| weapp-ke | performance |
- The project and Message fields can be used to locate the applet performance report data
- CMD values might be appLaunch, firstRender, route, and evaluateSript
- Pathname Identifies the pages generated by performance records, such as Pages /common-act/common-act
- Cost_time indicates the duration of the CMD action
- Addtion records other related information about the performance records, including startTime, model, wechat version, basic library version, network type, and signal strength. (Since the firstRender and evaluateSript records are generated during startup and page jump, the addtion uses isLaunch to indicate that this report is a startup behavior record.)
- Platform Contains the official version information about the applet. Used to compare the performance of different releases.
- Query is the page parameter, which is used to determine additional page information.
Iv. Analysis of optimization effect of independent subcontracting
Release the version containing data reporting capability in advance. After collecting the current performance data, release the independently subcontracted version through 50% gray scale, and collect a total of 38107 reported data of the startup time of the general activity page within a period of time. Data cleaning: A total of 447 records whose startup duration is abnormal (negative, non-numeric, and abnormally large) are deleted. The number of remaining valid data is 37660. Among them:
- The old version of the small program (not independent subcontracting) reported records of 17692.
- New version of small program (independent subcontracting) reported record 19968.
4.1 Data analysis has not been independently subcontracted
The startup time data of the old mini program (not independently subcontracted) from common-Act is 17,692. The data summary is shown in the table.
| The minimum value | The maximum | The average | The median | Mean difference |
|---|---|---|---|---|
| 259 | 19971 | 4008 | 3231 | 1940 |
Analyze the distribution of startup duration data between 0 and 20000ms at an interval of 1000ms. The statistics are as follows:
The histogram of frequency distribution and frequency accumulation curve are shown in the figure:
It can be found that the startup time is mainly distributed between 2000-4000ms, and the proportion of this interval is more than 47%. About 44% of user startup behaviors can start small programs within 3000ms.
4.2 Data analysis of independent subcontracting
The new version of the small program (independent subcontracting) from common-act startup time data 19,968. The data summary is shown in the table.
| The minimum value | The maximum | The average | The median | Mean difference |
|---|---|---|---|---|
| 129 | 19989 | 2942 | 2259 | 1542 |
Analyze the distribution of startup duration data between 0 and 20000ms at an interval of 1000ms. The statistics are as follows:
The histogram of frequency distribution and frequency accumulation curve are shown in the figure:
It can be found that the startup time is mainly distributed between 1000-3000ms, and the proportion of this interval is more than 59%. About 70% of user startup behaviors can start small programs within 3000ms.
4.3 Comparative analysis of optimization results of independent subcontracting
| The average | The median | Mean difference | |
|---|---|---|---|
| Independent subcontracting | 4008 | 3231 | 1940 |
| Independent of the subcontract | 2942 | 2259 | 1542 |
- The average startup time decreased by 1066ms and increased by 26.59%.
- Median startup duration decreased by 972ms, increased by 30%.
- The decrease of the mean difference means that the starting speed is more concentrated near the mean, that is, there is less long mantisse data.
- According to the frequency distribution data, the proportion of startup behaviors of users who complete startup within 3000ms increases from 44% to 70%.
4.4 Startup optimization in a weak network Environment
As the reported data of 2G and 3G is too small, the total is less than 200, which is not very valuable for analysis.
4.5 Influence of model on startup optimization
According to wechat small program official classification of high school terminal machine is as follows:
- High-end iOS: iPhone X, iPhone 11, iPhone 8 series
| The average | The median | |
|---|---|---|
| Independent Subcontracting (MS) | 1804 | 1331 |
| Independent Subcontracting (MS) | 987 | 816 |
| Lift time (ms) | 817 | 515 |
| Percentage improvement | 45.2% | 38.6% |
- IOS mid-range: iPhone 7 series
| The average | The median | |
|---|---|---|
| Independent Subcontracting (MS) | 2712 | 2255 |
| Independent Subcontracting (MS) | 1686 | 1440 |
| Lift time (ms) | 1026 | 815 |
| Percentage improvement | 37.8% | 36.1% |
- Low-end iOS: iPhone 6S, iPhone 6 series
| The average | The median | |
|---|---|---|
| Independent Subcontracting (MS) | 4440 | 3483 |
| Independent Subcontracting (MS) | 3136 | 2522 |
| Lift time (ms) | 1304 | 961 |
| Percentage improvement | 29.3% | 27.6% |
- Android high-end: OPPO R17, VIVO X27, HUAWEI P30 series
| The average | The median | |
|---|---|---|
| Independent Subcontracting (MS) | 3335 | 3099 |
| Independent Subcontracting (MS) | 2348 | 2135 |
| Lift time (ms) | 987 | 964 |
| Percentage improvement | 29.6% | 31.1% |
- OPPO R15, OPPO A9, VIVO X21, VIVO Y97, Honor 8X series
| The average | The median | |
|---|---|---|
| Independent Subcontracting (MS) | 4853 | 4337 |
| Independent Subcontracting (MS) | 3945 | 3303 |
| Lift time (ms) | 908 | 1034 |
| Percentage improvement | 18.7% | 23.8% |
- OPPO A57, VIVO X9, VIVO Y93 series
| The average | The median | |
|---|---|---|
| Independent Subcontracting (MS) | 7560 | 6509 |
| Independent Subcontracting (MS) | 6298 | 5146 |
| Lift time (ms) | 1262 | 1363 |
| Percentage improvement | 16.7% | 20.9% |
It can be seen that the model has a great impact on the startup speed and optimization effect of small programs. The optimized startup time of iOS high and mid-range models and High-end Android models is generally within 2s.
[The official wechat standard does not cover models after 2019, and the actual performance of the new models will be better than the old models]
From the optimization effect, the startup time of low-end machine is reduced more in absolute value. But because high-end machines take less time to prepare, inject code, and render pages in a small program environment, the percentage of independent subcontracting improvement is greater. Low – end machine relative to independent subcontracting increase proportion more limited.
# 5. Optimize summary
- The optimization scheme of common-act independent subcontracting has a significant improvement effect on common-act page startup of small programs. Generally, the median startup time is reduced from 3.2s to 2.2s (within 1s of the overall startup speed of high-end machines), and the startup speed from active pages is increased by 30%.
- After the adoption of independent subcontracting, the proportion of long wait time for common-act page startup decreased significantly, and the proportion of users who completed startup within 3s increased from 44% to 70%. Significant improvement in user experience.
- The main factor affecting the startup speed of small programs is the performance of users’ mobile devices. The average startup time of models with good performance is less than 1s.
- During startup, developers can only affect the time it takes to prepare packages and inject code at the code level. The rest of wechat’s underlying environment preparation and processing time has a greater impact on the overall startup time, and directly depends on the user’s device performance and network conditions, so developers have limited space to optimize.
This is Tencent classroom small program optimization of the third special optimization article, the first two articles:
1. “Performance Optimization of Tencent Classroom Mini Programs — Comprehensive”
2. “Tencent Classroom Applet Performance Optimization — Network Request Optimization”
Have harvested full praise, welcome to discuss communication ~
