WebGL that doesn't hurt performance
Real 3D on a marketing site is worth it only if it stays fast. Our checklist for shipping WebGL that loads quickly and degrades gracefully.
3D is the fastest way to make a site feel modern and the fastest way to make it feel broken. The difference is entirely in how it is loaded.
Lazy-load the scene. Nothing about the 3D layer should block first paint — the page should be readable and interactive before a single polygon arrives.
Pause offscreen work. A canvas that keeps animating below the fold burns battery for no benefit. Render only while visible.
Respect reduced-motion preferences with a static fallback that still looks intentional, not like a missing image.
Budget your geometry. A handful of low-poly shapes with good lighting outperforms a dense model every time, both visually and on mid-range phones.