Performance Optimization Practices for Taro Mini‑Program: Skyline Rendering Engine and Resource Loading Improvements

Our team optimized a Taro mini‑program for the “秒送” channel during the Double‑11 promotion, addressing cold‑start, hot‑start, and rendering performance issues.

Before optimization we measured page load time using key instrumentation points (click tab, enter sub‑package, locate API start/end, CMS start/end, render start/end, total time) and identified slow sub‑package loading, long API latency, and heavy feeds rendering.

We switched to the Skyline rendering engine, which creates a dedicated render thread, reduces JS engine instances, shares resources across pages, and eliminates JSBridge communication, resulting in faster first‑screen rendering.

During Skyline adaptation we fixed several CSS and layout issues, such as avoiding calc() in backgroundPosition, replacing position:sticky with a custom StickyHeader component, ensuring root nodes use position:relative for absolute children, handling border‑radius on loading indicators, and correcting z‑index scope.

Code examples:

style={{ backgroundPosition: `center bottom -${gradientHeight}px` }}

style={{ position: sticky, top: statusBarHeight }}

We introduced lazy loading for resource slots, limiting the initial feed rendering to six items and loading the rest on scroll, and reduced the number of feed floors from 13 to 9 after cross‑team discussion.

Image resources were optimized by delivering three size variants (large, medium, small) and serving only small images for feed items, greatly decreasing download time.

API requests were refactored from sequential to parallel execution, and results were rendered in batches to cut overall request latency.

After these changes, cold‑start and hot‑start times, as well as feed rendering speed, improved significantly, as shown by the before‑after charts.

In conclusion, Taro mini‑program performance tuning involves front‑end code adjustments, rendering engine selection, resource loading strategies, and close collaboration among product, UED, and backend teams.