Understanding and Optimizing Mobile Page Performance and Jank

In mobile page development, performance optimization and eliminating jank are essential. The first step is to recognize the different types of jank that can occur.

Jank can be classified into three clear categories: screen tearing , where mismatched frame data is displayed due to the screen’s refresh mechanism; frame drops (jank) , where the frame rate falls below the refresh rate causing visible pauses; and long unresponsiveness , where the UI waits for network or other events and blocks user interaction.

Key performance metrics include response time (aim for < 100 ms), animation latency (≤ 16 ms per frame, targeting 60 FPS), idle time maximization (reserve ≥ 50 ms for low‑priority work), and total page load (≤ 1 s). Traditional FPS is not always precise, so the Android‑specific SM (SMoothes) metric is introduced: SM = FPS × (total frames – dropped frames) / total frames .

The browser rendering pipeline is divided between CPU and GPU. The CPU handles parsing HTML, calculating styles, layout, updating the layer tree, painting, and compositing. The GPU is responsible for rasterizing layers and compositing them, synchronized by VSync signals. Understanding each stage helps pinpoint where jank originates.

To mitigate jank, especially on low‑end devices, the article recommends: enabling hardware acceleration, using transform/opacity and will‑change for animations, limiting animation scope, animating off‑document‑flow elements, reducing layout‑threatening style accesses (e.g., offsetWidth), avoiding deep DOM traversals, slicing long tasks, and preferring GPU‑friendly techniques when available.