5  Steps  to  Deliver  the  Fastest  Mobile  Shopping  Experiences  

this  Holiday  Season    Presented by Sponsored by

#HolidayCCS

About  CCS  2014  

ü 7 Webinars, 4 Days

ü Sessions covering Store

Ops, X-Channel, Loyalty,

Big Data & more

ü Featuring industry

analysts and consultants

ü Free for Retail executives

http://ccs.retailtouchpoints.com/holiday-2014

#HolidayCCS

Follow  The  Webcast  On  Twi:er  

#HolidayCCS  @ConnectConsumer  @RTouchPoints  @InstartLogic  

 

#HolidayCCS

About  Retail  TouchPoints  

ü  Launched in 2007

ü More than 28,000 subscribers

ü Provide executives with relevant,

insightful content

ü  Free Resources such as White Papers,

E-book, Webinars, Research and

Podcasts

www.RetailTouchPoints.com

#HolidayCCS

BrightTALK  

#HolidayCCS

Today’s  Panelists  

Peter Blum, VP of Product Management, Instart Logic

Alicia Fiorletta Senior Editor, Retail TouchPoints

MODERATOR

5 Steps To Deliver the Fastest Mobile Shopping Experiences

This Holiday Season

What we’ll cover

•  Why performance matters •  Case Study: Dollar Shave Club •  Instart Logic overview •  Modern Web Performance

Challenges •  5 Steps to Faster Mobile (and web)

Experiences •  Case Study: One Kings Lane •  Conclusion

www.instartlogic.com

Performance is Critical to e-Businesses

Loss In Conversions

Fewer Page Views

Decrease In Customer Satisfaction

=

1 Second Delay in Page Load Time

Sources: Aberdeen Group, Walmart Study

7%

11%

16%

www.instartlogic.com

Case Study: Dollar Shave Club

“This was the single most impressive conversion win we have experienced to date for anything we have done.”

-Todd Lehr, VP Engineering

Switched from Amazon CloudFront Conversion Boost

16.8% overall Up to 27% for tablets Up to 126% for smartphones

www.instartlogic.com

Instart Logic - Overview

•  Software company focused on Application Delivery

•  We work with globally known brands whose business depends on performance, and make their sites and apps really fast

•  Team includes big data, virtualization and web performance experts from Google, Facebook, Akamai, Cisco, Citrix, VMware, and Aster Data

www.instartlogic.com

Who uses Instart Logic?

www.instartlogic.com

Modern Web Performance Challenges

Old World Application Delivery is single ended

“Wintel” End point

All existing solutions

stop at the edge

Wired Last Mile

10ms

www

“Distance Challenge” topology bound

200ms

www.instartlogic.com

0

50

100

150

200

250

Wired LTE WiFi 4G 3G

3G/4G/WiFi networks Slow, unpredictable edge

Devices Format/capability diversity

Sophisticated Apps Visual, personalized, complex

Late

ncy

(ms)

The Application Delivery Challenge Today

www.instartlogic.com

The Constraints of Today’s Application Delivery Solutions

“Diversity Challenge” Combinatorial explosion

“Congestion Challenge” Fat apps, thin pipe

150ms

Reduced “Distance Challenge” topology bound

100ms

www.instartlogic.com

Possible solutions

Re-think

Choose a new, completely different,

more efficient approach to delivering web and mobile performance

Patchwork

Cobble together disparate point solutions in the app

delivery path

CDN + FEO + device or access network specific apps + internal development

Do Nothing

Todays’ dominant solution is to ignore this challenge as

businesses are not aware of what’s possible

www.instartlogic.com

Instart Logic’s Approach

•  Replaces legacy CDNs and FEO, delivered as service

•  Software-centric solution, enabled by intercepting the entire delivery path

•  Integrated Client-Cloud architecture, manages resources end-to-end

•  Software extensible to future hardware/network improvements and new service features

18 | Confidential and proprietary

Software-Defined Application Delivery

Application Virtualization

Web Browser

Application Intelligence Application Server

Cloud Web Application

NanoVisor.JS

Browser API & Resources

5 Steps to Faster Mobile (and web) Experiences

Step1: Faster, Smarter Image Delivery

Traditional Image Delivery

2 Mbps

1,500 KB

5.8 seconds

Ready ✔

1,500 KB of JPG/PNG files

www.instartlogic.com

Can trade image quality for size but poor UX

2 Mbps

1,500 700 KB of JPG/PNG files

700 KB

2.9 seconds

Ready ✔

www.instartlogic.com

Enter Image Streaming and Computer Vision analysis

www.instartlogic.com

Enter Image Streaming and Computer Vision analysis

www.instartlogic.com

Enter Image Streaming and Computer Vision analysis

Color Density Objects/People Complexity/Patterns

