IF STARBUCKS USED INSTART

LOGIC, THEY WOULD HAVE A

FASTER RESPONSIVE WEBSITE

BY PETER BLUM

This is another in an ongoing series of blog posts where we take a look at the benefits

of using the Instart Logic service with popular web properties. In this installment we take

a look at the world’s largest coffee chain — Starbucks.

Starbucks has built a great-looking responsive website with lots of enticing images to

get you thinking about heading down the street to pick up a caramel mocha with a

double shot and extra whip. And being responsive, it adapts the presentation of web

pages depending on the capabilities of the device. So I thought it would be an

interesting site to look at through our system.

For this test I picked out the Coffees by Roast page and found that by using the Instart

Logic service, we could give them a big boost in page load performance. Using a fast

3G connection to show a common mobile connection, we see a performance increase

by 3 full seconds (the length of time it takes to order a cinnamon dolce frappuccino).

Keep reading for the details of the test and to learn a little more about how the Instart

Logic service is able to deliver this level of performance.

The HTML for the site is delivered directly from

origin web servers in Seattle, and the various

images are hosted on Akamai. Like many sites,

Starbucks has a lot of third-party JavaScript

coming from a bunch of different places.

WHAT STARBUCKS.COM

USES TODAY FOR WEB

DELIVERY

MEASUREMENT TOOLS

WE USED

We used one of our favorite free web performance

tools, Webpagetest. It uses real instrumented

browsers to load up web pages, which in this case

ran through our service and then without our

service.

We used our Image Streaming technology for this test along with our Global Network Accelerator. I did some work with our

Image Resize service as well to see what we could do to help with Starbucks’ particular responsive website approach.

Image Streaming allows our service to paint the images on the page in two passes. The first pass in this case will send

around 50% of the image data up front and then our intelligent JavaScript client, Nanovisor.js, will request the remaining

data after the onload event to do a second paint, bringing the images to full fidelity.

The Global Network Accelerator uses network acceleration and data compression to increase the speed of dynamic HTML

delivery and to compress elements such as HTML, CSS, and JavaScript during the delivery process to reduce total data

transfer.

When we delivered the Starbucks.com site through our service, we replaced the use of a legacy CDN like Akamai and

enhanced the elements that Starbucks currently delivers from its own web servers. One of the great things about our

service is that it does not require any changes to the website or web application. New customers need only a few minutes

to switch some DNS entries and they can start using Instart Logic’s service.

INSTART LOGIC FEATURES USED

The major factor in the principal test page is the amount of data transfer required before Document

Complete. They do have a fair amount of third-party JavaScript, but it was less of a factor here. We are

doing a number of things here to reduce the upfront data transfer. The first is fairly basic — compressing all

the text assets as they pass through our systems. In this case Starbucks is sending a number of items

uncompressed, probably to reduce load on their backend servers.

You can at a glance see here in the performance waterfalls the longer blue bars, which represent network

transfer time. The bars are shorter for these text assets since Instart Logic will compress them. This is

something Starbucks’ IT team could do on their own.

RESULTS DISCUSSION

Time and bytes to Document Complete

Existing Waterfall

Waterfall with Instart Logic

The second thing we are doing — which is not something Starbucks or traditional web delivery systems like Akamai

can do — is using our Image Streaming technology. This allows us to take a bigger image and fragment it into two

smaller parts. We send the first layer to paint the webpage quickly for the user, and then the client-side component of

our service requests and then displays the second overlay very soon after the first display of the page (which is

represented by the Document Complete metric).

If you look at the table below, you can see the difference in the Document Complete times and the number of bytes

transferred at that point. The key takeaway here is that, to get to precisely the same result in terms of the page

delivered to the browser, Instart Logic sends 40 percent less data and cuts the time by one-third.

Instart Logic Starbucks/Akamai

Document Complete 6.48 seconds Document Complete 9.42 seconds

Bytes Downloaded 802 KB Bytes Downloaded 1,384 KB

This is a side by side video on a laptop showing that the difference is

apparent even with a faster network connection:

TAKE A LOOK AT VIDEO PROOF

In addition to the Image Streaming technology, our service also has a new on-demand image resizing capability that can

help responsive websites deliver the right image to the right device. The Starbucks site, like most responsive websites,

sends large images meant for desktops to mobile devices. Our service can identify that the endpoint is an iPhone or other

mobile device, and then appropriately size the images for each target device.

SENDING THE RIGHT IMAGES TO THE RIGHT DEVICE

We extended the experiment to look at

further reducing the image transfer to an

iPhone.

You can see from this main image that we

can right-size the image and dramatically

reduce the overall data transfer.

When you do this across all the images and add in the Image Streaming and

compression benefits cited above, the byte reduction brings the Bytes Downloaded

to about half that of the original image size:

Instart Logic Starbucks/Akamai

Bytes Downloaded 738 KB Bytes Downloaded 1,459 KB

(Note that the bytes downloaded for the page differs from the one in the earlier

table. The difference is in the fact that the site is responsive and so sends down

different content for the iPhone.)

We can see that for the Starbucks site, the Instart Logic service can

deliver major improvements in performance and, as a result, the end

user experience. Since they have a responsive website, Starbucks

can use our image resizing capabilities to deliver the right image to the

right device, further increasing performance.

CONCLUSION

Full webpagetest.org reports

For those who love looking at waterfalls and are familiar with

webpagetest, we have saved the reports at the links below.

page loaded via Instart Logic

page loaded via Starbucks/Akamai