How Shogun optimized their media pipeline and cut 86% of image bandwidth costs

Shogun is a powerful page building platform for ecommerce teams and agencies. It empowers brands to create refined customer experiences with faster page-load times while staying no-code.

In February 2020, Shogun announced that it had raised a $10 million Series A Investment for their next product, Frontend, which allows direct-to-consumer (DTC) brands to build fast headless ecommerce sites. In October of the same year, the company closed a $35M Series B.

Shogun serves a total of 96 terabytes of image content per month, but not a single one of them is full-sized. Without optimization, this would have been 476 terabytes of data-heavy images, increasing page load times and bounce rates. So optimization was a must, but building the infrastructure in-house wasn’t an option:

Developing a file uploading and image processing system from scratch would’ve taken a lot of human resources. Engineers wouldn’t have been able to focus on their main job: iterating, maintaining, and supporting the product. And this would’ve harmed the business in the long run.

To build the desired functionality would have taken a team of 3-4 full-time developers several months. This would’ve required additional investments in the project and therefore increased the total cost of ownership.

Building an in-house image-handling system takes time and could’ve delayed Shogun’s product launch. Also, the company would’ve had to invest time in ongoing infrastructure maintenance and support.

Unavailable image uploads or slow image processing would lead to a poor user experience. Plus, maintaining a DIY tool can be annoying: uploads fail and stall, there are network issues, and slow connections are difficult to manage.

To cope with tons of images and keep up with growing client demands, Shogun set four objectives to bring tangible business benefits to both the company and its clients:

Finding a convenient ready-made solution would prevent burnouts and help in-house engineers focus on the other crucial product features.

Lowering the bandwidth and traffic costs would decrease the total cost of ownership and free up more resources for business development.

Saving on infrastructure development and maintenance would streamline the production cycle and cut down the time to market.

A file handling system with a smart CDN would provide a smooth user experience even during traffic surges.

Having a good sense of ecommerce values and market trends, Shogun started looking for a partner that shared the same knowledge and values. Customer Experience Suite by Uploadcare helped Shogun to reach their goal in a couple of hours instead of several months. The whole process had four simple steps:

Shogun used Uploadcare File Uploader, a responsive and mobile-ready solution for integrating uploading capabilities. The file upload widget was implemented as a standard JavaScript library and started accepting images from users right away.

Further customization adjusted the widget to Shogun’s needs and page style. For example, the team allowed users to select and upload multiple files and to edit images after uploading.

Although the widget can be configured to use custom storage, Shogun trusts the built-in Uploadcare storage and smart image CDN. With its help, every uploaded file is rapidly and safely delivered across 288K servers in 135+ countries. Uploadcare automatically scales the infrastructure to handle the increasing pressure caused by Shogun’s ever-growing customer base.

Uploadcare can either convert images to one of the chosen formats (JPEG, PNG, or WebP) or adapt the image format according to the client’s context. Using the latter AutoFormat option, Shogun turned JPEGs into WebPs wherever possible, resulting in a massive image size reduction. Lowering the image bandwidth cut the total cost of ownership of the CDN and traffic costs by 86%.

File size also affects loading speeds and volumes of generated bandwidth. Shogun configured Uploadcare’s platform to automatically adjust the image compression to preserve the visual quality while minimizing the file size.

Optimizing images via Uploadacare’s end-to-end cloud platform accelerated page load times by 1.5x. The improved web performance provides Shogun’s clients exactly what they’re looking for: increased website conversion and online sales growth.

Page speed is an essential factor in the digital experience, but it’s equally important to adapt content to the user context. To provide customers with unhindered website interactions, Uploadcare developed Adaptive Delivery, a full-stack image optimization solution included in the CX Suite that:

CX Suite by Uploadcare automated every aspect of Shogun’s media pipeline, from uploading files to delivering them adapted to the end-user context. This resulted in:

With Uploadcare, Shogun reduced image bandwidth costs by 86% compared to serving the equivalent unoptimized traffic. This resulted in infrastructure cost savings of just over $200,000 per year.

For a company like Shogun, image content delivery costs mount quickly. Firstly, all Shogun’s users serve images through the application. Secondly, ecommerce stores are image heavy. Multiply these two factors, and you get hefty bandwidth usage.

Shogun drastically reduced initial development costs by avoiding building the infrastructure in-house. This would have required 3 or 4 developers working full-time for at least three months. At an estimated fully loaded cost of $125,000 per year per developer, this comes out to over $200,000 in direct development cost savings.

In addition to the initial development expenses, Shogun cut down on ongoing maintenance and non-technical support. Bug fixes and minor feature development would have required at least one full-time developer and significant ongoing costs.

Using Uploadcare saved Shogun not only money but also time. The team was able to bring Shogun to market faster and ensured they wouldn’t have to spend time in the future developing additional functionality as their needs expanded.

Uploadcare is an end-to-end cloud platform that provides a next-gen infrastructure for file handling. It can cover any part of the media pipeline or all of them at once: