Performance Optimization of M Page: Achieving Sub‑Second Load and Zero White Screen via Video Frame Analysis

Response time is a key performance metric for H5 pages; keeping data loading under 2 seconds provides a good user experience, while delays beyond 5 seconds cause user loss.

To achieve the “one‑second rule” and “sub‑second load without white screen” for the M page, several techniques were applied: optimizing API response data, introducing Server‑Side Rendering (SSR), using offline packages, compressing images, implementing skeleton screens, and reducing initial render time.

Testing strategies were designed, comparing point‑tracking reporting and video frame analysis. While point‑tracking is quick to view, it may be inaccurate and cannot capture white‑screen duration; video frame analysis provides precise millisecond‑level measurements but requires processing longer videos.

Given the project’s requirement for millisecond accuracy and short video lengths, video frame analysis was selected.

The implementation involves recording the user interaction video, extracting frames using Python’s VideoCapture , naming frames by timestamp (milliseconds), and calculating durations by subtracting the start‑frame timestamp from the end‑frame timestamp. This method automates white‑screen and first‑screen load time calculations.

Automation scripts enable batch processing of multiple videos, facilitate automatic selection of key frames via image recognition, and significantly reduce manual effort, allowing the team to complete performance testing tasks efficiently.

Method

Point Tracking Reporting

Video Frame Analysis

Advantages

Fast data view; can be obtained via packet capture.

Provides real user video data; no need for packet capture tools; test data is easy to retain for later analysis.

Disadvantages

Potential inaccuracy; requires embedding tracking code in business logic; cannot measure white‑screen duration.

Long videos make the script time‑consuming.