# How to improve performance on my site?

**URL:** <https://discourse.threejs.org/t/how-to-improve-performance-on-my-site/52039>\
**Category:** Questions\
**Tags:** performance\
**Created:** [May 25, 2023, 10:15pm UTC](https://discourse.threejs.org/t/how-to-improve-performance-on-my-site/52039 "2023-05-25T22:15:26Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kwiatek\_123](https://avatars.discourse-cdn.com/v4/letter/k/2bfe46/32.png) [@kwiatek\_123](https://discourse.threejs.org/u/kwiatek_123)\
**Post date:** [May 25, 2023, 10:15pm UTC](https://discourse.threejs.org/t/how-to-improve-performance-on-my-site/52039/1 "2023-05-25T22:15:26Z")

</div>

Hello,  
I have created a page using THREE.js available at this [link](https://interactivemaps.xyz). Unfortunately, but it runs horribly without hardware acceleration enabled in the browser on computers. On phones the site is not very smooth, but it is tolerable.

How can I improve the performance of the site?  
What I have done so far:  
-I optimized the .glb model using DRACO  
-Render call is only called when the camera is rotated or the building is highlighted.  
-`this.renderer.info.render.calls` returns 34, so I belive it is a good number.  
-pixel ratio I set to `Math.min(window.devicePixelRatio, 1.5)`  
-I set `object.matrixAutoUpdate` to `false` for all objects.

I am using antialiasing.

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [May 27, 2023, 8:51am UTC](https://discourse.threejs.org/t/how-to-improve-performance-on-my-site/52039/2 "2023-05-27T08:51:21Z")

</div>

Without hardware acceleration it is hard to get a good performance, except for unreasonably simple scenes.

The situation is like someone pushing a car by himself, because the car engine is turned off, and asking is it possible to move the car faster.

Here are some general hints:

- if you have a lot of small objects, convert them to a texture
- turn on all features that will reduce the number of rendered polygons (like frustum culling, back side culling etc)
- use the simplest materials that produce the desired effect
- use LOD
- use less lights, or simpler lights, remove shadows and transparencies

And here is a huge list of other hints: [Discover Three.js: Tips and Tricks](https://discoverthreejs.com/tips-and-tricks/#models-meshes-and-other-visible-thing)

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [May 27, 2023, 9:28am UTC](https://discourse.threejs.org/t/how-to-improve-performance-on-my-site/52039/3 "2023-05-27T09:28:33Z")

</div>

> [@kwiatek\_123](#):
>
> I optimized the .glb model using DRACO

no you did not, lol. you reduced its storage size. it’s the same as saying that I optimized the text file by archiving it into a zip. it is still the same geometry and textures after unpacking.

---

<div class="post-metadata">

**Author:** ![kwiatek\_123](https://avatars.discourse-cdn.com/v4/letter/k/2bfe46/32.png) [@kwiatek\_123](https://discourse.threejs.org/u/kwiatek_123)\
**Post date:** [May 27, 2023, 10:17am UTC](https://discourse.threejs.org/t/how-to-improve-performance-on-my-site/52039/4 "2023-05-27T10:17:11Z")

</div>

Strange, because I lost the details of the truck models.

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [May 27, 2023, 11:10am UTC](https://discourse.threejs.org/t/how-to-improve-performance-on-my-site/52039/5 "2023-05-27T11:10:36Z")

</div>

that’s because the compression is lossy. but 4K jpeg is still 4K at 10% quality,

---

<div class="post-metadata">

**Author:** ![kwiatek\_123](https://avatars.discourse-cdn.com/v4/letter/k/2bfe46/32.png) [@kwiatek\_123](https://discourse.threejs.org/u/kwiatek_123)\
**Post date:** [May 27, 2023, 12:44pm UTC](https://discourse.threejs.org/t/how-to-improve-performance-on-my-site/52039/6 "2023-05-27T12:44:34Z")

</div>

Thanks @PavelBoytchev @makc3d,

- Stripes on the parking lot from now on are a texture, not a separate material = less geometry
- I reduced the number of triangles in the wheels of the trucks
- I used [this](https://discourse.threejs.org/t/the-problem-of-gltfloader-with-instancedmesh/44609/5)
- Shadow casting is now enabled only for buildings