How Ele.me Supercharged Mini‑Program First‑Screen Speed: A Year of Container Optimizations

Current Situation Overview

Ele.me APP, a major traffic entry for Alibaba's local life services, hosts the largest user base and the most extensive business scope, making its mini‑program container a critical component. The container's performance and stability directly affect user experience, prompting a focus on first‑screen speed.

Container Architecture

The local‑life mini‑program container (Lriver) is built on Alibaba's Triver/Ariver foundation, offering flexible routing, package management, navigation bars, API extensions, data storage, and performance optimizations.

Optimization Practices

Before optimization, the first‑screen loading sequence was fully serial, as shown in the following diagram.

Key optimization nodes were identified using strategies such as space‑for‑time trade‑offs, serial‑to‑parallel conversion, pre‑processing, and scenario‑specific tuning.

After a year of targeted improvements, the loading sequence was streamlined, as illustrated below.

1. Package and Package Info (Pre‑request, In‑App Pre‑placement, Asynchronous Update)

Packages are pre‑requested during idle time after app launch and cached, allowing immediate access without network latency. Common resources and frameworks are pre‑installed in the app to increase cache hit rates, while expiration‑update policies ensure timely asynchronous updates.

2. Render Creation & Resource Loading (Pre‑creation, Staged Pre‑load)

Render is pre‑created during idle periods and after mini‑program closure, loading Appx resources (jsbridge.js, Appx.mini.js, etc.) into cache for the next launch, reducing render creation and disk load time.

3. Worker Creation & Resource Loading (Pre‑creation, Staged Pre‑load)

Two JSContexts (A and B) are pre‑created; A loads JSCBridge.js and Appx resources, B copies A’s context after loading, eliminating worker creation and disk load delays.

4. First‑Screen Interface Pre‑request

Pre‑requesting first‑screen APIs shortens data loading time, accelerating the perceived launch speed.

5. First‑Screen Rendering (Snapshot Loading)

After successful first‑screen render, an HTML snapshot is saved and displayed on subsequent launches, drastically reducing time‑to‑visible.

6. Appx Framework (Appx 2.0)

Appx 2.0 offers lower rendering latency and memory usage, fully decouples render and worker, and enables future rapid‑start and Snapshot2.0 capabilities.

R&D Phase and Online Monitoring

The container uses core‑link performance tracing and a first‑screen startup performance tool to monitor metrics. During development, these data help identify bottlenecks before release, while the Alibaba mini‑program performance platform provides additional analysis and optimization suggestions.

1. Ele.me APP Performance Detection Tool

2. Alibaba Mini‑Program Performance Platform

3. Online Average First‑Screen Time Statistics

Comparing two mini‑programs before and after optimization:

• Leisure & Play: 1320 ms → 850 ms (‑35.6%)

• Beauty/Medical: 1218 ms → 823 ms (‑32.4%)

Pending Issues and Outlook

Problems:

Appx 2.0 performance still requires targeted optimization.

Render pre‑load capability needs further support.

Some optimization nodes are not fully compatible with third‑party mini‑programs.

These improvements have already supported stable operation during major sales events (618, 717, Double 11, Double 12) and delivered noticeable first‑screen speed gains. Upcoming Render/Worker pre‑load and Appx 2.0 enhancements are expected to further improve the container’s launch experience and benefit third‑party mini‑programs.