How We Cut Landing Page Load Time to Sub‑Second on Low‑End Devices

Introduction

The acquisition page serves as the landing page for upstream traffic, whose core function is to capture users and drive conversion. For user‑growth, showing the page quickly is crucial, especially for low‑activity Taobao users who mainly use low‑end devices (over 90%) and experience unstable network conditions, demanding high performance and a smooth experience.

Business Background

The target audience consists of potential Taobao customers. The page combines targeted rights (red‑packet grants) with specific product pools to create a low‑price perception. Two key logics are involved:

Red‑packet direct grant : When a user visits the page, the system checks if they belong to the target group and immediately issues a red‑packet benefit.

Subsidy price calculation : The product module displays the price after deducting the red‑packet, showing the lowest price to the user.

Because each module processes customized rights and products, requests become highly tailored, and to obtain the most accurate subsidy price, product requests must wait for the red‑packet request to succeed, creating serial dependencies.

Performance Before Optimization

First‑screen visible times were noticeably slow:

Low‑end device: 6.6 s

Mid‑range device: 4.2 s

High‑end device: 2.8 s

Average: 4.9 s

Root causes identified were:

Overall JavaScript size around 400 KB (200 KB business JS + base libraries).

Serial API calls—red‑packet request followed by product request—extending total latency.

Unstable external conditions: low‑end hardware and poor network further degrade performance.

Optimization Roadmap

Centralized API Refactor

Originally each module issued its own request, leading to a serial rendering chain. By extracting the request logic to a centralized API, the server handles the red‑packet and subsidy calculations in one call, and the front‑end receives a single payload that is distributed to modules. This reduced average module start time from two person‑days to 0.5 person‑days.

Data Prefetch (Prefetch)

Prefetch leverages Taobao client configurations to determine whether a page should be requested ahead of user navigation. When the configuration matches, the client initiates the page request during the WebView initialization phase, allowing the actual rendering to use the pre‑fetched response. This typically saves 300–400 ms, with greater benefit on low‑end devices.

Static SSR

Traditional CSR relies on client‑side resource loading, which is costly for low‑end devices. We introduced a static SSR solution that caches rendered HTML at the CDN edge. If the CDN has a hit, the pre‑rendered HTML is returned instantly; otherwise, an SSR FaaS service generates the HTML and writes it back to the CDN. To support personalized content, we implemented an “anonymous cache” that stores only non‑personalized data, while personalized data is fetched and swapped in after the page’s JavaScript loads.

Results

After applying centralized API, data prefetch, and static SSR, first‑screen visible times dropped dramatically:

Low‑end device: 0.9 s (improvement of 5.7 s)

High‑end device: 0.8 s (improvement of 2 s)

Animated Transition for SSR Data

To smooth the switch from anonymous cached content to personalized data, we added transition animations:

Red‑packet drop animation: the red‑packet module appears with a top‑down bounce, creating a “rain‑down” effect.

Product swap animation: when real product data arrives, a fade‑in/out and slide animation conveys a “product change” feeling; price reductions can be highlighted with a rolling number animation.

Simple transition animations were implemented with a playback speed reduced to 0.5× for a smoother experience.

Conclusion

Front‑end performance optimization is an ongoing battle that requires deep understanding of page architecture and business logic. Key principles include:

Base decisions on data rather than speculation—use performance metrics, monitoring, and logs to pinpoint bottlenecks.

Avoid over‑optimization; balance development cost, server cost, and user benefit.

Align optimization efforts with business goals to ensure technical improvements translate into tangible growth.