I am developing a product configurator, 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 ?
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 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.jpgis 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
glTFand 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, usingglTFcould 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.
1 Like
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 ?
I suggest you read the following guide for more information (BTW: just google the topic, there are a lot of other resources):
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.
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.
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 ?
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.
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
You should put a little bit more effort in research. It’s not hard to find this tool via google:
All information about glTF:
1 Like
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
1 Like
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 employs that method: the geometry is simple, and the bump-map adds a lot of detail to keep the filesize and polycount small.
If you decide to go this way and spend some time simplifying your geometry, I recommend RetopoFlow for Blender: https://blendermarket.com/products/retopoflow it’s super intuitive and easy to use.
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