How Frame‑by‑Frame Analysis Transforms Mobile App Loading Performance

Background

Frame‑by‑frame analysis is a comparative method for dynamic, short‑duration processes that helps designers perform micro‑level difference analysis. Compared with static screenshots or dynamic recordings, it reveals the whole process and all details, offering high controllability.

The method originated from a loading‑experience research project. Loading, defined as reading files into memory, includes typical Baidu APP scenarios such as startup, opening a feed landing page, and opening a search landing page—each a dynamic and brief process.

Static screenshots cannot capture the full process, and recordings are too fast to see details, so a new method that shows both the overall flow and fine‑grained details is needed.

Method Origin

Inspired by the marquee game where a series of static images creates motion, splitting a short video into a sequence of frames allows better observation. For example, splitting a 300 ms Baidu APP video into 18 frames makes the entire loading process and every detail visible, and the frames can be further divided for multi‑angle analysis.

How to Perform Frame Analysis

Three Elements of Sequence Frames

Element 1: Full Process

Define the start and end frames of the short dynamic process. Example: for Baidu APP search landing page, the start is the first frame after the finger lifts, and the end is the last frame when the first screen is fully loaded. Key data: total duration, which can be converted to time for performance comparison.

Element 2: Sub‑processes

Sequence frames can be arbitrarily split to analyze sub‑processes. Identify the start and end of each sub‑process, then collect sub‑process duration, missing or extra sub‑processes, and internal differences.

Element 3: User Experience Nodes

A user‑experience node is any perceivable UI change. In the Baidu APP Android search loading example, there are five nodes. Key data: number of nodes and their order, which affect perceived loading speed.

Summary of the Three Elements

Full process – key data: total duration.

Sub‑processes – key data: sub‑process duration, missing/extra sub‑processes, internal differences.

User‑experience nodes – key data: node count and sequence.

Exporting Frame Sequences

The workflow consists of three stages: recording, creating a composition, and exporting.

1. Recording

iOS devices are recorded via a cable using QuickTime, ensuring a stable 60 FPS. Android devices use built‑in recorders or third‑party apps; lower‑end phones may drop frames, so the output frame rate should be set appropriately. Extend the start point to facilitate precise trimming later.

Convert frame count to time (iOS example): duration = frames × 16.6 ms.

2. Create Composition

Use Adobe After Effects (AE). Benefits: unify frame rate, convert video to an image sequence, and sync multiple videos for side‑by‑side comparison.

Steps: New composition → set iOS composition to 60 fps, Android to 30 fps, then import the recorded video.

3. Export

Export via File → Export → Add to Render Queue, then choose JPEG or PNG sequence in the Output Module. This splits the video into individual frames ready for analysis.

The resulting sequence frames can now be used for detailed frame‑by‑frame analysis.