Lazada Container Deep Optimization Tour

Authors: Wei Wei (Wen She), Fan Lei (Energy Storage)

In recent years, the digital economy in Southeast Asia has continued to develop, and Lazada has continued to maintain a strong and sustained growth in the number of buyers and merchants. On 11.11 in 2020, more than 40 million consumers, more than 400,000 merchants and brands came to the platform. On the day of 11.11 this year, more than 800,000 brands and merchants participated in , and Lazada Vietnam doubled its sales in the first hour compared to last year by . Lazada first hour sales increased 10 times compared to normal !

Behind a series of business data explosions is the rapid growth of traffic. As the carrier of H5 services, containers also serve more and more H5 services: venues, Flash sale, Lazmall, wallets, etc. Therefore, the user experience of H5 pages is affected by bigger challenge.

In the past year, the Lazada container team has been deeply engaged in the optimization of H5 containers. In the face of the high proportion of online weak network users and the wide distribution of low-end models, we have used pre-rendering solutions to optimize the promotion site page. It is the first to use the preheating scheme to optimize daily GCP pages and ICMS pages. At the same time, it prefetches page data and caches static resources in advance. It deeply optimizes the traffic business of the head H5 page, and finally improves the user experience and business transformation of the H5 business. .

problem analysis

On the day of the 2020 D11 promotion, the first screen recording time of the venue was 9383ms. The user experience was very bad. Most users could not bear it and left the page directly, resulting in serious traffic loss.

First analyze the complete link we open the venue page, including the following stages:

The whole process has heavy tasks and high network overhead, which causes page rendering to be pulled very late, and it is not surprising that the first screen time is long.

Then analyze the distribution of online users' networks and user models, as shown in the following figure:

From the above figure, we can see that online market users have a high proportion of mobile networks, and low-end models account for a large proportion. Especially Indonesian users, the mobile network stability is worse, and low-end models account for a prominent proportion. Then the optimization for low-end models and weak network users has become our key direction.

Optimization

Construction of monitoring system

If you want to do a good job, you must first sharpen your tools. Online users are very far away from us. It is difficult for us to experience their real situation. Then we can only start with monitoring, and report all links of page loading, and measure the real user experience from detailed data. In this regard, we have divided the loading link of the H5 page, the specific reference is as follows:

Including routing, container creation, page loading, page rendering, user exit and other links, bury each link, report page loading status, time point, time-consuming and other information to DP2 and UT, and establish real-time monitoring:

Route and container initialization monitoring

page load monitoring

Time above the fold monitoring

Container Preheating: Space for Time

The venue page is built by the GCP platform. The analysis found that each page will execute the same js, and each page has only a small amount of business js execution and rendering. After discussion and verification, the common basic js is abstracted and isolated from business js. These resources are loaded into the webview in advance before the user opens the page. On the one hand, the resources that need to be loaded on the page after the user clicks are reduced, and on the other hand, the public js and css are parsed and preprocessed in advance.

After the preheating solution was launched, the first screen time was reduced to less than 2s, and the BDay preheating hit rate was 36%. Through the analysis of buried points, it was found that the following problems existed in the preheating document loading:

1. When using the preheating container, the preheating task is not started, mainly in the scene of calling end;
2. The preheating is not completed, the preheating time is long and the average time is 5000+ms, or the preheating fails;
3. When using the pre-warming container, the pre-warming task is started, but the front-end does not call back the pre-warming completion, and the process has a keep-alive mechanism. Once there is no callback for the first time, the pre-warming webview may not be used all the time, and the pre-warming task will not be restarted. , unless the process is restarted;
4. The preheating container is hit, and the front end does not call back the first screen, so that a new preheating container will not be created again, and the next startup page cannot be hit;
5. Warmup rule not matched.

Preheat time ahead

In response to the problem of time-consuming pre-warming document loading, we advance the pre-warming time to the home page for interaction, and start the pre-warming page loading as soon as possible. At the same time, we cache the main document resources locally in advance through ZCache to reduce network transmission.

Warm-up retry mechanism

The warm-up start timing can be interacted on the home page. After the warm-up is completed, the front-end will notify the client of the warm-up completion event. When the user opens a web page, it will determine whether the warm-up is complete, and will not use it until it is completed. In the middle, there may be a preheating failure, so that the client does not receive a notification that the preheating is complete. In addition, after opening a web page to complete the screen, the front-end will call back a first screen notification, which will trigger the warm-up of a new WebView. Through data analysis, it is found that some users have not received the first screen notification, resulting in failure to open the page next time. Hit warm up.

