E-Commerce & WebAR

How to improve website load speed when using VR web applications

May 14, 2022

Embedding Virtual Reality (VR) into websites enables users to virtually experience products. User Experience (UX) research and eye tracking studies show that website visitors are drawn to visual elements. Giving users the ability to not just look at a product, but to actively engage with it, to inspect specific features, and to experience handling it in a more realistic way, will increase the likelihood that they make a purchase. With offline retail still being impacted by COVID-19 restrictions, many customers have put off purchases that require a more close-up assessment.

The impact of slow page load speed

One of the issues with embedding VR into a website is that it reduces the page load speed. This can be a serious issue. The IEEE notes that “On average, if your website takes longer than 3 seconds to load, approximately 40% of your visits will abandon your site.” This is a particularly important factor for e-commerce stores to consider: While on the one hand, harnessing VR may enhance user experience and boost conversion rates, it may also slow a website down and thereby cause the opposite effect. These are factors you need to weigh up when deciding what is best for your website.

You should also consider whether VR is the best way to go for your type of product. In general, the higher priced an item, or the more decision-making is impacted by specific product features (such as size, look and feel), the more you will benefit from using VR on your website. If, however, you sell products that are to be applied (such as skincare), or standardized items (such as power banks), then VR may not be your best option. In this case, you could consider CGI Photography instead.

Maximising VR Load Speed

The load speed of VR assets embedded in your website depends on a number of factors. Most importantly it depends on:

The size of the VR file: naturally, larger files take longer to load. So, to ensure that files load fast, try to reduce the polygon count of your models, and strike a balance between the level of detail users can experience versus the detrimental impact on load speed.

The quality of your hosting: VR models are commonly embedded into websites via iFrames. An iFrame is a HTML document that is embedded in the website code and loads content, such as a VR file, that is hosted elsewhere.

We have carried out a study comparing multiple hosting solutions.

Large model – default hosting

For this test we are using a 10MB size model with standard hosting. The model shows a complex product (chainsaw) with a high polygon count.

As can be observed in the page speed analysis below, it takes a full 3.2 seconds before the model starts loading and 5.5 second for it to fully load.

Source: Impala-3d.com via gtmetrix.com

For many visitors, this will be too slow. They may either give up and leave the site, or not even stay long enough to notice the embedded 3D model. We would not recommend deploying a model that takes this long to load on an e-commerce enabled website. If your website is specifically designed for B2B purposes and you target a very specific audience that is visiting your website with the intention of viewing your VR models, then this may still be acceptable.

Web optimised model – fast hosting

To improve the load speed, we have selected a different model with a lower polygon count. The model below shows a bull, and it is smaller than 2MB. In addition, we are using a faster hoisting solution via our 3D partner Vectary’s content delivery network (CDN). Through our partnership with Vectary we are able to offer top-class hosting solutions to all our clients, ensuring embedded 3D models are delivered in the fastest possible time.

As can be observed, the combined impact of using a smaller model with faster hosting is quite remarkable. The model starts loading after only 2.2 seconds (30% faster than the comparison model), and it is fully loaded in 5 seconds. The faster onload time is particularly important: website visitors who notice that a 3D element is being loaded are more likely to stick around to see what the final model looks like. Therefore, a faster onload time is absolutely critical when it comes to retaining traffic and preventing bounces.

Source: Impala-3d.com via gtmetrix.com

Conclusion: Turn your 3D transformation into a success story

As with everything digital, the best approach to leverage advanced technologies such as VR for your website depends on a number of factors. This article has outlined some important variables you need to consider when planning your digital transformation roadmap. Even with the emergence of faster cellphone networks powered by 5G, striking a balance between model complexity and page load speed will remain a critical factor. Leveraging a powerful CDN, such as the one Impala Services provides, is a further building block that shapes your website user experience. Reach out to our team to discuss which approach works best for you, we would love to show you how to optimise the size of your 3D models and discuss how you could benefit from our advanced hosting solutions.