Core Web Vitals & 3D Sites: How to Pass Google's Speed Test
Google made Core Web Vitals a ranking factor in 2021. For 3D websites, CWV compliance requires deliberate engineering decisions — it is not the default. This article explains what the three core metrics measure, why 3D sites commonly fail them, and exactly what to do to pass.
The Three Core Web Vitals
Largest Contentful Paint (LCP) measures how long it takes for the largest visible content element to render. For most 3D sites, this is the hero canvas element. Google's threshold: 2.5 seconds Good, above 4 seconds Poor.
Cumulative Layout Shift (CLS) measures visual stability. A 3D canvas that loads asynchronously without a reserved space causes CLS. Threshold: 0.1 Good.
Interaction to Next Paint (INP) replaced First Input Delay in 2024. It measures responsiveness — how quickly the page reacts to any user interaction. 3D scenes that run heavy computations on the main thread cause INP failures. Threshold: 200ms Good.
Why 3D Sites Commonly Fail CWV
LCP failures trace back to three causes:
- Uncompressed 3D model files (GLB/GLTF files of 5–50MB)
- Uncompressed texture files (PNG textures of 2–10MB each)
- No loading strategy — the browser downloads the entire scene before rendering anything
CLS failures happen when the canvas element has no explicit dimensions and resizes as it loads.
INP failures happen when 3D scene updates block the main JavaScript thread.
Fixing LCP: The Asset Pipeline
Geometry compression with Draco. A typical 15MB GLB file compresses to 1–2MB with Draco without any visible quality loss at normal viewing distances.
Texture compression with KTX2/Basis Universal. A 4MB PNG texture compressed to KTX2 is typically 400–600KB on disk.
Progressive loading. Display a low-polygon version of your 3D scene immediately (under 200KB) while the full scene loads in the background.
Fixing CLS: Reserve Space
Set explicit dimensions on all canvas elements using CSS: width: 100%; aspect-ratio: 16/9. This reserves the correct space before the 3D content loads, preventing layout shift.
Fixing INP: Keep the Main Thread Free
Move heavy 3D computation off the main thread using Web Workers where possible. Use requestAnimationFrame correctly — never perform expensive operations synchronously in response to user input.
Testing CWV for 3D Sites
- PageSpeed Insights (pagespeed.web.dev) — run on homepage and key landing pages
- Google Search Console — Core Web Vitals report for real-user field data
- WebPageTest.org — detailed waterfall view; run tests from Mumbai for Indian audience data
