Keeping Three.js outside the critical rendering path
Text and navigation work before the 3D layer. The scene loads only after checks for the browser, device, connection, and motion settings.
The 3D scene on the Wize homepage does not carry the page content. Text, navigation, and actions render without the canvas, while a CSS background fills the hero before the browser capability check completes.
The client checks WebGL support, device capability, data-saving preferences, and reduced-motion settings before choosing a rendering tier. Capable devices receive the full scene, mid-range devices use fewer particles, and constrained devices keep the lightweight CSS treatment.
A frame-rate watcher can lower the quality tier if performance remains weak, and the render loop pauses when the hero leaves the viewport. These choices keep Three.js as progressive enhancement. Performance still has to be measured on the target device and release; the visual layer is designed so it can step aside without taking the interface with it.