Visual UGC out of the box widgets have been optimized for the shortest possible load times. The manner in which Visual UGC is designed is that it will load in isolation to the rest of the site, meaning that elements on the parent page will not be held up by the Visual UGC Widget rendering (and in some cases, Visual UGC will wait until these elements load before loading itself). This design also means that Visual UGC won't cause any conflicts with any Javascript, CSS or other elements that exist on the parent page, nor will it prevent more important elements on the page from loading.

Widgets generally bootstrap within 100ms globally, and load all images completely within 4 seconds. Note that there can be a large variance in load times, depending on the content itself.

Additionally, Widgets have been designed with a mobile-first approach in order to minimise load times and content bandwidth requirements. When serving social media content, Visual UGC will utilise similar technologies as the social networks themselves to optimise delivery to mobile devices.

To ensure we can optimize onsite widgets for loading but still be able to provide our customer with the original assets, we compress videos and images for onsite widgets but also keep a copy of the original asset in the Asset Manager.

On initial loads, a smaller webp version of tiles' images at 400px will be displayed in the widgets. When a tile is expanded, the full webp version of the image will be shown instead of the original one.

Here in more detail the types of compressions we do:

Widgets are built using the same technologies as web pages and as such face the same challenges as the page they are embedded on itself (i.e. "parent page"). Loading too many assets on the parent page (e.g. images, JavaScript and CSS files), slow client connectivity, using assets from many domains, unoptimized image or video content delivery and slow parent page scripts are some of the common reasons why a widget may load less than optimally.

If you plan to use two or more widgets on a single page, then we recommend only using one JavaScript script vs. two full embed codes.

When it comes to building any page, less is more, and the same applies to Widgets.

Naturally there are options which can be taken to further optimize the load of UGC on your website. These include:

The latter two options provide much more control over the exact loading experience, allowing you to implement any content handling requirements you may have.

For any further questions or queries, please send an email to support@nosto.com or submit a request and our support team will get back to you.