How We Reduced Page Load Times by 63% With Middleman and Imgix

We've recently redesigned our site to both dramatically improve speed and optimize our images — and you can too.

How would you like to serve images responsively sized to every unique user’s device, on the fly, with minimal coding and image editing ahead of time? Complete with art direction, like focal point cropping, and all through URL parameters — without uploading your images anywhere new?

You should check out imgix, a service which may drop your bandwidth 25-30% on its own. After your product images are professionally edited, using a service like imgix is the logical next step to take for web optimization. It’s the most lightweight and powerful way I’ve seen yet to handle responsive images.

Then read on to see how we’ve used Middleman static site generator and imgix to improve our own performance, plus a bonus interview with imgix Head of Growth Ganesh Venkatesh.

Our redesigned static site is faster and more responsive.

Let me back up and explain the origin of this post. This past April, we redesigned our website around a simple premise: make everything faster. Loading time is an indicator of quality on the web. It’s not just a matter of “seeming” better: study after study has proven how much performance impacts conversions in ecommerce.

Unless your site is fast, people may not discover your product to begin with: because users quickly bounce off of a slow page, Google weights page speed in search engine result rankings. They’ve even developed a framework, AMP, to accelerate load times for users on mobile devices, and invest valuable results page space to promote it in the form of a little lightning bolt — but I digress.

