Performance and Experience Optimization of H5 Special Topic Pages in Mobile App WebView

Project background: H5 special topic and activity pages are a key carrier for promotion and user acquisition in the company, but they suffer from slow loading, white‑screen flashes, and a disjointed native title bar.

Performance optimization:

1. Offline caching of public resources – static libraries such as JSSDK, React, Vue, and runtime (≈500 KB gzipped) are pre‑downloaded and stored on the device, enabling first‑visit usage without a second request. The solution supports pre‑delivery, has a robust update mechanism, and has been validated in many production projects.

Supports pre‑delivery, allowing first‑visit H5 to use local cache.

Provides a complete update mechanism and tooling for easy operation.

Proven reliability through extensive online validation.

2. Template pre‑rendering – pages are abstracted into a template + data bundle. After app launch, the WebView loads the template; when a specific domain and flag (pr=1) are present, the bundle.js is fetched, executed, and merged with the template. This approach yields about a 60 % overall performance gain.

3. Native player embedding – using same‑layer rendering, the iQIYI native player is embedded in H5, delivering native‑level playback (including 4K support) while keeping smooth transitions inside the page.

4. Split‑screen loading – the runtime loads first‑screen components first, then lazily loads the rest, reducing first‑screen component load by roughly 60 %.

5. Business API slimming – analysis showed many API responses contain far more data than needed (e.g., 30 KB response where only 5 KB is used). Node‑level trimming removes unused fields, cutting component size by ~25 KB (≈250 KB per page with 10 components).

6. WebP image optimization – dynamic detection of WebP support; browsers that support WebP request the .webp version (e.g., by appending caplist=webp to the URL). This reduces a typical 500 KB image to about 130 KB, noticeably speeding up first‑screen rendering.

Experience optimization:

• Title bar customization – using setToolColor to set text and background colors, achieving a seamless visual experience.

• Hide title bar – adding qyc-title-hide=1 or hideNav=1 to the URL lets the H5 implement its own navigation.

• Pull‑to‑refresh – adding qyc-support-refresh=1 enables native‑like pull‑down refresh without leaving the page.

• Page background color – the qyc-body-bgc parameter sets the WebView background early, eliminating white‑screen flashes.

• Placeholder optimization – pre‑store image width/height to avoid layout shifts during image loading.

• Image loading experience – add background color and fade‑in animation to cover images, improving perceived quality.

Result: After applying both performance and experience optimizations, the H5 pages show significantly faster first‑screen load, reduced network usage, and a smoother, more immersive user experience, as demonstrated by the before/after screenshots.