Learning on Web Dev Open is free for all.

Immersive Web > Budgets, accessibility and the black screenThe budget comes before the scene
Phase 07Budgets, accessibility and the black screen366 of 434

The budget comes before the scene

Draw calls, triangles, texture megabytes, bundle kilobytes and a frame time. Numbers agreed in advance, not measured in regret.

Concept15 minAI pair

A budget is five numbers written before the first asset exists: draw calls per frame, triangles on screen, texture memory in megabytes, JavaScript transferred in kilobytes, and the frame time you intend to hold. Without them, optimisation is an argument about taste in week nine, and every argument is won by whoever cares least about the phone.

A defensible starting point for a marketing-grade scene on mid-range mobile is something like 150 draw calls, 400,000 triangles, 60MB of texture memory after KTX2, and under 500KB of JavaScript for the 3D layer. Adjust them for your case, but adjust them deliberately and write down why.

Convert the frame rate into time and it gets concrete. 60fps is 16.7ms total, of which the browser wants a few for compositing, so your realistic ceiling is around 12ms, and a phone that is thermally throttled after two minutes gives you roughly half of what it gave you in the first ten seconds. Budget for the throttled device, because that is the one your visitor is holding.

You should now be able to

  • Write a performance budget with five specific numbers
  • Convert a target frame rate into a per-frame millisecond budget
Ask the community

Loading…