Optimization tips for 3d models

How To
1

Hi all,

Has anyone got any tips for optimizing pages containing 3d models. My pagespeed scores are getting crushed.

Thanks for any help/insights.

2

deliver the 3d model on ajax? :sweat_smile:

3

Hi,

Thanks for posting! Here are the things that move the needle most on PageSpeed when you have a 3D model on the page:

  1. Optimize the model file itself — usually the biggest win. Use glTF (the element’s preferred format) and compress it: Draco/meshopt compression, fewer polygons, smaller textures. A lighter model loads and renders much faster.

  2. Turn off GPU-heavy options you don’t need in the element settings: Anti Aliasing and Cast Shadow both add rendering cost. If the model still looks good without them, disabling them helps a lot on weaker devices.

  3. Keep the canvas dimensions reasonable — a smaller render area is cheaper to draw.

One honest point: the 3D Model element loads three.js and your model on page load, so with a heavy model the initial PageSpeed score will take a hit regardless of the tweaks above. That’s why getting the model file itself as light as possible is where most of the gain comes from.

Best,
Daniele

4

Thanks for the reply. I have got the model down from 20mb to 1mb, and I don’t have anti-aliasing enabled or shadows, it’s not that the model doesn’t render fast enough, to me it seems really fast, but the Pagespeed Score is impacted by the total blocking time - somewhere around 27,790 ms and more often than not Pagespeed Insights just gives up and returns with an error. Since my model is below the fold, I wonder if there is a way to save the section as template and have it load after the page loads. Does the three.js need to load on page load? Thanks for your help.

5

Hi,

Great work getting the model from 20 MB down to 1 MB — that’s a big improvement.

To answer your two questions directly:

Does three.js need to load on page load?
Yes, at the moment it does. When the 3D Model element is on a page, the element enqueues three.js (plus the GLTF loader and orbit controls) for that page. These scripts are loaded in the footer, so they’re not render-blocking — but they are still downloaded, parsed and executed as part of the page load. There is currently no built-in setting on the element to lazy-load or defer them, and no “load when in viewport” option.

Why your Total Blocking Time is so high (even with a light model, below the fold):
The element initializes the scene as soon as the page’s load event fires, and it then keeps a continuous render loop running (via requestAnimationFrame) regardless of whether the model is in the viewport. So even though your model is below the fold and renders fast, the setup work plus the ongoing render loop run on the main thread from the moment the page loads — and that’s what PageSpeed measures as blocking time. There is no viewport/visibility check built in that would pause that work until the user scrolls to it.

On the “save as template and load after the page” idea:
Unfortunately loading the section through Bricks’ AJAX mechanisms (e.g. an AJAX popup or an AJAX query/filter result) won’t work out of the box for the 3D element: the initializer isn’t re-run on those AJAX events, so the model wouldn’t render. So that specific workaround won’t reliably display the model.

What you can try today:
The most practical option is to use the “delay JavaScript until user interaction” feature that optimization plugins offer (WP Rocket, Perfmatters, FlyingScripts, etc.). Because the 3D element only initializes on the page load event, delaying those scripts moves both the download and the initialization off the initial load, which typically clears up the Total Blocking Time for below-the-fold widgets like this. You’d target the three.js / Bricksforge element scripts in the delay list. It’s worth testing on a staging copy first to confirm the model still initializes correctly after interaction on your setup.

Best,
Daniele

6

Many thanks for your detailed response. I am going to look into your suggestion which seems to be the best option for now. Hopefully :crossed_fingers: I can improve my site’s score with this approach especially since it is on my home page. It’s certainly a lot easier than loading templates which also does not solve the issue of models loaded above the fold.

1 Like
7

That sounds like a solid plan :ok_hand: