58RN Page Instant‑Open Solution and Practice

At the GMTC Global Front‑End Conference, Jiang Hongwei, a senior front‑end engineer at 58.com, shared the "58RN Page Instant‑Open Solution and Practice" which focuses on accelerating React Native page rendering to achieve near‑instant load times.

The business analysis showed that reducing first‑screen time by one second lowers user churn by 6.9%, leading to three key metrics: loss rate, first‑screen time, and instant‑open benefit, which together drive performance‑oriented decisions.

For first‑screen measurement, the team selected Largest Contentful Paint (LCP) because it reflects the moment most of the page is visible, can be collected non‑intrusively, and is a W3C standard. The LCP capture workflow involves recording a native start timestamp, injecting it into the JS context, listening to layout events, continuously updating the LCP value, and finally reporting the end timestamp as LCP = End – Start.

Three major bottlenecks were identified: dynamic update, framework initialization, and business request. Dynamic update caused a 29% slowdown, framework init a 43% slowdown, and business request a 57% slowdown. Code execution of unseen tabs also added latency.

Solutions included:

Resource pre‑loading combined with silent updates, reducing dynamic‑update time from 2280 ms to 1610 ms.

Bundle splitting (metro‑code‑split) to separate built‑in modules from business modules, enabling framework pre‑execution and cutting init time from 1610 ms to 1300 ms.

Native‑side parallel data fetching, where URLs like 58.com/api?user=${user} are transformed to 58.com/api?user=GTMC , lowering request time from 1300 ms to 985 ms.

Dynamic import implementation using import("./Foo") to lazily load non‑visible tabs, reducing unnecessary JS execution.

Adoption of Hermes engine and inlineRequire, shrinking a 140 ms page to 40 ms (≈80% reduction).

The combined optimizations enable most pages to achieve "second‑open" performance, and the open‑source tool metro‑code‑split provides the necessary infrastructure for bundle splitting and dynamic imports.

In conclusion, tying technical improvements to measurable business benefits (loss‑rate, LCP, instant‑open gain) facilitates adoption across teams, and the presented methods offer a practical roadmap for mobile front‑end performance engineering.