Performance Optimization Strategies for a WeChat Mini‑Program Serving Vivo Offline Agents

The article introduces the "C‑end User Mini‑Program" of Enterprise WeChat, a tool used by Vivo offline agents, stores, and sales assistants to connect with users. Because the program handles a large volume of page views (PU) and unique visitors (UV), improving its performance is essential for a superior user experience.

Business status

The mini‑program serves Vivo offline users, offering two main functions: new‑device pre‑sale and new‑user registration.

User group: Vivo offline users.

Main features: Vivo new‑device pre‑sale, new‑user registration.

Examples of the registration and pre‑sale pages are shown below:

vivo new‑user registration

vivo new‑device pre‑sale

Performance data before optimization

Metrics collected from the Mini‑Program Data Assistant include code‑package download volume, open‑time distribution, network‑request latency, and traffic consumption. The charts (shown below) reveal that most code‑package downloads finish within 2–5 seconds, while some HTTP requests experience long delays, indicating significant optimization potential.

Defining high performance

Performance is not only about speed; it must consider user‑perceived experience across all loading stages. Key terms include:

FCP (First Contentful Paint): end of white‑screen loading.

FMP (First Meaningful Paint): first screen rendering completed.

TTI (Time To Interactive): all content loaded.

Target performance indicators

Official Mini‑Program standards:

First‑screen time ≤ 5 s.

Render time ≤ 500 ms.

setData calls ≤ 20 times/s.

setData payload ≤ 256 KB (after JSON.stringify).

WXML nodes < 1000, depth < 30, children ≤ 60.

All network requests return within 1 s.

For this mini‑program the goals are stricter:

First‑screen time ≤ 2.5 s.

setData payload ≤ 100 KB.

All network requests ≤ 1 s.

Smooth scrolling for components and long lists.

Basic concepts

The mini‑program runs on a browser engine, not a native client, and uses a dual‑thread model:

View layer (WebView thread) renders pages.

Logic layer (separate JS thread) executes business logic.

Startup steps

Prepare the runtime environment (initialize the base library).

Download the code package.

Load and execute all JS files in the main package.

Initialize the home page based on the startup path.

The WeChat Developer Tools provide an "audits" plugin that evaluates performance, user experience, best practices, UI, and network aspects.

Optimization techniques

4.1 Reducing slow startup

Remove unused files, functions, and CSS; eliminate unnecessary imports.

Reduce static assets in the code package; host images/videos on a CDN.

Shift business logic to the backend to avoid frequent re‑reviews.

Use sub‑packages and pre‑download them (see official docs).

Convert some pages to H5 via the web‑view component.

4.2 Shortening white‑screen time (FMP)

Enable local caching of API data.

Prefetch data before navigation (store in a global Promise).

Defer non‑critical data requests.

Split‑screen rendering: render primary modules first, then secondary ones.

Use skeleton screens for stable placeholders.

Limit concurrent HTTP requests (max 10 for wx.request, 5 for wx.connectSocket).

Optimize images (WebP, compression, sprites, lazy‑load).

4.3 Improving rendering performance

Reduce frequency and volume of thread‑communication.

Decrease the number of WXML nodes.

Merge multiple setData calls into one.

Remove unnecessary event bindings.

Eliminate superfluous node attributes. Example:

<view class="tabbar-item" wx:for="{{list}}" wx:key="index" item="item">
  <view @tap="tabFn" data-index="{{item}}">
  </view>
</view>
methods = {
  tabFn (e) {
    const item = e.currentTarget.dataset['item'];
    console.log(item);
  }
};

4.4 Reducing memory consumption

Clear setTimeout and setInterval timers when a page is hidden or unloaded.

Throttle heavy events such as onPageScroll .

Avoid CPU‑intensive calculations and large setData payloads.

Optimization results

Audit scores before and after optimization show a clear improvement. The download‑time distribution now concentrates around 1–2 seconds, and no memory anomalies were observed.

Conclusion

Mini‑program performance optimization follows the same principles as H5 optimization: continuous iteration based on diverse user scenarios. The article outlines various optimization scenarios and solutions, encouraging developers to apply these practices in future projects.