This is for you who has been asked by your developers about the performance of the Cevoid implementation (send them this article 😉 ) or simply if you want to learn more about the performance of our galleries and the effect the implementation has on your website.

First off, the Cevoid comes from a background where speed and optimization on the web are extremely important and our holy grail. We always strive for our widgets to have the smallest effect possible on your website so that it does not interrupt, slow down or disturb the user experience in any way.

When implementing Cevoid on your website, there's only one script you need to add. This script powers all Cevoid UGC widgets and makes them render. Uncached and gzipped our script (depending on what type of gallery is loaded) weights ~ 110kb. When cached, only 500 Bytes.

The galleries are also code-splitted to only load the parts of the galleries that are actually needed. You can see this in the image at the bottom of the article by checking the different components being loaded.

All images and videos that are loaded in the UGC widgets are lazy-loaded and done so asynchronously. Therefore we will never affect the initial load of a page by waiting for lots of media to load.

Images in our UGC widgets and popups are scaled to fit the area where they are displayed in. We use eight different sizes ranging from original format and 1080px to thumbnails of 160px size. So if a gallery post is 400px wide, our gallery will fetch the best match in size to use. This saves bandwidth for the user and speeds up a load of images on the website!

All assets from Cevoid are cached. This includes scripts, images, videos, galleries, and cards. This speeds up all the requests a lot. We cache all UGC widgets at 20-minute intervals. However, if you make design changes to a gallery or card, its cache is reset.

In the image below, you can see the network activity for a normal grid gallery with 20 posts and the script being loaded. All of these assets are lazy-loaded and loaded asynchronously so that it does not affect the first load of the page.