The poster is a real render of the product’s default state, so nothing shifts when the 3D takes over. Finishes can apply at low resolution first and sharpen in place.
This is how a 3D product page stays Core Web Vitals-friendly: no layout shift, no blocking download, and the heavy work only starts when the shopper is there to see it.
How poster-first loading protects Core Web Vitals
Google’s Core Web Vitals reward a page whose largest element paints within 2.5 seconds (LCP), whose layout does not jump (CLS at or under 0.1) and which reacts quickly to taps (INP at or under 200 ms). A 3D model fails all three if it blocks the page: the download is large, the canvas pops in late, and parsing it ties up the main thread.
A poster fixes this. The poster is an ordinary image, so it can be the LCP element and load as fast as any product photo. The space for the viewer is reserved at its final size, so nothing shifts. The model downloads afterwards and replaces the poster in place.
When the 3D should start loading
There are three common triggers. On a product page where 3D is the main media, start when the page is idle. Where it sits further down, start when it scrolls into view. On listing pages, start on intent: a hover, a tap or a focus on that card. Loading a model nobody looks at only costs the shopper data.
Getting the poster right
The poster should be a render of the exact default configuration, from the same camera angle the viewer opens with. If it shows a different colour or a different angle, the handover reads as a glitch. Give it fixed width and height, and preload it on the product page so the browser fetches it early.
Why it matters
Search ranking and conversion both punish slow pages; poster-first loading is what keeps 3D from costing either.
Questions about Progressive loading (poster-first)
- Does adding a 3D viewer hurt my page speed score?
- It does if the model loads before the page paints. With a poster-first viewer the scored metrics are driven by the poster image, and the model loads afterwards.
- Should the poster be a photo or a render?
- A render of the 3D model in its default state. A photo will never match the model exactly, so the switch from poster to 3D becomes visible.
- Can a search engine see the 3D model?
- Search engines index the poster image, the alt text and the surrounding product content. Treat the poster as the product’s main image for SEO.