How to build a 3D product scroll site (and keep it fast on phones)

We tested all 125 of our templates on 25 October 2026 with Lighthouse (simulated mid-range phone, slow 4G) and with a real-Chrome scroll test (390×844 touch scroll, CPU slowed 4×, 4G, three runs). 45 of the 125 use Three.js. The full method and results are in How fast are animated websites really?. Here is the part that matters for 3D.

The pattern is clear. Once a 3D scene is running, scrolling is not the problem: none of the 45 stuttered. The cost comes before that, in downloading the 3D library and models, compiling shaders and building the scene, which shows up as long blocking time and a late largest paint.

The difference is how much the page asks the phone to do before it shows anything. A single product on a quiet background is a different job from a night garden with six modelled flowers. Noctiflore is a deliberate showpiece; the viewer shows its real numbers before you choose it.

1. Use 3D once. Put it in the hero or in one pinned product section, and make the rest of the page plain HTML, CSS and light GSAP.
2. Show something real immediately. Render the headline, text and a poster image in HTML first, so the page is readable while the scene loads. This is also what helps search engines and AI assistants.
3. Load the 3D late. Start the scene after the first paint, or when it nears the screen, instead of blocking the page on it.
4. Keep models and textures small. Compress textures, keep polygon counts low, and test the download on a slow connection. Big downloads are a common reason a 3D page loads late.
5. Limit the pixel ratio. Rendering at the full ratio of a very sharp phone screen multiplies the work; capping it is the simplest way to save frames.
6. Pause when you cannot be seen. Stop the render loop when the scene is off screen or the tab is hidden. 185 of our 316 demos react to the page's pause or visibility signals.
7. Provide a fallback. If WebGL is unavailable or the visitor prefers reduced motion, show a static image or a drawn version with the same content.
8. Measure on a real phone. Use Lighthouse, then scroll the page on an actual mid-range device.

In a typical scroll scene, the page scroll position drives a number between 0 and 1. That number moves a camera, turns a model, or changes a material. ScrollTrigger gives you the number and the pinned section; Three.js draws the result. Our camera fly-through effect and pinned product rotate with labels show the two most common versions.

The second effect is marked degraded on mobile in our library, which is honest: a full-quality version may be too much for some phones, and a simplified one is better than a stuttering one. Our library labels each effect as full, degraded or desktop-only so you know before you build.

• Your visitors mostly come from search or paid ads, where a slow first load costs you visitors.
• You sell a service, not a physical product people want to rotate.
• Your audience uses older phones or slow connections.

In our measurements, templates drawn with SVG, CSS and GSAP only have a median mobile score of 88 and a median blocking time of 9 ms. If you want the 3D look anyway, choose a light 3D template, and look at the real numbers first. The Three.js 3D scroll examples and the perfume and skincare templates are good places to compare.