Filestack: Make Your E-Commerce Website Faster with Less CodeMay 12, 2016
Editor’s note: this is a quick guest post by Bethany Stachenfeld from Filestack. It puts important front-end issues in perspective, and introduces a product we believe has added-value for developers.
You know that if your website loads faster, your bounce rate will lower, your visitors will be more likely to purchase, and your retention rate will be higher. Kissmetrics reports that as many as 40% of visitors abandon a website that takes more than 3 seconds to load, and even a 1 second delay in page response can result in a 7% reduction in conversions.
You also know that the more images you have on your website, the more likely visitors are to purchase. The human brain can process an image in only 13 milliseconds, so the perfect picture can convince a visitor that your item is worth purchasing in a single glance. However, more heavy, unoptimized images result in a longer load time and higher bounce rate.
Thus lies the catch 22 - Do you choose more images, or a faster load time? Which will make your users happier, more engaged, more likely to purchase?
You can spend hours A/B testing to find the optimal balance, but you’ll still be sacrificing something. Alternatively, you can try these hacks to improve your website speed without sacrificing image number or quality.
Use a CDN for Delivery: A CDN, or Content Delivery Network, is a system of distributed servers that deliver web content and pages to users based on their geographic locations. They enable you to improve your site speed because users will get content delivered by the server nearest them, not necessarily the original server. So instead of your content having to travel all of the way from Canada to Australia, when a user is viewing your content in Australia, it will be delivered by the closest server located in Australia.
Convert Images on-the-fly: You often need the same images in different sizes on a page - from the full image, to the thumbnail, to a blurred or filtered image upon click. Instead of saving four variations of the same image, you can transform one image on the fly for each use cases by adding conversion parameters to the image.
Optimized Uploading: If your site requires users to upload images, videos, or docs on your site, it is imperative that you optimize your uploading process to reduce user abandonment. Often, large images can break uploaders. However, by slicing a large file into multiple chunks and uploading them in parallel increases both the speed and success rate of your uploads.
Now, for how to do all this with less code.
Including any of these optimizations into your site will significantly improve your performance. You can custom build these solutions yourself, or, by simply integrating 2 lines of code into your website, you can access Filestack’s library. Filestack, the files API for the web, is an easy to implement developer tool that provides services such as CDN delivery, on-the-fly image transformations, file uploading and more. You can have all of the benefits of an optimized website, without having to build all of the integrations yourself.
Happy optimization! :)
If you found this post valuable, take a second to share it on Twitter. We’d also love to know your thoughts on front-end optimization—and Filestack’s offering—in the comments below.