# Experience Optimizations

## Optimizations by Asset Type

{% hint style="info" %}
Compressed assets help your experiences load smoother and faster. It is good hygiene to compress your assets before uploading them.

Lower the asset size, faster the load speed.
{% endhint %}

{% content-ref url="experience-optimizations/scene-optimizations" %}
[scene-optimizations](https://docs.gmetri.com/guidelines-compatibility/guidelines/experience-optimizations/scene-optimizations)
{% endcontent-ref %}

{% content-ref url="experience-optimizations/image-optimizations" %}
[image-optimizations](https://docs.gmetri.com/guidelines-compatibility/guidelines/experience-optimizations/image-optimizations)
{% endcontent-ref %}

{% content-ref url="experience-optimizations/audio-optimizations" %}
[audio-optimizations](https://docs.gmetri.com/guidelines-compatibility/guidelines/experience-optimizations/audio-optimizations)
{% endcontent-ref %}

{% content-ref url="experience-optimizations/video-optimizations" %}
[video-optimizations](https://docs.gmetri.com/guidelines-compatibility/guidelines/experience-optimizations/video-optimizations)
{% endcontent-ref %}

{% content-ref url="experience-optimizations/3d-model-optimizations" %}
[3d-model-optimizations](https://docs.gmetri.com/guidelines-compatibility/guidelines/experience-optimizations/3d-model-optimizations)
{% endcontent-ref %}

## Things to consider while building for the Web​ <a href="#things-to-think-about-when-building-for-the-web" id="things-to-think-about-when-building-for-the-web"></a>

### Network Usage​ <a href="#network-usage" id="network-usage"></a>

Dependent on asset size. A 30Kb asset loads around 3 times faster than a 100Kb asset.

* Try keeping asset file size small. Use as much compression as possible to reduce the image size, as long as the quality doesn’t get affected.

### Memory Usage​ <a href="#memory-usage" id="memory-usage"></a>

Affected by image resolution: pixels used by an image, calculated by (x\*y)

* Don't use image/videos of a resolution higher than needed. A `50px * 50px` image is better than a `100px * 100px` image
* What this means is that even a 10Kb image of resolution `100,000px * 100,000px` can crash your device, as it would take roughly 10GB of graphic memory.
* **File size affects loading speed (more network usage for larger files). File resolution affects graphic memory (more memory for more pixels).**

### CPU/GPU Usage​ <a href="#cpugpu-usage" id="cpugpu-usage"></a>

Devices have a limited amount of processing capability. Videos consume a lot more CPU/GPU than images, 3D models.

* Bigger the video/3D model, more is the CPU and Memory consumption.
* Prefer images to videos: Try offloading as many effects as possible to images, instead of videos. Running too many (> 3) parallel videos in the same scene may not be supported by a lot of devices. You can use animations provided with images/360 images to try to produce a similar effect

### Graphic memory is limited on any device​ <a href="#graphic-memory-is-limited-on-any-device" id="graphic-memory-is-limited-on-any-device"></a>

Graphic memory gets used by Videos and Images. Anything you see on the screen is first expanded a bitmap image (a simple pixel by pixel representation of an image using 0's and 1's) onto the system's graphic memory - be it your laptop, phone, headset or any other device.

Lets say you have a video of resolution `1000px x 1000px` running in parallel, for every single frame you end up using `1000x1000x(4 bytes per pixel)` = 4MB of video memory.

{% hint style="info" %}
On most modern phones and laptops, the available graphic memory varies from 256 MB to 4 GB. However, Chrome limits the amount of graphic memory available to a single tab to a small fraction of this - between 128 MB and 256 MB.
{% endhint %}

This is important, as its very easy to balloon up your graphic memory usage, and end up in a hung state. For example, if you run 3 \~4K (4096x2048) videos, you are effectively using `3x4096x2048x(4 bytes per pixel)` = 48MB of memory for *every single frame*!

So, try to limit the number of high resolution images and videos you add to a scene.

When you run out of graphic memory, you may also see things like green screen not work properly.