When 3D on a website pays off — and when it does not
Three-dimensional elements on websites are no longer rare. The question is not technical — today's browsers handle them easily. The question is whether they help the visitor or simply hold them up. Below is a scene you can rotate, and after it an honest account of what 3D actually costs you.
What you are looking at
This is our logo — four squares and five smaller ones scattering away — placed in space as cubes. Drag with a mouse or finger to turn it. The Show wireframe button reveals what the scene is really made of: nine cubes, each with twelve edges.
The scene is not a video and not an image. The browser calculates it on the fly, frame by frame, using the graphics chip in your device. That is why you can turn it in any direction rather than just play it.
The cost you cannot see
The usual route to 3D on the web is the Three.js library. It can do far more than this scene, but the visitor has to download it first — about 600 kilobytes. On a mobile connection that is a few seconds before anything appears at all.
This scene is written directly in WebGL, which is already built into every browser. Nothing is downloaded from other servers.
- This scene
- 6.7 KB
- Same scene with a library
- ~600 KB
- External files
- 0
- Effect on speed
- 0 points
A whole home page with this technique: the scene above sits inside an article, but it can just as well carry an entire home page. To see how that looks in practice, open the demo template Studio Kubus — 3D home page.
The difference is almost a hundredfold. If you want to know why that matters, we wrote about it in why website speed matters.
When 3D works
- When it carries the brand. One element — a logo, a mark, a symbol — that the visitor remembers because they could turn it.
- When the product needs to be seen from every side. Furniture, equipment, an architectural model. Here 3D answers a question a photograph cannot.
- When it explains. A cutaway, an assembly, how parts fit together — things that are hard to show flat.
When 3D hurts
- As decoration without meaning. A spinning object that says nothing draws attention away from the button the page exists for.
- On a page where people are in a hurry. If the visitor is looking for a phone number or opening hours, 3D stands in the way.
- When it eats speed. A page that loads three seconds slower loses part of its visitors before they see anything at all — including the 3D.
- On older devices. Not every device handles it smoothly, so a simple fallback has to exist for when 3D is unavailable.
How we handle it
We do not promise 3D in our packages until it genuinely makes sense for a particular client. This scene was built as a test on our own website — on ourselves first, only then for a client.
If 3D interests you for your own site, the first question is always the same: what should it tell the visitor? If there is no answer to that, you are better off without it.
Thinking about a website of your own?
Tell us what you would like to show — together we will work out whether 3D is the right route or a good photograph will do more. Get in touch →