How to design a 3D website without slowing it down

A 3D hero is easy to fall in love with and easy to regret. The regret usually is not taste. It is a first contentful paint that arrives after the visitor has already left, or a heading that exists only on a canvas search engines cannot read.

Put the real heading in HTML The visual scene can be decorative. The sentence still has to live in the document. If JavaScript fails, the page should look quieter — not blank.

Load the scene after the page is useful Poster or fallback first. Then the model, the textures, the extra loop. Preload the type that is on screen. Do not preload every project video “just in case”.

Budget the GPU Clamp pixel ratio. Pause the canvas when it is offscreen. Prefer one scene, not four competing ones. Reduced-motion and low-graphics modes are not extras; they are how the same design survives a phone on a train.

Compress what you ship Textures and models are often heavier than the React bundle. If the scene is atmosphere, it does not need cinema-resolution maps.

Measure the thing people feel Largest contentful paint, interaction delay, layout shift. A beautiful frame that shoves the rest of the page around is still a broken first impression.

This is the same discipline I use on this portfolio: the 3D layer is enhancement. The site still has to work as a site. For the broader craft of making a page feel considered, read what makes a website feel professional or start from web design.