In view of the above situation, we propose a warm-up retry mechanism to improve the hit rate of warm-up. There are mainly two scenarios for preheating and retrying. The first is to preheat and retry when the home page is idle; the second is to preheat and retry after opening the page, and define the timeout period. The default is 10s. After the timeout period expires, it will check whether If the preheating is completed, a new preheating will be triggered if the preheating is not completed, and the maximum number of retries is 3 times. The specific process is as follows:

warm-up link matching

By analyzing the online data, it is found that some GCP pages have a warm-up hit rate of 0. The reason is that to hit the warm-up, it is necessary to match the link of the web page and the link of the pre-warmed main document, and the host and path of the link of the web page need to be matched with the pre-warmed main document. The host and path must be exactly the same, but due to various reasons, the host and path on the line may be different from those of the pre-warmed main document, resulting in failure to hit pre-warming. In response to this situation, the regular matching rules are issued through the Orange configuration. As long as the page link matches the rules, the preheating container can be used instead of matching a single preheating main document link. At the same time, the configuration integrates the GCP page and the ICMS page. .

Example of matching rules:

prehot_regex={"id":[{"url":"https://pages.lazada.co.id/wow/gcp/route/lazada/id/upr_1000345_lazada/channel/id/upr-router/id_upr?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.co.id/wow/gcp/route/lazada/id/upr_1000345_lazada/channel/id/upr-router/id_upr"}],"my":[{"url":"https://pages.lazada.com.my/wow/gcp/route/lazada/my/upr_1000345_lazada/channel/my/upr-router/my?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.com.my/wow/gcp/route/lazada/my/upr_1000345_lazada/channel/my/upr-router/my"}],"sg":[{"url":"https://pages.lazada.sg/wow/gcp/route/lazada/sg/upr_1000345_lazada/channel/sg/upr-router/sg?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.sg/wow/gcp/route/lazada/sg/upr_1000345_lazada/channel/sg/upr-router/sg"}],"ph":[{"url":"https://pages.lazada.com.ph/wow/gcp/route/lazada/ph/upr_1000345_lazada/channel/ph/upr-router/render?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.com.ph/wow/gcp/route/lazada/ph/upr_1000345_lazada/channel/ph/upr-router/render"}],"th":[{"url":"https://pages.lazada.co.th/wow/gcp/route/lazada/th/upr_1000345_lazada/channel/th/upr-router/th?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.co.th/wow/gcp/route/lazada/th/upr_1000345_lazada/channel/th/upr-router/th"}],"vn":[{"url":"https://pages.lazada.vn/wow/gcp/route/lazada/vn/upr_1000345_lazada/channel/vn/upr-router/vn?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.vn/wow/gcp/route/lazada/vn/upr_1000345_lazada/channel/vn/upr-router/vn"}]}

Through a series of optimizations, the warm-up hit rate of our large-scale GCP page and Flash sale page has increased to about 60%, and the warm-up hit rate of the main venue is close to 70%.

Container Prerendering: The Ultimate User Experience

In order to further improve the user experience to the extreme and achieve the real straight-out effect, we made a pre-rendering pre-action for the big promotion venue. Through the communication and interaction with the home page module, the event communication between the container side and the front end, report shielding, traffic flow Control, etc., pre-render the venue page in advance, and open the venue instantly when it is actually on the screen. At this time, the custom first screen time of the overall venue tends to 0.

To optimize the screen recording effect before and after, please click to view: Lazada Container Depth Optimization

Before the optimization in the screen recording, the page during the Double 12 period last year was used. After the optimization, the page during the BDay period was used. The page structure has changed, but the amount of resources loaded is similar. From the screen recording effect, the optimized experience, whether it is Both preheating and pre-rendering are qualitatively improved than before optimization.

For pre-rendering, we have completed the page loading and rendering operations in the background. In theory, we only need to synthesize the upper screen. However, there is a white screen process in the recording screen, which can be seen through video frames. The animation is indeed a white screen state:

