Optimizing Mobile Web Performance in Baidu iFanFan App: Strategies and Practices

In the era of rapid mobile internet development, web pages embedded in apps have become increasingly important due to their low cost, multi‑platform reuse, reduced app package size, and ability to bypass Apple’s hot‑update restrictions. However, mobile web pages still lag behind native pages in loading speed, affecting user experience.

The article first identifies three main bottlenecks on mobile devices: low bandwidth, slower processors, and limited memory, which together cause noticeable loading delays and even OOM crashes.

It defines web‑page load time as the interval between the moment a user initiates navigation and the moment business data is rendered. The typical loading process includes stages of no feedback, white‑screen, and loading, with the WebView loadFinish callback not reflecting the true user‑perceived completion.

To address these issues, a series of optimization practices are presented:

Independent component packaging and distribution: Static resources (HTML, JS, CSS) are compressed into offline component bundles that are downloaded once and stored locally, eliminating repeated network fetches.

On‑demand pre‑rendering (NSR): Resources and data are fetched and rendered in the background before the user opens the page, reducing perceived load time from seconds to hundreds of milliseconds.

WebView container pre‑initialization: WebView instances are created and partially loaded in a container pool ahead of time, cutting white‑screen duration and saving 200‑300 ms on both iOS and Android.

Micro‑frontend architecture (Master‑Slave): A shared master component provides common frameworks (e.g., Vue Router) via symbolic links, allowing a single WebView to serve multiple business components, dramatically lowering memory consumption.

Pre‑installed offline packages: Critical component bundles are bundled with the app installer, ensuring immediate availability without download delays.

Client‑side request handling: Network requests are routed through the native layer via JS‑Bridge, solving cross‑origin issues and enabling unified request optimization.

Network pre‑loading: Business requests are triggered as early as possible, often in parallel with DOM construction, achieving a 300‑600 ms reduction in overall load time.

Empirical results show that after applying these techniques, the average load time of core pages in the iFanFan app dropped from 2‑3 seconds to under 1 second, meeting the goal of “instant opening.”

The article also briefly mentions additional efforts such as upgrading iOS WKWebView and Android X5 kernels, and concludes with a call for continued performance exploration.