How Lazada Boosted H5 Page Performance with Preheat, Pre‑render, and SSR

Problem Analysis

During the 2020 D11 promotion, the H5 event page took 9383 ms to render the first screen, causing massive user drop‑off. The root cause was a heavy network load, numerous processing stages, and a large share of weak‑network and low‑end devices in the market.

The team mapped the full page‑load chain, identifying stages such as routing, container creation, page load, rendering, and exit.

Analysis of network and device distribution showed a high proportion of mobile users on weak networks and a large share of low‑end devices, especially in Indonesia, making performance optimization for these segments a priority.

Monitoring System Construction

To quantify user experience, the team instrumented each loading phase with data points and reported them to DP2 and UT, establishing real‑time monitoring for routing, container initialization, page loading, rendering, and exit.

Optimization Solutions

1. Pre‑heat (Space‑for‑Time)

Common JS resources were extracted from each page and loaded into the WebView before user interaction, reducing the amount of work after a click.

After launch, first‑screen time dropped below 2 s, but several issues remained:

Pre‑heat tasks sometimes did not start in wake‑up scenarios.

Pre‑heat sometimes failed or took >5000 ms.

Front‑end did not receive the pre‑heat‑complete callback, leaving the WebView idle.

Successful pre‑heat without a first‑screen callback prevented subsequent container creation.

Link mismatches caused zero hit‑rate for some pages.

2. Pre‑heat Timing Advancement

The pre‑heat trigger was moved to the moment the home page becomes interactive, and main documents were cached locally via ZCache to reduce network transfer.

3. Pre‑heat Retry Mechanism

Two retry scenarios were defined: idle‑time retry on the home page and post‑click retry with a 10 s timeout, up to three attempts.

4. Pre‑heat Link Matching

Regex rules were introduced to match page URLs with pre‑heat containers, allowing flexible matching across hosts and paths.

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"}]}

These measures lifted the pre‑heat hit‑rate for GCP and Flash‑sale pages to around 60 % and the main event page close to 70 %.

5. Pre‑render (Zero‑Delay First Screen)

By communicating with the home‑page module and pre‑rendering the event page in advance, the first‑screen time approached zero when the page was finally displayed.

6. Server‑Side Rendering (SSR)

SSR moves data fetching and HTML generation to the server, reducing client‑side round‑trips from three to two and cutting the amount of JavaScript execution.

In identical test environments, SSR improved first‑screen time by 15.2 % for in‑app pages and 28.1 % for wake‑up pages.

Standardization

First‑screen time metrics were aligned with group‑wide standards, adding full‑screen timing that includes all resources.

White‑screen detection was introduced to capture cases where users left before any content rendered.

Pre‑render and pre‑heat containers were standardized via a unified front‑end/client protocol.

Summary and Outlook

After a year of deep optimization, Android D11 first‑screen time improved by 50 % compared with 2020, and iOS entered a “second‑open” era. In Indonesia, pre‑heat scenarios made Lazada’s main event page twice as fast as competitor Shopee, and non‑pre‑heat scenarios were 24.8 % faster.

Future work will focus on device‑level optimizations, memory allocation, WebView kernel improvements, and robust handling of image loading failures to deliver a stable, ultra‑fast H5 container.