Experience Optimizations

Tips and tricks to improve loading speed and ensure you experience runs smoothly on any device

Optimizations by Asset Type

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.

Scene OptimizationsImage OptimizationsAudio OptimizationsVideo Optimizations3D Model Optimizations

Things to consider while building for the Web​

Network Usage​

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​

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​

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​

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.

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.

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.