How can I optimize the load time of my project?

When browsing the Internet you are constantly downloading resources from the Internet to your computer – such as web pages, images, sound, video, etc. This along with browser preferences and the behavior of the website, influence the load time of the web pages you are visiting.

For Barisco experiences the same rules apply. This means that the file size of the resources that you are downloading should be as small as possible to ensure that your visitors are getting the content they are looking for as fast as possible. This article will describe some of the most common and quite easily executable practices for optimizing the load time.

This article consists of several sub-sections which each describe a different type of optimization:

1. Use the best file format for your image

2. Keep images under 500KB

3. Remove layers that are not used

4. Use shapes instead of images where possible

5. Use animations instead of animated GIF’s

6. Avoid using duplicate layers for similar purposes

7. Use smaller images, instead of downscaling images

8. Use the text tool instead of images where possible

1. Use the best image format for your image

Each file format has different properties and purposes. For example a GIF can be often lighter than JPEG image, because it has been designed for the web and only supports 256 colors at a time. But at other times JPEG’s can appear to be in much better quality than GIF’s, while also having a much smaller file size.

Deciding what image format is most suitable can be a hassle, this is why we have composed this list to serve as a rule of thumb:

More than 256 colors

JPEG

More than 256 colors & transparency

PNG-24

Less than 256 colors

PNG-8

Less than 256 colors & transparency

PNG-24

Semi-transparent pixels

PNG-24

2. Keep images under 500KB

Most of the time it is not necessary to use an image file size larger than 500KB. When exporting an image from your favorite image editing tool, try to optimize the balance between quality and file size. Always try to reduce the quality just until the difference between the original and lower quality because apparent.

With JPEG images it’s usually possible to reduce the size with about 60% before real differences in quality become apparent. Also try to avoid making background slide shows. and if you really need to create a background slide show, please try to limit the number of slides to 3 or 4.

3. Remove layers that are not used

When working on a project, it is pretty common that you either create something that you decide to remove later or create several versions of an object to see what version is most suitable. It is important to keep in mind that all layers that are not removed or marked to be excluded from rendering, will still be loaded when viewing your project. This means that you should always check your layers panel and make sure that there are no unused layers that will end up being loaded when viewing your project.

4. Use shapes instead of images where possible

If you use an image editing tool for designing your project, you might end up exporting a few layers that could probably have been made in the editor. For example plain colored shapes such as rectangles and ellipses are much lighter to load than an image that resembles exactly the same shape. The difference in loading time is literally a few thousand times smaller, so you probably want to make sure that you check each layer to make sure that you are not using an image when a shape in the editor would be sufficient.

5. Use animations instead of animated GIF’s

Animated GIF’s can be quite large compared to their single framed variant. If you really need to use animated GIF’s, try to confine the animation to the smallest pixel dimensions possible, as the size of the animated GIF really impact its file size.

We strongly encourage you to use Barisco’s animation functions where possible, you can either use the preset animations or build complex animations using the animation time line.

6. Avoid using duplicate layers for similar purposes

Every layer that you add to your project will add load time to your project, this is why it is important to make sure that there are no redundant layers. For example if you create a overlay and then copy this overlay 10 times to be used with 10 different subjects, you end up having 10 nearly the same groups of objects within your page.

This can be easily avoided by adding the 10 subjects to the same pop-up, within different groups and then display the appropriate subject when clicking a button using interactions

7. Use smaller images, instead of downscaling images

Although it is possible to scale down images within the editor, the original image will still be used. This means that if you upload an image of 1000 by 1000 pixels and then scale it down to 100 by 100 pixels, the original image (1000 by 1000 pixels) will be used to display the image in the viewer. This results in unnecessary load time and can be easily avoided by exporting the image, in the correct size from your image editing software.

8. Use the text tool instead of images where possible

If you’re using image editing software to design your projects before importing your design into Barisco, you should keep in mind to check that there are no unnecessary layers that contain just text. This can be easily done using the text component in Barisco, which makes the text in most cases smoother and much lighter to download.