# How to improve webapp load performance, and interact with the three.js file in an optimal way

**URL:** <https://discourse.threejs.org/t/how-to-improve-webapp-load-performance-and-interact-with-the-three-js-file-in-an-optimal-way/10912>\
**Category:** Questions\
**Tags:** optimization\
**Created:** [November 19, 2019, 3:51am UTC](https://discourse.threejs.org/t/how-to-improve-webapp-load-performance-and-interact-with-the-three-js-file-in-an-optimal-way/10912 "2019-11-19T03:51:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Avner\_Moshkovitz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/avner_moshkovitz/32/5297_2.png) [@Avner\_Moshkovitz](https://discourse.threejs.org/u/Avner_Moshkovitz)\
**Post date:** [November 19, 2019, 3:51am UTC](https://discourse.threejs.org/t/how-to-improve-webapp-load-performance-and-interact-with-the-three-js-file-in-an-optimal-way/10912/1 "2019-11-19T03:51:56Z")

</div>

I have a webapp that is intended for mobile.  
I ran Chrome devtools Audit on it with settings: _Mobile_ and _Simulated Slow 4G, 4x CPU Slowdown_  
The Performance is poor - specifically the measure _First Contentful Paint_  
The first suggestion in the Opportunities section is to _Eliminate render-blocking resources_

One of the main js files that takes time to load is threejs, which is required for the first page, so it is in the critical path.  
If I add _defer_ to when loading the script, I get errors while loading the first page.

I am already using the minified version three.min.js and also serving it compressed with gzipped (as well as other .js, .html, .css files).  
The coverage section shows that only a small part of three.js is used (as expected).

**Is there a way to break the file three.js into smaller pieces, and load only the code that is in the critical path?**  
**How can I farther optimize the load of the three.js file?**

Thanks,  
Avi

---

<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:** [November 19, 2019, 9:55am UTC](https://discourse.threejs.org/t/how-to-improve-webapp-load-performance-and-interact-with-the-three-js-file-in-an-optimal-way/10912/2 "2019-11-19T09:55:49Z")

</div>

> [@Avner\_Moshkovitz](#):
>
> Is there a way to break the file three.js into smaller pieces, and load only the code that is in the critical path?

Unfortunately, it’s not yet possible to import only the classes from the `three.js` lib which are actually used in a project. This kind of dead-code elimination is called _tree shaking_ and not yet supported by `three.js`. More information about this topic right here:

> [@Three.js file size when importing via NPM and bundling with Webpack](https://discourse.threejs.org/t/three-js-file-size-when-importing-via-npm-and-bundling-with-webpack/8904/2):
>
> The treeshakeability of three.js is not ideal at the moment (more information about this topic right here: [https://github.com/mrdoob/three.js/pull/14654](https://github.com/mrdoob/three.js/pull/14654)) I’m currently working on the first step in order to improve this situation by removing all IIFEs from the codebase and then move towards ES6 classes. When I remember correctly, there is also an open issue in context of three.js's shader library that impedes tree shaking. If those issues are solved, you can expect smaller bundle sizes and a fa…

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [November 19, 2019, 5:08pm UTC](https://discourse.threejs.org/t/how-to-improve-webapp-load-performance-and-interact-with-the-three-js-file-in-an-optimal-way/10912/3 "2019-11-19T17:08:11Z")

</div>

Are you sure that just loading and parsing the `three.js` library is what’s slowing your app down? If “first contentful paint” requires that you actually render something on the page using three.js, you may want to look at what time is being spent loading additional resources (models? textures?) after the three.js library has loaded but before it can render.

If you’re able to (ideally) share a demo, or do some profiling in developer tools like the Chrome _Network_ or _Performance_ tabs, that would help to narrow down exactly why your load time is not as good as you’d like.

> If I add _defer_ to when loading the script, I get errors while loading the first page.

I think you’ll need to share your code to get help with this. The error means your application expects three.js to be available immediately and is trying to use it too early.

---

<div class="post-metadata">

**Author:** ![Avner\_Moshkovitz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/avner_moshkovitz/32/5297_2.png) [@Avner\_Moshkovitz](https://discourse.threejs.org/u/Avner_Moshkovitz)\
**Post date:** [January 9, 2020, 1:51am UTC](https://discourse.threejs.org/t/how-to-improve-webapp-load-performance-and-interact-with-the-three-js-file-in-an-optimal-way/10912/4 "2020-01-09T01:51:50Z")

</div>

Thanks @Mugen87 and @donmccurdy for explaining about “tree shaking” and pointing for ways to check the reason for the slow-down.

I improved the “First Contntful Paint” measure, by importing modules from Javascript modules, instead of loading all the Javascript resources from the main html page.  
It turns out that loading and parsing the three.js library is not the main reason for the slow-down, even  
though the entire three.js module is loaded when importing specific three.js modules.

Is [this](https://github.com/mrdoob/three.js/pull/14654) issue the correct place to track the status of tree shaking capability in tree.js?

Thanks,  
Avi

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [January 9, 2020, 2:15am UTC](https://discourse.threejs.org/t/how-to-improve-webapp-load-performance-and-interact-with-the-three-js-file-in-an-optimal-way/10912/5 "2020-01-09T02:15:01Z")

</div>

My understanding is that tree-shaking three.js can be done now, but is not easy yet. See [Tree Shaking Three.js](https://discourse.threejs.org/t/tree-shaking-three-js/1349/19) for details.

---

<div class="post-metadata">

**Author:** ![danrossi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danrossi/32/1017_2.png) [@danrossi](https://discourse.threejs.org/u/danrossi)\
**Post date:** [June 14, 2023, 11:28am UTC](https://discourse.threejs.org/t/how-to-improve-webapp-load-performance-and-interact-with-the-three-js-file-in-an-optimal-way/10912/6 "2023-06-14T11:28:59Z")

</div>

That was my thread. I forget how to strip out unnecessary shader files again. I think its a hack in the gsl filter. I would like to know how to strip them out.

I have a couple of examples. I found if you import from a module its bloaty, you need to hand pick exports from source to a module. Then import that custom module.

> <https://github.com/danrossi/three-troika/blob/68a0f952482cc0376ca766f0f9da0c93ff1d2c86/threelib.js>

Then export what you need from the custom module

> <https://github.com/danrossi/three-troika/blob/68a0f952482cc0376ca766f0f9da0c93ff1d2c86/troika-lib.js>

This imports and exports everything and bundles it with other stuff.

> <https://github.com/danrossi/three-webgpu-renderer/blob/749ab02b298d29a698219214de9dc0a6684c1861/three-webgpu-renderer.js>

Include paths plugin enables resolving custom paths and modules. I use it to override and resolve local path before three for my webgpu renderer fixes. [three-troika/three.rollup.config.js at 68a0f952482cc0376ca766f0f9da0c93ff1d2c86 · danrossi/three-troika · GitHub](https://github.com/danrossi/three-troika/blob/68a0f952482cc0376ca766f0f9da0c93ff1d2c86/three.rollup.config.js)