Transform Cloud Storage Performance into an F1 Car
Wolox is always searching for new ways to improve product quality. One of the most critical factors that influences any app’s UX is the loading time of images, videos and other types of media files.
This post assumes that you have adopted a Storage as a Service (SaaS) solution to save and deliver your content. If you apply the steps listed below, your SaaS performance will significantly improve and users will be able to load the app’s files with the speed of a Ferrari.
Struggling with the Transfer Latency?
One of the most used SaaS platforms is S3 provided by Amazon. You can store the app’s media files in a bucket to provide a reasonable loading time without spending much money. As soon as your app starts being used by people from different parts of your country or even from other parts of the world, the loading time will slow down.
Amazon and almost any SaaS provider allow you to set up the storage system in different regions of the world. Choosing the closest one to your users is an important step to guaranteeing the best possible response time. The data latency will increase proportionally to the distance between the storage system and the user. This might not be a problem if you are developing a project with local users, but it might be an obstacle when trying to reach new users from other regions.
Content Delivery Network
A high performance solution that will decrease latency is setting up a CDN (Content Delivery Network): a distributed set of servers with high availability around the world. The CDN can store multiple copies of the files in your system and will have the responsibility of serving them.
When users request a file from the cloud storage, instead of using the S3 bucket (if you are using Amazon), the request will be routed to the CDN hostname. DNS will assign the petition to the most suitable server according to distance, availability and other metrics. Finally, the selected server will handle the request and thus the latency time will be reduced significantly.
Be fast. Use WebP
WebP is an image format developed by Google.
“The WebP format essentially aims at creating smaller, better looking images that can help make the web faster”
We strongly recommend using WebP. Compared with JPEG, a WebP image can be up to 34% smaller without showing considerable loss of quality. Furthermore, WebP supports transparencies such as PNG files, but with one-third of the file size.
After reading this, you may be interested in using WebP, but still wondering why isn’t WebP so popular? The answer to this is that WebP is still not a standard file format. Some browsers don’t support WebP neither the image libraries for mobile applications. Learn more about this on Caniuse.
As WebP is quite new, trying to integrate it with a project’s image libraries may be tough. For example, we struggled trying to convert images to WebP with imagemagick due to an existing bug in this image library.
To conclude, using WebP may significantly reduce the size of all your images. However, it still has some downsides. Consider the advantages and disadvantages of WebP before using it!
Our Results
As we stated before, our solution includes setting up CDN. The results were good, but we wanted files to load even faster, so we gave WebP a try and the results were impressive.
To measure the improvement, we came up with a test script that takes a group of image links, makes a request for each one and outputs the load time.
The following screenshot shows the output. The difference between the load time for each group of pictures was huge. The first group of links comprised images in their original format taken from a bucket and the second group had the same images, but converted to WebP and hosted in a CDN.
Check out the test script in the following gist.
We hope this post helps you to improve your SaaS performance!
Posted by Sebastián Balay (sebastian.balay@wolox.com.ar)
