A heavy 3D model slows every product page it appears on. I fix this by removing waste from the file, shrinking its textures and compressing its geometry, then checking the result before it goes live.

Discuss your product rangeSee selected work

Why 3D files get heavy

A glTF file holds a 3D model, including its shapes, materials and textures. A GLB file packs that same model into one binary file, which is easier to upload and host. For the GLB format itself, read what a GLB file is. If glTF is new to you, start with what glTF is, then come back here.

Both formats can carry high resolution images, dense meshes and duplicate data that a viewer never uses. The shopper’s browser must download all of that data before the model appears on the page. Every extra megabyte delays the first view, and that delay is most visible on mobile connections.

Textures are often the largest part of the file. A single image at 4096 by 4096 pixels can weigh more than the whole mesh. Oversized images also take up graphics memory on the shopper’s device, which matters on older phones and tablets. Reducing them is usually the quickest win. Keep the source files from your 3D software as the master, and export optimised copies for the web.

  1. Install the CLI
  2. Inspect the original
  3. Remove waste
  4. Resize and compress
  5. Check and repeat
Remove waste first, then compress what remains, and check each output.

Decide what to change first

Set your targets before you run any commands. Three decisions shape the whole pipeline, and each one affects what the viewer must support.

  • Size budget. Choose a limit for each model before you start. For example, you might allow 3 MB for one product on a configurator page.
  • Geometry compression. Draco and Meshopt shrink mesh data a great deal, but the viewer must be able to decode them before it can show the model.
  • Texture format. WebP suits most product photos because it has wide support. KTX2 keeps textures compressed on the graphics card, which saves memory but needs more setup.

Run the whole pipeline on a copy of the file, in a build folder rather than your live store. That keeps the original safe and lets you rerun the steps when a model changes. It also means every output can be traced back to one source file.

If you plan to use Draco, read the Draco compression guide first. It explains the decoder, the file trade-offs and the settings that matter most.

Step by step

  1. Install the glTF Transform CLI

    glTF Transform is an open source command-line toolkit for glTF and GLB files. It runs on Node.js, so install Node first. Then install the CLI with npm. The official command list shows every command and its options.

    npm install --global @gltf-transform/cli
gltf-transform --version

  2. Inspect the original model

    Run inspect before you change anything. It reports the meshes, materials and textures in the file, and it flags performance problems such as oversized images. The output lists what the file contains, so you can spot extra cameras, animations or materials you do not need. Keep a copy of the output so you can compare it with later results.

    gltf-transform inspect product-original.glb

  3. Remove duplicate and unused data

    The dedup command merges identical accessors and textures, so the same data is stored once. The prune command then removes anything the file no longer uses, such as unused materials. Run them in turn, with each output as the next input.

    gltf-transform dedup product-original.glb step1.glb
gltf-transform prune step1.glb step2.glb

  4. Resize oversized textures

    The resize command shrinks PNG and JPEG textures to a size you choose. It never enlarges them. Match each texture to the size the model shows on screen, because a texture shown at 600 pixels rarely needs 4096 pixels of detail. Textures that are already small, such as labels, may not need resizing at all.

    gltf-transform resize step2.glb step3.glb --width 1024 --height 1024

    This caps both dimensions at 1024 pixels. Run gltf-transform help resize to confirm the options in your version.

  5. Compress geometry and textures

    The optimize command bundles many steps, and it can apply Draco to the mesh and WebP to the textures in one run. Write to a new file name, so the earlier steps stay intact and you can roll back if a result looks wrong.

    gltf-transform optimize step3.glb product-optimised.glb --compress draco --texture-compress webp

    By default, optimize also simplifies and merges meshes. If you need the shape left untouched, run gltf-transform optimize -h and check the options before you start. Meshopt is the other geometry choice, set with --compress meshopt.

    Draco needs a decoder in the viewer. Without one, the model will not appear, so test before you publish. If the output looks wrong, adjust one flag at a time.

  6. Check the result against your budget

    Run inspect on the new file and compare its size with the original. For example, if the original is 24 MB and your budget is 3 MB, the model needs more work. Then open it in the free GLB viewer, rotate it and zoom in. Look for blurred labels, banding or missing colour, because these show that compression went too far. Write down the final size, so you can compare it with the next version.

    gltf-transform inspect product-optimised.glb

  7. Repeat with stronger settings if needed

    If the file is still too large, reduce texture sizes first, because that changes the look least. The simplify command reduces the vertex count, but it changes the shape of the model. Test it carefully against the original, and keep the original as your reference for every comparison. Each extra pass adds a small loss of detail, so run the fewest passes that meet the budget.

  8. Test the model on the live page

    Upload the optimised file and load the product page on a phone. Check that the model appears and that the browser console shows no errors. Confirm that the viewer can decode every compression method you chose, because a missing decoder is the most common failure. Note the load time, then repeat the test on a slower connection.

Desk lamp with a linen shade and dark base, rendered in the Three.js configuratorCheck your file in the free GLB viewerOpen a .glb or self-contained glTF file in your browser and inspect it. The file stays on your device.

How to check it worked

A good result shows three signs. The file meets your size budget. The model looks right in the viewer, with no visible blur or colour shift. The product page loads the model without errors in the browser console. Keep the original file so you can compare the two at any time.

Common mistakes

  • Overwriting the original file during a test run, which leaves you with no clean source to repeat from.
  • Shrinking textures below the size the shopper sees on screen, which blurs the details that matter.
  • Enabling Draco without checking that the viewer decodes it, so the model fails to appear.
  • Skipping inspect, so you cannot see which step made the biggest difference.
  • Compressing a model that is already optimised, which can add loss without any gain.

If a model stays heavy after these steps, the source file may be the real problem. CAD exports and 3D scans often hold far more detail than a product page needs. I handle this kind of clean-up as part of my product configurator work, and it is usually faster than tuning the pipeline.

See all the Shopify, WooCommerce and 3D how-to guides.

Related reading: Three.js ecommerce examples and 3D product visualisation.

Common questions

What is the difference between glTF and GLB?

A .gltf file is JSON that can link to separate texture and data files. A .glb file packs everything into one binary file. Both carry the same model, and these steps work on either format. Choose the one your platform supports and that your team can host easily.

Will Draco make my model look worse?

Draco can reduce mesh precision, so very fine detail may shift slightly. Texture compression is more likely to show visible artefacts than geometry compression. Compare the original and optimised model side by side in the viewer before you publish anything.

What file size should I aim for?

There is no universal target. For example, I might set 3 MB for a single product on a configurator page. Set your budget from your page speed results, then test on a real phone over a slow connection to see how it feels.

Discuss your product rangeSee selected work

A practical guide by Niall Arnfield. Published 16 October 2026.