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

Follow
The
Webcast
On
Twi:er
#HolidayCCS
#HolidayCCS
@ConnectConsumer
@RTouchPoints
@InstartLogic

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

#HolidayCCS
Today’s
Panelists
Peter Blum,
VP of Product Management,
Instart Logic
MODERATOR
Alicia Fiorletta
Senior Editor,
Retail TouchPoints

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

www
“Wintel” End point
All existing
solutions
stop at the
edge
10ms
Wired Last Mile
200ms
“Distance Challenge”
topology bound
Old World Application Delivery is single ended

250
200
150
100
50
0
Wired
LTE
WiFi
4G
3G
3G/4G/WiFi networks
Slow, unpredictable edge
Devices
Format/capability diversity
Sophisticated Apps
Visual, personalized, complex
Latency (ms)
The Application Delivery Challenge Today

“Diversity Challenge”
Combinatorial explosion
150ms
“Congestion Challenge”
Fat apps, thin pipe
100ms
Reduced “Distance Challenge”
topology bound
The Constraints of Today’s Application Delivery Solutions

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
Web Application Cloud
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
Ready ✔
500 KB 1000 KB
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
750 x 422
283KB
• Same images (and data) sent to every device
• Expensive resizing on the client side
• Solution: Right image for each device
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
Automatic or API based resize for any mobile device, for any responsive website
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
1,459KB 738KB
/images/roast.jpg?resize=width:300

Step 3: Stream HTML to make your site faster

Dynamic HTML Delivery
Generate
<HTML>
Request
Response
<HTML>
• Dynamic HTML takes time to generate on the backend
• Browser idle and until HTML generated and downloaded

Fast Flushing of HTML Helps
Request
Response
<PART3> <PAR1T 2> <PART1> Dynamic
<HTML>
• Send dynamic HTML as its generated in chunks
• Hefty investment in backend and code changes
• Only incremental benefit given back and forth communication

HTML Streaming is better
Instart Logic
4
Response
2
3
1
Non-unique
<HTML>
Generate
<HTML> <HTML>
• Instart Logic automatically determines non-unique dynamic HTML
• That portion is stored near end users and sent immediately
• Allows browser to start working immediately

Step 4: Smarter Usage of Modern Browser Caching

Standard Browser Caching
Traditional Browser
Storage
Local Browser Cache Large but slow
CSS

Manually code to HTML5 Storage
for faster reloads
Traditional Browser
Storage
Small, Local Storage but super fast
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
Traditional Browser
Storage
Small, Local Storage but super fast
Nanovisor.JS
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:

#HolidayCCS
Q
&
A
Peter Blum,
VP of Product Management,
Instart Logic
MODERATOR
Alicia Fiorletta
Senior Editor,
Retail TouchPoints

#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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (7)

Similaire à 5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season

Similaire à 5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season (20)

Plus de G3 Communications

Plus de G3 Communications (20)

Dernier

Dernier (9)

5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season