H5 Front-End Performance Testing: Loading Process, White‑Screen and Lag Analysis

Author: Ouyang Xia on Testing

H5 pages are flexible, lightweight, and cross‑platform, making them popular in many business scenarios. However, compared with native apps, H5 performance often lags—white screens appear on page load, and interactions such as list scrolling are less smooth. This article shares practical testing methods for H5 front‑end performance, aiming to spark discussion and uncover valuable research topics.

1. Introduction: Overview of H5 Page Loading Process

The following screenshots show several stages of opening an H5 page on the selected platform.

Images 1‑4 can be roughly classified: Image 1 is performed by the App (initializing the WebView context). Images 2‑4 depict the H5 loading process. The time spent in the App stage is native code execution, which we will not discuss further. The fourth image shows the first screen that users see, commonly called the first paint .

1) Network Request Loading

After the WebView receives the H5 URL, it calls loadUrl and starts requesting the first resource. This stage includes DNS resolution, establishing the network connection, and data transmission.

2) HTML Parsing

When the HTML is returned, the WebView parses tags and content from top to bottom, identifies external resources, calculates layout, and renders the page. During this process, a DOM Tree (for structure) and a Render Tree (for layout) are built.

3) External Resource Loading

This step loads external CSS, images, and JavaScript from the network, then performs another layout calculation and rendering pass. The page becomes fully visible only after images and CSS are loaded. JavaScript, if placed at the bottom of the HTML, generally does not block rendering.

2. Case Study: White‑Screen Issue

Knowing which loading stage the page is in, how long each stage takes, and the total first‑screen time is essential when a white screen occurs.

Using Chrome DevTools on a PC to simulate the H5 page, the Performance panel can record all events from the first request to load completion, revealing detailed timing for each phase.

The two most critical first‑screen metrics are domContentLoaded (first paint visible) and onLoad (full load). Besides the visual method above, you can also read window.performance.timing in the console to obtain timestamps and calculate these values.

For realistic data, we need measurements from real mobile devices. This can be achieved by reporting timing via JavaScript or by remote‑debugging Android devices: enable WebView debugging, connect the device via USB with USB debugging turned on, then open chrome://inspect in Chrome on the PC and follow the same steps as the PC simulation.

Analysis of traditional pages shows that most latency resides in mobile network requests. A direct way to reduce this is “server‑side rendering”: the backend (e.g., Node.js) concurrently fetches all first‑screen CSS, JS, and API data, assembles a complete HTML, and returns it to the front‑end, achieving near‑instant ( second‑level ) opening.

3. Case Study: Lag Issues

During interactions such as scrolling lists, swiping, or carousel animations, users may experience lag. This involves JavaScript execution, resource requests, layout recalculation, and rendering. Performance analysis often reveals that lag is not always due to weak device hardware; sometimes it is “pseudo‑lag”.

One common cause is an excessively small touch‑hot area:

True lag often stems from script errors that freeze the page, not just slow it down. Memory issues also cause progressive slowdown as resources accumulate—e.g., complex canvas animations, heavy iframe usage, or live streaming can lead to memory leaks.

For example, a memory leak caused by unreleased DOM nodes in a comment list grows to tens of thousands and results in noticeable stutter.

4. Summary: H5 Front‑End Performance Testing Solutions

Front‑end performance is not limited to white screens or lag; overheating and other issues also affect user experience. From a core‑experience perspective, the most important metric is the first‑screen speed , which improves both user satisfaction and business conversion rates. Other key factors include smoothness, traffic consumption, and CPU usage, depending on the scenario.