Author: Mo Xumin (Xiang Yu)
The Taobao applet has gone through several Double Eleven, and Taobao's open business has been rolled out in an orderly manner. Experience optimization is a common topic. How to make the applet run stably and fast has become one of our biggest challenges.
write in front
How to define a good experience
In the past, we defined this problem more from the page loading speed and fluency to explain, but this is far from enough. Whether the improvement in loading speed makes users more willing to "play", and whether the improvement in fluency also improves the exposure and transaction of modules.
In order to have a more three-dimensional measurement standard, the following assumptions are made: page loading speed and fluency increase (technical perspective) -> user bounce rate decreases (user perspective) -> product exposure and click increase (platform perspective)
Dilemma
The following is the performance data of some TOP second- and third-party businesses (data taken from May 2020), which can be said to be poor. (The definition of "skip" is: after the user opens the applet, the page rendering is not completed or the conditions for interaction are not met, and the page exits)
complex technical architecture
Under the logic/rendering separation architecture, Mini Programs not only ensure openness and security, but also introduce greater performance challenges.
The quality and safety of the tripartite ecology
Mini Programs are an important part of Taobao's open system. They are oriented to merchants and external developers, and bring greater challenges to R&D quality assurance and data security.
A single measure
In the past, we defined this problem more from the page loading speed and fluency to explain, but this is far from enough.
catastrophe
Through the standardization of operation and maintenance data, through the process of R&D->release->online, a closed data loop is formed:
- Data collection: define collection algorithms and data models to form a set of standardized operation and maintenance data
- Operation and maintenance platform: connect two/three-party developers, provide data transmission and reflow capabilities, and define monitoring & bayonet rules
- Data analysis: scientific data analysis methodology, with experiments, data, and evidence
- Efficiency tools: open up R&D infrastructure and empower developers
data collection
T2 (first screen algorithm)
Alibaba Group's applet aligns the first screen loading measurement caliber, and adopts the T2 first screen algorithm of the UC kernel. The T2 indicator is defined as the time from the start of the page loading to the first rendering of the full screen content of the page. Simply put, during the page loading process, all the rendered frames are recorded. After the page is loaded, each frame is retrospectively checked. The frame where the image rendering area reaches the maximum value for the first time is recorded as T2.
Mini Program Performance Model
In order to disassemble the start-up performance of the applet in stages, the applet performance model is defined. From the start of the applet to the completion of the first screen rendering, it is disassembled into: Downloading (resource request: meta information request and package download), Launch ( Container startup and applet Runtime startup), Rending (business logic execution and rendering)
At the same time, the standard Web API performance.mark() is provided for small program developers, which supports developers to customize the management.
By analyzing the time consumption of each stage, performance bottlenecks can be clearly found.
Data Analysis and Optimization Practices
Due to the limited space, only a few classic cases are shared.
The relationship between page performance and user bounce
According to the histogram of applet loading performance and user skipping, the relationship between applet loading performance and user skipping can be more intuitively analyzed. As shown in the figure below, it can be seen that when the loading time of the applet exceeds 2s, the skip rate increases exponentially. It is also based on this conclusion that we set the market target for the interactive duration of the applet to 1.8s. (The horizontal axis represents the interactive time, and the vertical axis represents the proportion of users who jumped out during this time)
Mini Program Launch Funnel
The applet starts the funnel, which can more intuitively analyze the relationship between the time consumption of each stage and the bounce rate/white screen rate and other indicators. The following figure is an example:
- The Downloading request phase takes too long, which is an important factor for the white screen rate/bounce rate
a. The flagship store applet access resources are preheated, the Downloading time is shortened by 50%, and the stage skip/white screen is narrowed to within 0.08%;
- Business data requests take a long time
a. The flagship store applet accesses data prefetching, the time required for the store frame data request is basically reduced to 0, and the stage skip/white screen is basically reduced to 0.
Best Practice One: Mini Program Engine Instance Reuse and Pre-start
- After the applet process is started, at idle time, it will initialize and retain only one general applet engine environment (not related to business) until the applet process is killed;
- During the running process, the Mini Program Engine instance will switch between three states:
a. Runnable: After the applet process is started, the newly created applet Runtime environment is in the "runnable" state;
b. Running: When the applet business starts, the instance whose status is "runnable" is taken out and used, and the status becomes "running";
c. Resetting: After the applet business is closed, the used instance will be taken out, and the status will become "resetting"; after the status is reset, it will become "runable" for the next applet to use.
Best Practice One: Data Prefetch 2.0
According to the analysis of the applet performance model, during the startup process of the applet, the Worker is always started faster than the Render is completed (the Worker is in an idle state), and the idle time of the Worker is distributed as follows:
- It can be seen that there is a 92.2% probability that the worker will be idle online, and the idle time is concentrated in 300-500ms, which can complete 1-2 network requests;
- The idle worker has complete JS execution capabilities for small programs, and can execute small program JSAPI within a limited range, send network requests to obtain positioning information/system information, etc.;
- Advantages of dynamic prefetching
a. Flexible: The environment has JS execution capability, which is more flexible
b. Rich: provide limited JSAPI calling capability =
c. Security: support authority control, open to three parties and more secure
Best Practice One: Template-Based Snapshot Rendering
- Snapshot rendering can improve the performance of page re-opening, but in the flagship store scenario, there are the following disadvantages:
a. Data authenticity: The snapshot rendering uses the old data from the last time it was opened, and the old content will be displayed first and then refreshed;
b. Disk occupancy and hit rate: The flagship store is a template applet with millions of instantiated applet. Snapshot rendering will generate different snapshot files for each store; under the condition of huge base, consider the establishment of disk occupancy. The elimination mechanism makes the snapshot hit rate lower;
c. Long-tail problem: For long-tail stores with low visit frequency, the probability of second visit by the same user is low, and the snapshot cannot be hit;
- To solve the above problems, "Template Snapshot" is implemented. Based on the template applet, the snapshot file is generated and the data is eliminated. When the snapshot is rendered, the real data is inserted into the template with data prefetching. It not only ensures the authenticity of data, but also allows all stores to share the same snapshot file, which maximizes the snapshot hit rate and reduces disk usage.
Tools and Platforms
Establish standardized operation and maintenance data, output to different scenarios, and run through the entire R&D and launch process:
- Tool side: Provide performance debugging tools to help developers quickly analyze and solve problems
- Release checkpoint: Set the pre-release quality checkpoint and static scan to avoid business going online due to illness
- Online monitoring: through the operation and maintenance platform of the applet, undertake the monitoring and alarming responsibilities of daily high-availability data
Data effects
After a long optimization cycle, in terms of data results, the T2 index of Taobao's small program market has been optimized from 2.7s to 1.9s; the flagship store's first screen market has been improved from 4s+ to 1.8s.
At the same time, in order to verify the positive effect of experience optimization on business data, a bucket experiment was carried out on the flagship store business, and the data proved that it also achieved good business results.
The following figure is the data comparison before and after the optimization of Top two and three parties:
Pay attention to [Alibaba Mobile Technology] WeChat public account, 3 mobile technology practices & dry goods every week for you to think about!