If you’ve ever encountered a slow loading webpage, you know exactly how wait time impacts user experience. According to Kissmetrics, a 4 second wait time leads to a 25% abandonment rate. The average Internet user expects a page to load in 2 seconds or less, and is not happy to wait longer than that. These problems are only exacerbated on slow connections which are typical across huge parts of the web.
Of course, this is a challenge when we’re dealing with a lot of images on our website. Images increase affinity for your product, but they also increase load time. Especially when the final destination is far from your server, a big image is going to slow your webpage down. There are a few ways that you can optimize images for your application to make them load faster. One of the simplest and best ways is to serve them through a content delivery network (CDN).
A CDN is a system of distributed servers, that when combined, make up a point of presence (POP) network. Through this network, the delivery of web pages and other web content is optimized to the user based on geographic location and the origin of the webpage. Additionally, the content is cached to ensure faster delivery when it is requested again.
If you’re unfamiliar with caching, it’s when the CDN copies images, videos, or even the pages of a website itself to a network of servers that are dispersed geographically, and prepares those elements for delivery when requested. When a user requests a webpage, the CDN will redirect the request from the originating site’s server to the POP that is closest to the user and deliver the cached content from there. If the web page, or element is being requested for the first time, the CDN will communicate with the originating server to deliver the new content and will cache that content for future requests.
The effects of the CDN are magnified the further away an end-user is from the origin. If your source is in New York, you can easily decrease load time by 50% for viewers in Asia. The cherry on top is that because a CDN allows you to cache your static content instead of redelivering it, you actually save on bandwidth costs.
Filestack as a CDN
In 2016, Filestack partnered with Fastly to provide a reliable and fast CDN service for our customers. With this partnership, we can offer access to Fastly’s 24 POPs located strategically around the globe, as well as the ability to offer all Fastly features to our customers. When you upload a file with Filestack, you by default generate a CDN URL, also called a “filelink,” that you can use to serve the file to your end-users, without any delays or hassles.
The major benefit of Filestack with a CDN baked in is the integrations with a file uploader and image transformation engine. Filestack becomes the end-to-end image handling API that simplifies the process of uploading, transforming, and delivering files.
File Uploading:
To upload files with Filestack, you can either use our file picker widget or our JavaScript API. Once you or an end-user uploads a file, you immediately generate a CDN URL for that file. You can then use that URL to deliver images on your application. It’s that easy.
Image Transformation:
Filestack has a built in image transformation engine so you can apply transformations to the CDN URL on-the-fly. You can use these transformations to further optimize the speed of images. For example, you can use the resizing, compression and responsive imaging transformations to ensure that images are being delivered in the right size. For example, if you’re delivering an image on a mobile device, you do not want to deliver the original, high resolution image. Instead, you want to deliver a mobile optimized version. Delivering the original image would be, slower, bandwidth intensive,and overall a worse experience for end users.
Bring Your Own CDN
If you would prefer to use your own CDN, then you can use Filestack to pick and store files to your cloud storage, and then deliver the files from your CDN of choice. For example, if you use Amazon, you can use Filestack to upload files to your S3 bucket, and then use Cloudfront to deliver files.
In all cases, we recommend delivering files through a CDN for increased performance and cost savings. However, we find that most users find it preferable to use Filestack as their CDN. On top of the file uploading and transformation capabilities, power users can usually save 20%-30%+ of their Cloudfront bill, and see similiar, and in some cases, better performance.
Serving files through a CDN is instrumental for improving load time time, and by effect, user experience. Filestack offers a seamless way to upload files to your backend, apply file transformations, and deliver via world renowned Fastly CDN, all with minimal integration. We are happy to help and answer all questions – feel free to reach out:
Contact Support
Filestack is a dynamic team dedicated to revolutionizing file uploads and management for web and mobile applications. Our user-friendly API seamlessly integrates with major cloud services, offering developers a reliable and efficient file handling experience.
Read More →