The objection to 3D on the web is speed, and it is a fair objection aimed at the wrong target. Real-time 3D is not inherently slow. Unbudgeted 3D is slow.
Here is the budget, ordered by impact.
1. Compress the Geometry
Models arrive from design tools at production density: hundreds of thousands of triangles for something that occupies a quarter of the screen. Decimate to the lowest count that holds silhouette and shading, then apply Draco or Meshopt compression to the geometry stream.
Typical result is a large reduction in transfer size with no perceptible visual difference at the distances the camera actually uses.
2. Compress the Textures, Properly
This is the biggest and most commonly missed win. A 4096 by 4096 PNG is not just a large download, it expands into a large block of uncompressed GPU memory once decoded. Four of those will stall a mid-range phone regardless of connection speed.
KTX2 with Basis Universal stays compressed in video memory. Combined with honest resolution decisions, most textures do not need to be 4K, this is usually the difference between a scene that runs on a phone and one that does not.
3. Cap the Pixel Ratio
A modern phone reports a device pixel ratio of 3. Rendering a full 3D scene at 3x means shading nine times the pixels of a 1x render. Capping the renderer at 1.5 or 2 costs almost nothing visually and can double the frame rate outright.
4. Reduce Draw Calls
Every separate mesh with a separate material is a draw call. Scenes exported straight from a design tool routinely arrive with hundreds. Merge static geometry, share materials, use instancing for repeated objects, and atlas textures where it makes sense.
5. Be Ruthless About Lights and Shadows
Real-time shadow maps are expensive and multiply per light. Most brand scenes need one shadow-casting light at most. Everything else should be baked into the textures or handled with an environment map. Baked lighting is usually better looking anyway, because it can be computed offline at quality no real-time renderer will match.
6. Keep 3D Out of the Critical Path
The page's server-rendered content paints first. The canvas initializes after, ideally after first interaction or on intersection. The largest contentful paint element should be a compressed poster image, not the WebGL scene.
Reserve the canvas layout box up front so nothing shifts when it mounts, which protects cumulative layout shift. Done this way, a 3D site passes Core Web Vitals the same as any other build. The same discipline applies to cinematic video.
7. Plan the Fallback Before the Scene
Some devices will not sustain the experience. That is a design requirement, not a failure.
The fallback ladder, in order: full scene, reduced scene with fewer effects and lower resolution, pre-rendered image sequence scrubbed on scroll, video loop, static graded still. The content and the conversion path stay identical at every rung. Only the presentation degrades.
Deciding this at scoping is what keeps a 3D build honest. Deciding it after launch, when a client opens the site on their own phone, is how projects go sideways.
UM Media ships Immersive / 3D builds with intentional mobile fallbacks as part of the scope. See Advanced Web Experiences, or read how the 3D stack gets chosen.