Automated Measurement of Mobile H5 Page Load Time Using Chrome DevTools Protocol and Machine Vision

The author introduces two distinct approaches for automatically measuring the loading time of mobile H5 pages. The first method uses Chrome DevTools Protocol (CDP) to retrieve loading duration, URLs, resource trees, screenshots, and network conditions from Android Chrome or WebView, employing the lightweight Python wrapper PyChromeDevTools and the popular chrome-remote-interface JavaScript library.

Preparation steps include enabling Android port forwarding, configuring the app’s WebView for debugging, and identifying the target process ID. Once set up, CDP commands can fetch page loading time, all loaded URLs, the current resource tree, and even execute JavaScript such as the PerformanceTiming API.

The second method addresses scenarios where CDP is unavailable (non‑Chrome browsers or iOS) by analyzing recorded screen videos. It extracts frames, converts them to grayscale, applies edge detection and Hough transform to locate horizontal lines that correspond to the browser’s progress bar. By tracking the appearance, growth, and disappearance of this line across frames, the start and end of page loading are determined.

Enhancements include multi‑frame dynamic analysis, color‑based filtering to improve precision for thin progress bars, and a two‑pass algorithm that first learns the approximate row and color range of the progress bar and then refines start/end positions. The approach achieves near‑100% detection accuracy on test cases, processing 1080p video at roughly one‑fifth of real‑time speed.

Both techniques have advantages: CDP provides accurate, low‑level WebKit data without extra instrumentation, while the vision‑based method works across browsers and platforms. Limitations include dependence on Chrome’s market share for CDP and video frame‑rate constraints for the vision approach, which may miss asynchronous requests affecting the true Time‑to‑Interactive metric.

In conclusion, the article demonstrates practical, reproducible experiments for automated load‑time measurement on mobile devices, offering readers actionable insights and code snippets to implement either method in their own performance testing workflows.