Through experiments, comparing the effect of pre-rendering on other pages (such as https://www.baidu.com ), it is found that it does not have a white screen process. The difference between the two is that when the pre-rendering container is obtained on the site page, an on-screen event will be sent to the front end, and the front end will then do some soft refresh tasks. This soft refresh task will be executed by business js, which will block the kernel rendering. Process, after we delay the on-screen notification asynchronously, the middle white screen time is much less, please click to view the screen recording effect: Lazada Container Depth Optimization Tour

During the 7.7 promotion period, I tested the venue page and compared the time from clicking to the first screen. The data is as follows:

The screen recording time in the case of delayed screen notification has been optimized by 12%, and the user's body feeling will be greatly improved.

SSR: A powerful tool for improving terminal performance

Preheating/pre-rendering can optimize the experience of users entering the venue from the homepage, but there are still 20%-40% of online users who directly enter the venue landing page through the end-call cooling. In this case, there is not enough time to come to the venue. It is preheated and pre-rendered, so improving the loading speed of the calling end page is an urgent problem that needs to be solved.

From the front-end perspective, page loading is divided into several steps: main document loading, core js loading, data request, page rendering, on-screen display, and image request display. These steps are all serial and involve a lot of resources File network transmission and js parsing execution. After discussing with the front-end students, SSR is a potential optimization solution. The data is recalled and parsed and rendered into static HTML on the server side. Then, you only need to download a main document to display on the screen, and add pictures to request display. Only two rounds of data interaction are required. From the perspective of the client, three data interaction links are reduced, which greatly reduces the amount of data transmission and the number of connection requests.

Venue SSR Solution

SSR and non-SSR comparison video, click to view: Lazada Container Depth Optimization

SSR rendering advantages:

1. Reduce the number and transmission level of resources on the first screen;

2. Reduce the time overhead of client-side parsing and executing business js;

3. The MTOP method is used to request in the client, which avoids the problem of security bodyguards and personalized recommendation.

Tested in the same environment (same mobile phone, same page, same App, same network environment), it is found that using SSR can optimize the first screen time by 15.2% in the scene of opening the page in the terminal, and 28.1% of the first screen time can be optimized by using SSR in the calling scene. time. The specific test data are as follows:

actual data:

[]()

standardization

Standardization of time above the fold

On the one hand, it aligns the group's interactive first screen time: the front-end completes rendering time, and some business domains use UC T2 time. The advantage is that all services are unified, and the disadvantage is that non-UC kernels cannot be collected. : All resources on the first screen are loaded, including js, css and image resources.

User's somatosensory can be quantified - white screen detection

The time above the fold can measure the experience of most users who have loaded the page normally, but there are still many users who exit the page before the fold is completed, or the page loads with errors. Such cases cannot be reflected in the time above the fold. Therefore, the client adds a unified white screen detection capability, and uses dynamic configuration to check the content of the current page element. When the user leaves the page (including switching to the background, exiting, and jumping to the next page), whether there is real content on the page monitors the white screen state visible to the user. .

Pre-render and warm-up container normalization

A set of standard docking protocols between the front end and the client are established. The client loads the corresponding ROCKET container according to the configuration and the current app memory water level through the configuration platform. The container background preloads the main document, business resources, and monitors the background abnormal exposure and other data. The front end intercepts the report, and the two ends agree on standard rendering interaction jsapi, as well as on-screen update notifications, etc. The client is responsible for the unified memory bayonet and rendering timing.

Summary and Outlook

After a year of in-depth optimization, on the Android platform, the first screen time of the 2021 D11 venue has increased by 50% compared with 2020 D11, and the IOS first screen time has entered the era of second opening; the real screen recording data of the Indonesian computer room shows that in the warm-up scenario, the main venue first screen time The screen time is twice as fast as the competing product Shopee, and the non-preheating scene venue is also 24.8% faster than the competing product Shopee.

Looking forward to the future, we will continue to optimize the performance of the container from multiple dimensions, such as the model system, memory allocation, and the characteristics of the WebView kernel, etc., to minimize the impact on the running stability of the app. At the same time, we will deeply optimize the loading of resources such as pictures in the WebView kernel. A series of problems such as failure and time-consuming, to create a stable and ultimate experience of the H5 container.

We are hiring!

your resume to: [e-mail]

Founded in 2012, has more than 80 million active consumers in six countries in Southeast Asia: Indonesia, Malaysia, the Philippines, Singapore, Thailand and Vietnam, and has a logistics and payment network with obvious competitive advantages in the region. As Alibaba's flagship e-commerce platform in Southeast Asia, uses Alibaba's advanced and mature product technology to rapidly improve overseas local e-commerce capabilities and help Alibaba's ecosystem to rapidly develop overseas business. Based on Alibaba's existing platforms, we extract a set of international Full-link system, from wireless mobile phone to transaction link, from merchant business to big data and recommendation, to create a brand-new end-to-end international e-commerce operating system.

Here, you not only have the opportunity to understand the core platforms such as commodities, transactions, membership, and marketing, but also have the opportunity to accept the challenges of forward-looking overseas e-commerce business, and need to abstract business and platform separation for multi-country scenarios, and the novelty of the task and challenges are unprecedented. The positions we are recruiting include product, architect, development, testing, front-end and other opportunities. The business involves all aspects of e-commerce end-to-end. As long as you are confident, capable and passionate, you will definitely find new challenges that attract you. join Lazada, and join us to stir up the Southeast Asian market and create an international e-commerce!

pay attention to [Alibaba Mobile Technology] WeChat public account, 3 mobile technology practices & dry goods every week for you to think about!