# How to improve the load time of my app?

**URL:** <https://discourse.threejs.org/t/how-to-improve-the-load-time-of-my-app/4396>\
**Category:** Questions\
**Tags:** asset-delivery\
**Created:** [October 6, 2018, 11:24am UTC](https://discourse.threejs.org/t/how-to-improve-the-load-time-of-my-app/4396 "2018-10-06T11:24:17Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [October 6, 2018, 11:24am UTC](https://discourse.threejs.org/t/how-to-improve-the-load-time-of-my-app/4396/1 "2018-10-06T11:24:17Z")

</div>

I am developing a [product configurator](http://51.144.120.86:8080/design/male/cooperate-shirt), but i noticed it is super slow when i put it on the live server as compared to my local box , especially when i want to change mesh parts, i wanted to know if there are ways or techniques i could use to make it load faster. and opt my customers user experience ?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 6, 2018, 3:45pm UTC](https://discourse.threejs.org/t/how-to-improve-the-load-time-of-my-app/4396/2 "2018-10-06T15:45:57Z")

</div>

I’ve analyzed your app with Chrome dev tools. For new visitors, the website performs 160 requests and loads approximately 44 MB from the backend. There are different strategies to improve these stats and thus speed up the start time of your app:

- Minimize the resolution of your textures as much as possible. You load images like this [one](http://51.144.120.86:8080/models/Material/shirt/DiffuseMap/blue.jpg) which has a resolution of 2563x4000. Looking at this particular texture, I don’t think you need that much detail.
- It seems you perform multiple request for the same asset. `blue.jpg` is loaded five times. You definitely have to ensure it is just loaded once. This will greatly reduce the amount of requests.
- Merge your JavaScript source files into a single, minimized bundle file. Same for all CSS and SVG files.
- You can try to reduce the size of your models by using `glTF` and Draco mesh compression. If you don’t want to switch to a different 3D format, ensure that gzip compression is activated on your web server. This will compress all JSON, CSS and other ASCII files you are using right now. Nevertheless, using `glTF` could be interesting since it’s way faster to parse than other 3D formats. The parsing time is something that should be considered when you try to improve the latency in context of asset delivery.

---

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [October 6, 2018, 4:31pm UTC](https://discourse.threejs.org/t/how-to-improve-the-load-time-of-my-app/4396/3 "2018-10-06T16:31:05Z")

</div>

Thank you Mugen i really appreciate, i really dont understand what you mean by merging my Javascript source file into a single minimized bundle file and finally can you expatiate on the last point because all the mesh that make up the shirt model have been pre-created as fbx and what i did was to turn them into json. Do i need to redo the meshes or or just reduce the file size by data compression and when trying to load my app on a mobile device it crashes the browser, is this due to all the afore mention reasons you stated above ?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 6, 2018, 5:23pm UTC](https://discourse.threejs.org/t/how-to-improve-the-load-time-of-my-app/4396/4 "2018-10-06T17:23:32Z")

</div>

> [@eshiett1995](#):
>
> i really dont understand what you mean by merging my Javascript source file into a single minimized bundle file

I suggest you read the following guide for more information (BTW: just google the topic, there are a lot of other resources):

> **[Optimizing Encoding and Transfer Size of Text-Based Assets  | ...](https://web.dev/articles/optimizing-content-efficiency-optimize-encoding-and-transfer)**
>
> Next to eliminating unnecessary resource downloads, the best thing we can do to improve page-load speed is to minimize the overall download size by optimizing and compressing the remaining resources.

> [@eshiett1995](#):
>
> Do i need to redo the meshes or or just reduce the file size by data compression

I suggest you start with gzip compression first and see how good it works. Otherwise you have to convert your FBX files to `glTF` which is more effort.

> [@eshiett1995](#):
>
> when trying to load my app on a mobile device it crashes the browser, is this due to all the afore mention reasons you stated above ?

Probably. I suggest you optimize your content and then try it again. Also have a look at the browser console. There are some errors and warnings you should resolve.

---

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [October 6, 2018, 5:27pm UTC](https://discourse.threejs.org/t/how-to-improve-the-load-time-of-my-app/4396/5 "2018-10-06T17:27:41Z")

</div>

okay, noted. I tried the gZip and it only got reduced to 35MB. This is a really stupip question, but can i use a gzip to further compress a glTF ?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 6, 2018, 5:29pm UTC](https://discourse.threejs.org/t/how-to-improve-the-load-time-of-my-app/4396/6 "2018-10-06T17:29:49Z")

</div>

Not a `glb` file but the JSON manifest of a `gltf` file. In general, I think it’s better to just use a `glb` that contains all data of a single asset.

---

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [October 6, 2018, 5:31pm UTC](https://discourse.threejs.org/t/how-to-improve-the-load-time-of-my-app/4396/7 "2018-10-06T17:31:30Z")

</div>

Do you have any article that i can study on gtlf and glb and how to convert from fbx to gltf, the internet resources are low

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 6, 2018, 5:56pm UTC](https://discourse.threejs.org/t/how-to-improve-the-load-time-of-my-app/4396/8 "2018-10-06T17:56:51Z")

</div>

You should put a little bit more effort in research. It’s not hard to find this tool via google:

> **[facebookincubator/FBX2glTF](https://github.com/facebookincubator/FBX2glTF)**
>
> A command-line tool for the conversion of 3D model assets on the FBX file format to the glTF file format. - facebookincubator/FBX2glTF

All information about `glTF`:

> **[glTF - Runtime 3D Asset Delivery](https://www.khronos.org/gltf/)**
>
> glTF™ (GL Transmission Format) is a royalty-free specification for the efficient transmission and loading of 3D scenes and models by applications. glTF minimizes both the size of 3D assets, and the runtime processing needed to unpack and…

---

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [October 6, 2018, 6:08pm UTC](https://discourse.threejs.org/t/how-to-improve-the-load-time-of-my-app/4396/9 "2018-10-06T18:08:25Z")

</div>

thanks alot i appreciate, i reduced the app loading init loading to 6mb just by gzip and reducing the color map to 332kb. still tryna figure out why it the texture is loading more than once

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [October 8, 2018, 8:00pm UTC](https://discourse.threejs.org/t/how-to-improve-the-load-time-of-my-app/4396/10 "2018-10-08T20:00:53Z")

</div>

Your geometry could afford to have a much lower poly-count. For instance, the file `uniform-epaulettes-9.5cm-button-thread-right.json` is half a megabyte, and has 6,190 vertices, but it could be significantly smaller if you rendered the stitching with bumpMaps or normalMaps instead of actual geometry.

See [this example](https://threejs.org/examples/?q=materi#webgl_materials_bumpmap) employs that method: the geometry is simple, and the bump-map adds a lot of detail to keep the filesize and polycount small.

![](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/d/d39ae87c7081d74942f7332771595247e7572e83.jpeg)

If you decide to go this way and spend some time simplifying your geometry, I recommend RetopoFlow for Blender: [https://blendermarket.com/products/retopoflow](https://blendermarket.com/products/retopoflow) it’s super intuitive and easy to use.

---

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [October 8, 2018, 8:13pm UTC](https://discourse.threejs.org/t/how-to-improve-the-load-time-of-my-app/4396/11 "2018-10-08T20:13:52Z")

</div>

if i did render the stitches with bump map, i am not sure i would be able to configure the color of the cloth stitches tho