60fps or Nothing: The WebGL Performance Checklist

A cinematic site that stutters is worse than a static one. Motion is a promise — and a dropped frame breaks it.

Measure before you optimize

Never guess. Profile with the tools built into your browser first:

# Build-time: bundle & module analysis
npx next build --debug

# Runtime: frame-by-frame GPU profiling
chrome://tracing

The checklist we run on every WebGL scene

1. One renderer, one loop — never two requestAnimationFrame loops fighting
2. Geometry on a budget — merge meshes, share materials, cap draw calls
3. Textures in the right format — ASTC / ETC1 compressed, power-of-two, mipmapped
4. Lights are expensive — fake them with emissive materials and shader tricks
5. No layout thrash — animate transform and opacity only, use will-change sparingly
6. Lazy-load everything — nothing heavy mounts before it's on screen

The numbers that matter

Final word

Performance is a design decision, not a QA step. Decide at the start of the project — retrofitting 60fps after launch is a rewrite wearing a costume.