Our April redesign reduced Page Load Time by 63% (using March point of 7.07 and August's 2.64.)

The changes we made to our website dramatically reduced our homepage's Page Load Time, by 63%! There's a lot of noise mixed into speed numbers, and our page content changed as well (it actually has more images than before), but those are big improvements no matter how you look at it. We've reduced the amount of data we’re serving per session, and we're serving it more efficiently.

So how did we do it?

To make our site faster, we used the static site generator Middleman to take advantage of the efficiencies offered by static sites. A static site is fast because all content is precompiled: there’s no waiting for server-side dynamic content to execute, or DB queries to run, and caching is simpler

Middleman is extremely developer friendly and powerful, simplifying our workflow to great effect. Going static solved a lot of problems for us, but we still had a big challenge in the form of images.

We’re a product image editing company: our image quality has to be on point, and we have lots and lots of images. We’re also a technology company, so we need to demonstrate our mastery of technical challenges like responsiveness (something we discussed in a more general post on responsive design over a year ago). And, obviously, we have to do it all fast.

The traditional ways to handle responsive images weren’t going to cut it for us. We didn’t want a slow server-side PHP script like Adaptive Images or ImageMagick, which wouldn’t work with a static site anyway. The srcset tag provides a great way to supply the right images to end-users (see srcset entertainingly explained by Eric Portis of Cloudinary), but it’s annoying to code, and a painstaking process to edit images for every possible size — not to mention that you end up storing a lot of images you never use.

That’s when we found imgix. In a nutshell, imgix lets you add parameters to an img tag that will generate code and edit images on the fly when your page is loaded by a browser. Here’s an example of it in action for us:

A single line in the server-side source generates 15+ srcset tags client-side, and imgix creates those images when called by editing the original.

Fifteen different possible images are listed in srcset, and as the browser is resized different images are called. Those images are called from imgix with a width property in the URL, ?w=, and imgix either delivers them from a cache or creates them on the fly by editing the original image.

Imgix made responsive images simple for us, and because our problem is one everyone handling large numbers of images on the web deals with, I contacted them to see if they’d help explain how to leverage their technology for ecommerce. This is not a sponsored post, there’s no referral deal in place, nothing like that. We’re just fans and think imgix can probably help you.

Imgix Interview On Responsive Images for Ecommerce

The following is from an interview on August 12th, 2016, with imgix Head of Growth Ganesh Venkatesh. It has been edited for length and clarity.

Does imgix have a steep learning curve the way Photoshop does?

Not really. To get started with our service is very easy and we have an elaborate set of documentation and tutorials that people can leverage to get started with us and learn how the product works. The beauty of our service and solution is that it works just within the URL parameters. What I mean by that is simply by changing the URL parameters like width, height, re-size, cropping, etc ... You can edit the images. For something like Photoshop, you would need to train yourself on the platform or the tool and familiarize yourself with all the technical aspects of it. We make it as easy and simple as possible for the users.

What inspired imgix?

The inspiration actually comes from our founder, Chris Zacharias. When Chris was working at YouTube he noticed that there were sort of three forces all converging into one problem. The first one being web and mobile performance was becoming increasingly important to businesses. Especially since Google had then began factoring performance into page ranks. The second force being the rise of mobile devices was creating entirely new and varied user experiences. It was pushing visual media beyond sort of like the traditional desktop web browser. Third being, the tools traditionally designed to solve these problems, for example Adobe Flash, were failing to survive the transition.

Now we know that Flash is no longer in existence, because they failed to survive the transition into rapidly growing mobile space. Basically this meant that at a moment where performance and quality for visual media was becoming absolutely critical to businesses, the web was lacking the tools to do just that. This is not for particular vertical or a particular type of business, but across all industries. Across all businesses that have these needs. That's why imgix began. That's where the inspiration came from.

I feel like you've definitely seen a lot of people trying to tackle that problem. HTML5 with image srcset, or the old PHP script ImageMagick, which resizes things on the host end. What advantages do you think imgix brings over solutions like those?

You bring up a good point here and just to add to that, a lot of our customers actually come from using ImageMagick. They realize that after using ImageMagick for some time they hit a certain threshold and they're not able to scale afterwards. Technologies like ImageMagick and you also mentioned srcset, are only sort of like fractional parts of the complete solution that businesses need today.

We're designed to be that complete solution. As an example, ImageMagick is set up like a utility that can manipulate images, but it is not well-suited for large scale like I just mentioned. It does not help you deliver images to those users. While srcset is an attribute and is a new addition to HTML, that helps you dynamically select images to show under different circumstances. It's very much helpful in delivering images, but it has no concept of actually manipulating or changing the image itself. You have one that is back end, front end, but there is no end-to-end solution. That's the missing piece and that's the most important part, aspect of our service. In fact that's like I just mentioned, one of our most successful solutions is to use imgix with a srcset tag to deliver the absolute best experience to end users.

And you do it on the fly, too, right? You don't have to already have created the images.

Yes, yes. Just to add to that, we're a hosted service like I just mentioned. We do it dynamically and everything happens in real-time. Unlike ImageMagick, customers never have to run their own servers or supply any software. We do it all on our side. This is very important for ecommerce businesses because they already have videos, technologies that they’ve implemented via an ecommerce platform, etc, whatever platforms they're using. All they need is to just integrate with us and all of the sudden their images are optimized, to that end user’s device.

When we started using imgix, one of the things that we liked the most was that we could just sync it with our S3 buckets. There was no additional uploading. It was easy, just put up the originals and then add in the URL parameters. For somebody using an ecommerce platform like Magento, Shopify, BigCommerce, how do they integrate with imgix?

I would like to mention, getting started with imgix is very easy. Imgix by design is simple to integrate into common platforms, like the ones that you mentioned like Magento, BigCommerce, etc., through a straightforward URL API. While we have already built a number of integrations for imgix, and Shopify is one that you noted.

We're also discovering that URL implementations are proving to be a much better format for showcasing how best to integrate imgix to your platform. To answer your question, yes, it is very easy to work with imgix regardless of the ecommerce platform that you integrate it with.

Instead of giving you a source folder or something, just doing it all straight through the URLs?

Yes. We integrate ... You noted Amazon S3 which is the platform, the most popular we have connecting to imgix, but we also work with web folders, or the source folders. We also work just using the proxies. So if they want to just pass their images using a web proxy, we could do that as well. That's the beauty of the product in a sense. That they can get started very easily just by integrating ... Just by connecting us to their source. Which usually is the three options that I mentioned.

Got you. Art direction is another cool aspect, cropping and general adjustments. How are aesthetic decisions made?

This is very important, especially for the ecommerce audience, because art direction requires the human eye. Our goal has always been to simplify this process for them by choosing that particular focal point for each version of the image the design might require. We like to call it the heart of the image. Selecting the heart of the image. Our focal point cropping parameter allows designers, or developers, to identify that crop and that point, or the heart of the image like I just mentioned, and then crop and zoom at the center to create those versions.

This is very important because the resulting URLs can then be plugged into a picture element for each break point. Our front end responsive library, imgix.js, makes creating performance, exhaustive picture elements and source sets easy. Really, focal point cropping is a new way and never done type of way of selecting the heart of the image and displaying it to their customers. This is very important even for ecommerce businesses that are thinking about responsive design. Often you use crop and re-size, but the most salient features of the image are not shown.

People who are new to imgix ... What have you seen them be most excited about?

First of all, straight off the bat, the ease of use of the product. Like we just discussed before, getting started with imgix is so simple and so fast. We have various options that people can connect imgix to, including Amazon S3 folders, web folder, or proxy ... Like we talked about, the immediate impact ... That's the first thing new users like about imgix. Almost immediately, it's the impact that imgix has on their performance that people also start noticing.

That also translates to how prior to integrating with imgix, the number of hours that they were spending on ... Editing these images, manipulating them, optimizing them for each and every device. They now don't have to deal with. All they need to do is just integrate with imgix and their website is much faster and lighter. I would say those are the things that immediately people get excited about.

This is just for starters, and the more people start using us, the more they start trying our parameters, they get creative and they take imgix to the next advanced level. Which pretty much the options are unlimited.

When you're talking about performance and the performance improvements, are you able to quantify that at all? Like the type of bandwidth savings or how much faster a page will load?

Yeah, so we are able to quantify it, but really the answer to this question depends on a number of factors. There are so many aspects that are involved in this process, so: existing solution, if you have one. The nature of your business. The devices that your customers are using. These are all the factors that people need to understand when it comes to the performance.

The most important way or the correct way of thinking about imgix is the way we give you the levers that you need to best optimize your images under any circumstance. We just talked about how easy it is to get better with a solution. For instance, if you want to prioritize image quality over bandwidth, you can do so with imgix.

If you want to target specific devices with more modern image formats, that are not yet available everywhere, you can do so with imgix as well. How much you can save on bandwidth is up to what trade offs and optimizations you're looking to make. Think of it as an equalizer that you have the control to.

The key difference is that with imgix, you make these trade offs and optimizations whenever you need, without impacting your costs, which is a major factor as well. I would say approximately we've seen customers start out straight off the bat seeing 10 to 15% decrease in bandwidth. Over a period of time their benefit and depending on how they use it, it increases to about 25 to 30% as a result of using imgix.

Very nice. Would you suggest that the page weight tool you have be used to check that out?

We definitely encourage people to check page weight. Page weight was built using standard protocols and standard best practices. That was our way of showcasing how imgix can help with savings on the page weight. So yes, we definitely encourage people to check our page weight tool which we built from scratch using standard best practices in house.

Very cool. Are functionalities like zooming and 360 spins affected by using imgix?

Yeah, so the zooming and 360 degree spins are very often simple images behind the scenes. Thus, these images are subjected to the same performance and quality challenges that normal images have. There is no magic happening there. By using imgix in combination with these use cases, you can enable much better viewing experiences for customers.

One of the benefits that you guys bring is that you have your own CDN, right? So you're caching and delivering things much faster. Could I use imgix with my own CDN? Should I?

We always recommend using our CDN instead of sandwiching multiple CDNs or topping off one CDN on another. There are a couple of reasons for this, and these are very important. One being that web performance is not only about optimizing images, but also delivering them really fast to the end user. So we make use of some sophisticated caching techniques to be able to deliver images in a split second. Having two or more CDNs is almost a guaranteed way to impact performance and image delivery.

That's one major factor. The second being that we built some really smart features leveraging our own CDN. Some smart and advanced features that rely on our integration of optimization logic and the edge caches. Something that quite won't work with other CDNs. These are two main reasons that we always recommend going with our own CDN.

That makes sense. Regarding customers, you have some pretty interesting case studies and some of them are for sites with really stunning photography. I'm a big fan of Unsplash. Do you have or do you service any e-comm, retail brands, commercial photo studios? People who are a little more ecommerce focused?

Yeah, absolutely. In fact we work with several ecommerce brands and you know that some of them are in fact ... Many of our features are actually built specifically to cater to the needs of our customers and to the ecommerce industry as a whole. A few brands are listed on our site, and many of them are NDA due to confidentiality agreements, but we do work with several design agencies who also sometimes manage production of product photos. We definitely work with several ecommerce brands.

What type of features did you develop in response to them?

A lot of it actually can be customized to that particular vertical. Zooming and 360 degrees, something that you just mentioned. We actually have what we call Luminous and Drift, which is sort of our answer to how people can use imgix for zooming. Which is out there in the market, and a lot of the ecommerce customers have been using. There are several other features that we're able to work with our ecommerce customers and customize their features and functionality according to their needs.

So you do provide some custom development?

Depending on the use case, yes.

Very cool. Do you have any exciting features coming up? Anything in the pipeline?

Yeah so we've been really working behind the scenes on some industry defining products. In fact, the one that I'm excited about personally is we've been testing for several months now our beta version of animated gifs. The gif itself is an antiquated format. And animated gif as we all know now is now a huge part of the modern internet. Their exploding popularity means that companies now have to support that format.

But the problem is that like I mentioned, gifs are an antiquated format and supporting this format is a major challenge and is sort of mobile first world. Until now there was no solution that could optimize gifs in real time, and more importantly at scale, so we've been testing our gif solution with a select few customers and we're excited to bring it to the market pretty soon.

I like it. It is weird how that ancient format is now taking over when we have all these incredibly sophisticated video solutions, but we're going back to little gifs. Giant files and tiny animations.

Indeed, indeed. That's where we decided, because this format is now gaining popularity and it's a major challenge because businesses have an obligation to cater to the customer's needs, but in doing so they also have to factor in the challenges that they will incur. And gif is quite a challenge for a company that relies on visual media.

Is there a type of image that works best with imgix?

There is no particular type, in fact that's the best part of imgix. The best type of image is actually the original. We only require the unedited image regardless of the format or size. In fact we've had customers pass images as large as over a few GBs, pass them to our servers, and we accept all common image formats as well as many uncommon ones as well that people don't often use. The original, unedited image is what we prefer because it gives us the best opportunity to analyse and optimize the image into the perfect final form.