5 steps to deliver the fastest mobile shopping experience this holiday season

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%


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


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


Who uses Instart Logic?


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


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


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


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


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


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 ✔


Enter Image Streaming and Computer Vision analysis


Enter Image Streaming and Computer Vision analysis

Color Density Objects/People Complexity/Patterns


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


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


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)


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


/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


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


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


Step 4: Smarter Usage of Modern Browser Caching

Standard Browser Caching

Traditional Browser Storage

Large but slow Local Browser Cache

CSS


Manually code to HTML5 Storage for faster reloads


Small, but super fast Local Storage

Local Browser Cache Large but slow

CSS


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


Instart Logic automatic placement


Small, but super fast Local Storage

Local Browser Cache Large but slow

Nan

ovis

or.J

S

CSS


Step 5: Cover your web performance basics

Web Performance Basics


•  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


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?


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

5 steps to deliver the fastest mobile shopping experience this holiday season

Retail

enter image

slow css www

case study

instart logic

local storage

product management

faster mobile

image