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.
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.
Instart Logic features used
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.
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.
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.
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.
|Document Complete||6.48 seconds||Document Complete||9.42 seconds|
|Bytes Downloaded||802 KB||Bytes Downloaded||1,384 KB|
Take a look at video proof
This is a side by side video on a laptop showing that the difference is apparent even with a faster network connection:
Sending the right images to the right device
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.
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.
Original Image - 575 x 412 (221KB)
Rightsized Image - 287 x 206 (54KB)
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:
|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.
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.