Shipping 3D on the web without losing Core Web Vitals

Three.js and a good Lighthouse score can live together, but only if the 3D never sits on the critical path. Everything below follows from that one rule.

Defer the renderer, not the content

Server-render every word. Load the WebGL bundle after hydration and only when its canvas is near the viewport. Give the canvas a CSS fallback so the layout is complete before a single shader compiles.

Pause what nobody is looking at

Each scene gets its own render loop that stops when it scrolls off screen and restarts when it returns. On mobile, cap the device pixel ratio, skip post-processing and cut particle counts by two thirds.

• One canvas per scene, paused off-screen
• Pixel ratio capped at 1.25 on phones
• No bloom or chromatic aberration on mobile
• Procedural geometry instead of heavy GLTF where possible

Animate with CSS where you can

Entrance reveals, staggered headings and menus are cheaper as CSS transitions toggled by a class. Save JavaScript animation for what genuinely needs it: scroll scrubbing, physics and 3D.