Image‑Recognition Method for Measuring Mobile Web Page First‑Screen Load Time Using STF and Sikuli

The first‑screen loading time of a mobile web page is critical for user experience, yet traditional measurement methods rely on high‑speed cameras and manual image comparison, which are inaccurate and time‑consuming.

This guide introduces a low‑consumption, high‑efficiency, and highly accurate approach that uses image‑recognition to automate the measurement of first‑screen load time on mobile browsers and Android applications.

Method Overview

1. Connect the mobile device to a PC via STF , streaming the device screen to the computer with ~30 ms latency. 2. Use Sikuli to write an image‑recognition script that identifies a predefined visual marker on the first screen. 3. Write a Python script to collect performance metrics during the loading process. 4. When the marker is detected, record the timestamp, stop the image‑recognition and monitoring programs, and proceed to the next test case. 5. Aggregate data from the database to generate a final test report.

STF and Minicap

STF streams the device screen to the PC using the minicap tool, which provides a real‑time socket interface without requiring root access. Minicap supports multiple CPU architectures (arm64‑v8a, armeabi‑v7a, x86, x86_64) and various Android SDK versions.

Environment Setup (macOS)

Install dependencies: brew install rethinkdb graphicsmagick zeromq protobuf yasm pkg-config

Install Node.js:

./configure make sudo make install sudo ln -s /usr/local/bin/node /usr/bin/node sudo ln -s /usr/local/bin/npm /usr/bin/npm

Verify installation:

node -v and npm -v

Install STF (may require VPN): sudo npm install -g stf

Running STF

1. Start RethinkDB. 2. Launch STF server with stf local . 3. Access the client via http://public‑ip:7100 , log in, and begin testing.

STF offers features such as remote control, clipboard sync, real‑time screenshots, APK drag‑and‑drop installation, URL opening, log streaming with filters, shell command execution, and remote debugging via Android Studio or Chrome DevTools.

Sikuli

Sikuli uses image‑recognition to interact with UI elements, making it ideal for the described scenario where traditional UI‑property based automation fails. It runs on Windows, macOS, and Linux (requires a real screen) and uses Python for scripting.

Sikuli Installation Steps

1. Ensure a supported OS (Windows XP/8/10, macOS 10.6‑10.11, Linux/Unix). 2. Have a real display (no headless mode). 3. Install Java 6/7/8. 4. Download SikuliX from http://www.sikulix.com/quickstart.html#qs4 . 5. Choose the Python version, run runIDE.cmd to start SikuliX.