www.instartlogic.com

Instart Logic Image Streaming with SmartVision

2 Mbps

1,500 KB of JPG/PNG files

500 KB 1000 KB

Ready ✔

1.9 sec 3.6 sec

Automatic intelligent splitting of images, with varying quality levels

www.instartlogic.com

Step 2: Send right-sized images to end devices

Responsive Website Example

•  Same images (and data) sent to every device •  Expensive resizing on the client side •  Solution: Right image for each device

750 x 422 283KB

300 x 169 283 KB

750 x 422 283KB

www.instartlogic.com

Do it yourself

Adaptive approach Requires spitting out different images sizes during publish process Adjust HTML generation systems on server side for different devices Send resized images based on endpoint detection

Drawbacks Investments in hardware for resizing lots of images Heavy development investment required Doing this during publish makes it hard to adapt to new devices (ex: iPhone 6 Plus)

www.instartlogic.com

Image Resize as a Service

Original Image - 575 x 412 (221KB) Right sized Image - 287x 206 (54KB)

Original “learn about the roast” page size Right sized “learn about the roast” page size

738KB 1,459KB

Automatic or API based resize for any mobile device, for any responsive website

www.instartlogic.com

/images/roast.jpg?resize=width:300

Step 3: Stream HTML to make your site faster

Dynamic HTML Delivery

•  Dynamic HTML takes time to generate on the backend •  Browser idle and until HTML generated and downloaded

Generate <HTML>

Request

<HTML>

Response

www.instartlogic.com

Fast Flushing of HTML Helps

•  Send dynamic HTML as its generated in chunks •  Hefty investment in backend and code changes •  Only incremental benefit given back and forth communication

1 <PART1> <PART2> <PART3> Dynamic <HTML>

Request

Response

www.instartlogic.com

HTML Streaming is better

Instart Logic

•  Instart Logic automatically determines non-unique dynamic HTML •  That portion is stored near end users and sent immediately •  Allows browser to start working immediately

2

3

4 1

Non-unique <HTML>

Generate <HTML> <HTML>

Response

www.instartlogic.com

Step 4: Smarter Usage of Modern Browser Caching

Standard Browser Caching

Traditional Browser Storage

Large but slow Local Browser Cache

CSS  

www.instartlogic.com

Manually code to HTML5 Storage for faster reloads

Traditional Browser Storage

Small, but super fast Local Storage

Local Browser Cache Large but slow

CSS  

www.instartlogic.com

Browser storage tiers and fetch times (ms)

LocalStorage 1 1 6 2 5 3 3

SessionStorage 0 1 8 2 5 4 4

Cookie 11 97 13 7 104 111 68

Browser Cache - via XHR

549 617 1944 793 2257 2425 1760

Total time to access 1K objects of 500B each

www.instartlogic.com

Instart Logic automatic placement

Traditional Browser Storage

Small, but super fast Local Storage

Local Browser Cache Large but slow

Nan

ovis

or.J

S

CSS  

www.instartlogic.com

Step 5: Cover your web performance basics

Web Performance Basics

www.instartlogic.com

•  Use the right quality settings for your images

•  Each image is unique but too high quality kills performance without a visible improvement

•  Use modern image formats when possible

•  Reduce image size up to 30% without loss of quality using Google WebP and Microsoft JPEG XR

•  Compress your text with gzip

•  HTML, CSS, and JavaScript should all be compressed

•  Set proper browser cache headers

•  Static assets like CSS, JavaScript, and images should have Cache-control headers

Case Study: One Kings Lane

42 | Confidential and proprietary

Case Study: One Kings Lane

“Instart Logics’ key differentiator for us was its intelligent application delivery solution. Given the …heavy imagery and high-resolution imagery of our website, …we couldn’t find anything like Instart Logic’s solution in the market.”

-Arun Rajan, CTO, One Kings Lane

•  Switched from Akamai •  Using large immersive images •  Dramatic performance boost

35% improvement in page load times •  Offloaded backend servers

www.instartlogic.com

Conclusion

1.  Modern application delivery challenges (mobile devices, wireless networks) are not being addressed by CDNs

2.  You can make a number of changes internally with internal development to increase performance

3.  Instart Logic can do better, and with no effort on your part.

Questions?

www.instartlogic.com

Get a Demo: www.instartlogic.com

#HolidayCCS

Q&A  

#HolidayCCS

Q  &  A  

Peter Blum, VP of Product Management, Instart Logic

Alicia Fiorletta Senior Editor, Retail TouchPoints

MODERATOR

#HolidayCCS

It’s  A  Wrap!  

Thank  you  for  a:ending  the  Holiday  Connected  Consumer  Series!  

All  sessions  are  available  on-­‐demand  at    h:p://rtou.ch/holidayccs