Core Web Vitals for Three.js and WebGL Websites
How to protect LCP, INP and CLS on immersive websites with staged loading, asset budgets, renderer controls, fallbacks and progressive enhancement.
Do not make WebGL the critical path
The initial document should paint meaningful content before a large model, texture set or post-processing stack finishes downloading. Reserve layout space for the scene so its eventual appearance does not shift surrounding content.
Load the minimum renderer code needed for the first interaction and defer secondary effects. A visitor should be able to understand who you are and what you offer while the cinematic layer is warming up.
Largest Contentful Paint
LCP often suffers when a hero relies on a large canvas or background asset. A lightweight poster, optimised hero image or HTML headline can become the immediate visual anchor while the interactive scene loads after first paint.
Preload only genuinely critical assets. Preloading a huge model simply starts the bottleneck earlier.
Interaction to Next Paint
Pointer effects and scroll-linked rendering should not monopolise the main thread. Move expensive work into the render loop, batch updates, avoid unnecessary state changes and cap renderer pixel ratio on high-density displays.
Complex scene updates can be throttled on mobile. The most responsive effect is sometimes the effect that chooses not to run.
Cumulative Layout Shift
Canvas dimensions, hero height, fonts, cards and media should reserve final space. Dynamic loaders should overlay existing geometry rather than insert blocks that push content down.
Font loading should use predictable fallbacks and late-loading media should have explicit dimensions.
Measure on real devices
Desktop development machines hide problems. Test mid-range phones, slow networks, thermal throttling, background tabs, reduced motion and browsers with different WebGL capabilities.
Performance is part of the art direction. A scene that adapts elegantly to device limits feels more premium than one that insists on maximum effects while dropping frames.
What to do next
If this is the problem you are solving, start with the operating constraints and evidence rather than a technology shopping list. The related service page explains the engineering approach.
Explore Web Experiences →