An actionable checklist for silky 60 FPS on mid-range phones.
Budget your frame time
At 60 FPS you have ~16.67ms per frame; reserve ~4–5ms for the browser. Keep your game loop consistently under ~12ms and move non-critical work (analytics, logging) outside the loop.
Minimize state changes
Batch fills/strokes, reuse gradients, and avoid expensive shadow effects every frame. Draw fewer, larger primitives instead of many tiny ones.
Use pointer events
Prefer Pointer Events over legacy touch/mouse; mark listeners as passive to avoid blocking scrolling on mobile browsers.
Snap to pixels
Align moving sprites to integer coordinates when possible to reduce blurring and compositing work.
Profile early & often
Use the Performance panel in Chrome/Edge to find long tasks and layout thrashing. Optimize based on data—not guesses.