A WebGL site that had stopped loading on phones
An eight-week rescue of a launch site that scored 38 on mobile and was losing half its traffic before first paint.
- Client
- Lodestar Robotics
- Year
- 2023
- Discipline
- Performance & motion
- Our role
- Performance, WebGL, front-end
The challenge
The challenge
The site had been built by a motion studio with no front-end engineer on it. 14MB of uncompressed glTF, four simultaneous canvases, and an animation loop that ran whether or not anything was on screen. Mobile bounce was 61%.
The approach — 3 moves
What we did
- 01
We cut four canvases to one, shared between sections, and paused the loop whenever it left the viewport. That alone returned most of the frame budget.
- 02
Geometry went through Draco and texture atlasing: 14MB to 1.1MB with no visible difference at the sizes the site actually renders at.
- 03
The scroll animation was rebuilt on a single timeline with reduced-motion parity, so the fallback tells the same story instead of showing nothing.
Project imagery
Outcome
What changed
- Lighthouse mobile
- 38 → 94
- Payload
- −92%
- Mobile bounce
- −34pts
Built with
- Next.js
- React Three Fiber
- Draco
- Lighthouse CI