PowerPoint Presentation

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 worlds 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 theCoffees by Roast pageand 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 DELIVERYMEASUREMENT TOOLS WE USEDWe 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 Logics 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 DISCUSSIONTime 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 LogicStarbucks/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.CONCLUSIONFull webpagetest.org reportsFor those who love looking at waterfalls and are familiar with webpagetest, we have saved the reports at the links below.

page loaded via Instart Logicpage loaded via Starbucks/Akamai