Skip to content
3D.MBA
All insights
·6 min read·Engineering

How to add 3D to a product page without touching LCP

The most common reason 3D gets pulled from a storefront is Core Web Vitals. The fix is architectural and boring: the canvas does not exist until someone asks for it.

performancecommercecore-web-vitals

Retail teams are right to be defensive about this. A WebGL canvas that boots on page load will cost you LCP, will cost you INP, and will be the first thing blamed in the next performance review.

The pattern that works: render a static hero image at the exact framing of the default configuration. It is a normal image, it is what LCP measures, and it is fast. The 3D runtime, the model and the textures load only after a deliberate interaction — a click on the image, or a hover with intent.

The transition needs care. Boot the canvas behind the static image, wait for the first rendered frame, then cross-fade. Done properly nobody notices the swap; done carelessly there is a flash of empty canvas that reads as broken.

The static hero comes out of the same pipeline as the interactive scene, at the same camera, so it never drifts. That is the part teams get wrong when they assemble this by hand.

Measured on a 400-SKU homeware rollout: zero millisecond change in LCP, and 2.4× time on page for sessions that opened the viewer.

Written by the engineering team at 3D.MBA, Ahmedabad.

Disagree? Tell us

Related

More on this

·9 min read

Publish the frame budget or don't ship the scene

Every scene we deliver carries a triangle count, a draw-call count, a texture-memory figure and a p75 frame rate measured on a four-year-old Android. Here is why that list is the contract, and what happens on the projects that refuse one.

·7 min read

What WebGPU changed, and what it didn't

Compute shaders and lower draw-call overhead are real wins. Universal availability is not here yet, so every scene we ship still has a WebGL2 path — and will for a while.

·5 min read

Most AR failures are a units bug

The single most common AR defect we are called in to fix is a model authored in centimetres and presented as metres. It is a one-line fix and it destroys the entire value proposition until someone finds it.

Bring us the product you were told could not be configured.

Tell us the option count, the CAD you already have and the frame budget you need to hit. An engineer reads it and replies with a straight answer — including when the answer is that good photography would serve you better.

Book a demoTry the configurator

We reply to every enquiry within one business day, in your timezone — with a frame budget, not a brochure.