3D on Your Website Without Killing Performance: Our Playbook

"We added a 3D model to the site and it dropped from 93 to 41 on Lighthouse" — that's the sentence we hear most when a client comes to us after a failed attempt. 3D and site speed don't have to be opposites. They walk a fine line, but once you understand the rules — both win.

The problem: why 3D slows a site down

A typical 3D model out of Blender or Cinema 4D weighs between 30 and several hundred megabytes. On top of that, WebGL makes the GPU and CPU work hard, leaving fewer resources for rendering the rest of the page. On a powerful desktop, you won't notice. On an iPhone 11 over 4G in traffic — the page freezes.

Step 1: preparing the model — up to 90% size reduction

GLB + Draco Compression

The right format for the web is GLB — a binary packaging of GLTF. But the real magic is Draco: Google's compression algorithm that shrinks model geometry by 80–95% with no visible quality loss. A 40MB model becomes 3MB. The command that's enough in most cases: `gltf-transform optimize input.glb output.glb --compress draco --texture-compress webp`.

Checking the polygon count

For the web, 50,000–100,000 polygons per scene is the comfortable maximum. Beyond that — stuttering. We decimate heavy models in Blender with the Decimate modifier: a 30–50% reduction while preserving the look.

Step 2: lazy loading and a fallback

• Dynamic import: load the 3D library only when the user reaches the relevant part of the page — not on first load
• Intersection Observer: the scene starts loading when 50% of it is in the viewport
• Suspense + fallback: while loading, show a placeholder (a CSS animation, a static image, a branded spinner) — not a blank screen
• Mobile detection: on screens under 768px we usually show a static rendered image of the scene. Barely noticeable and slows nothing down

A better approach than a mobile fallback? Run a mobile-optimized version of the scene. A more practical approach? A fallback. Choose based on how central 3D is to the experience.

Step 3: Spline vs Three.js vs React Three Fiber — what we chose and when

Spline: the fastest to ship, the least control over optimization. Great for decorative scenes and demos. It's what we use on this very site — the scene you see is Spline, combined with lazy loading that fetches it only when you reach the relevant section. React Three Fiber: full control, scroll-driven animation, full user interaction. The choice for product sites and configurators. Vanilla Three.js: for maximum performance and dashboard-style renders — when even a few KB of JavaScript matter.

The score after optimization

With this playbook, our 3D projects reach 85–95 on Lighthouse Performance on desktop, and 75–88 on mobile. LCP (Largest Contentful Paint) under 2.5 seconds. Zero CLS — the scene causes no layout shift because it has a fixed-height placeholder.