Note / 2026-10-28

How We Ship Real-Time Three.js Product Pages at 92 to 97 Mobile Lighthouse and 0 CLS

The budget, the compression and the loading rules behind six flagship concept sites that run live 3D and still score 92 to 97 on mobile Lighthouse.

The numbers

Across our six flagship concept sites the recorded mobile Lighthouse performance scores are 92, 94, 94, 94, 96 and 97, with CLS at 0.000 and total blocking time between 7 and 53 ms. Initial transfer ranges from 0.32 to 1.41 MB. These come from each site's own QA file, not a one-off run.

A hard 3D budget

Each build has a written budget for 3D weight: 1 MB for the SaaS diorama site, 0.5 MB for the accountancy site, 0.34 MB for the coaching site. The shipped sizes are 0.84 MB, 69 KB for the GLB alone, and 0.34 MB. A check script fails the build when the file is over, so the budget is enforced rather than remembered.

Compress the model, bake the light

Models are optimised with meshopt and WebP textures. Ambient occlusion is baked once in Blender, so the browser does not compute it. Static parts are joined per material to cut draw calls, and repeated shapes use instancing: one demo draws its cards as a single InstancedMesh in two draw calls.

Load late, load the right thing

The coaching demo fetches its 3D only after the first interaction, so first paint never waits. The real-estate demo sends phones a 120-frame AVIF sequence instead of the live scene. Both choices cost nothing on the metric that matters most to a mobile visitor.