Faster image streaming means quicker conversions

1
Extreme image performance without quality loss

• Mehrdad Reshadi
• (mreshadi_at_instartlogic.com)
• Lead Software Architect

2
Images User Experience

• Problem dealing with large images
• Large beautiful images
• Are essential for user experience
• Can hurt user experience!
• Specially on mobile devices

3
Mobile website approaches

• Desktop site for all
• Ignore mobile
• Dedicated desktop, with an m. site
• Limit mobile
• Dedicated desktop, mobile, and tablet sites
• Invest on separate sites
• Responsive websites
• Single site adapts to the device
• Adapt both Presentation Performance

4
Whats a responsive website look like?
5
Whats the performance look like?
Safari on iPad 4 3G 3.1 MB 94 seconds
Firefox 5Mbps wired 1.7 MB 3.9 seconds
Safari iPhone 5 3G 1.9 MB 38 seconds
Chrome 5Mbps wired 1.7 MB 3.6 seconds
Source webpagetest.org, Appurify.webpagetest.org
6
Whats going on?
750 x 422 283KB
300 x 169 283 KB
750 x 422 283KB

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

7
Big, high-resolution images increase user
engagement

• but mean slower page load times

8
Frustrates your mobile/tablet users the most

• Source Keynote

Source Keynote Systems, Average response time
for retail sites across devices
9
Poor load times destroy conversions
Conversion rate vs. Load Time
Conversion rate ()
Population ()
0-1
1-2
2-3
3-4
4-5
5-6
6-7
7-8
8-9
9-10
10-11
11-12
12-13
13-14
14-5
gt15
Load Time (seconds)
Sources Walmart, Amazon, GlassesDirect
10
Problem Web delivery designed for desktops
ADCs
CDNs
Last Mile
Middle Mile
First Mile
100ms
10ms
Bottleneck
11
Whats changed 1 Wireless Networks and Devices
Internet
Bottleneck
Edge
12
Whats changed 2 Big Complex Sites
2003
13
The New Bottlenecks Browser Mechanics and
Last-Mile Latency
HTML 5 adoption
Image heavy design patterns
High resolution displays
14
Performance vs. Quality

• Current responses
• Ignoring performance at the expense of user
  experience
• Web app developers creating lower quality mobile
  experiences
• Automated quality reduction systems from CDNs
• Result
• Poor user experience, poor conversions, high
  bounce rates
• Reducing download size can improve load times
• But ultimately does not deliver a great user
  experience

15
Image Optimization

• Browsers try to not block on image download
• Technically, page can be interactive before
  images download
• Practically, user has to wait for important
  information to arrive
• Simple model
• d time to download content
• Network bound
• u time for user to see something
• Download ? Decode ? Render

network
cpu
16
Original Images
d1
Assume 1connection
r1
download
d2
render
r2
(d1d2) U

• User sees all info after all images are fully
  download
• Large image gt slow download gt high wait time

17
Individual Image Optimize

• Goal reduce download and render time
• Remove unnecessary metadata from image (Photoshop
  )
• Resize for each device/screen type
• Compress un-important images more
• Use browser specific image formats when possible
• WebP on Chrome, JPEG XR on IE,
• Experiment with other formats on different
  browsers

18
Progressive Images
d1
Assume 1connection
r1
download
d2
render
r2
(d1?) U

• Overlap download and rendering of images
• Convert to progressive JPEG or JPEG XR
• Still download of one image, blocks other images

19
Split Progressive Images
d'1
Assume 1connection
r'1
download
d'2
render
r'2
d1
r1
d2
r2
(d1?) U d1

• Use smaller (progressive?) images first
• Load actual images after all images are loaded
  replace the small ones
• More complex
• More download gt can starve other tasks, more
  cost on the server

20
Stream Images
d'1
Assume 1connection
r'1
download
d'2
render
r'2
d"1
r"1
d"2
r"2
(d1?) U d1

• Send only part of the images first
• Load rest of images later
• Same download as before, but faster information
  load

21
Choosing Best Optimization

• Most effective optimization depends on the many
  factors
• Device, image type (even content), network
• Choosing proper optimization may require
  significant investment
• Instart Logic application streaming technology
• Automatically detect the best optimization
• Apply to each image transparently with no
  developer investment

22
Streaming disrupted downloading
Web Applications
x86 Applications
FROM DOWNLOADS
Video
CDN
FROM DOWNLOADS
FROM DOWNLOADS
ADC
TO STREAMING
TO STREAMING
TO STREAMING
23
Instart Logics solution Web Application
Streaming

• High Performance plus high quality
• Leverages dramatic advances in capability of
  browsers/JavaScript
• Full CDN replacement, same integration process,
  transparent to users
• Works equally well for all devices, as well as
  desktop

Web Application
24
Web App Streaming vs CDN / Application Delivery
Web Application
CDN
Web Application
25
How Traditional Image Delivery Works
1,500 KB of JPG/PNG
2 Mbps
26
How Instart Logic Image Streaming Works
1,500 KB of JPG/PNG
Initial 500 KB Next 1,000 KB
2 Mbps
27
IRIS Image Resize as a Service
/brownie.jpg
/brownie.jpg
/brownie.jpg?resizewidth300
750 x 422 283KB
300 x 169 28 KB
750 x 422 283KB

• Single high quality version on web server
• Developers can request any size they want
• Instart Logic will resize images during delivery
• Get your performance and conversions back

28
A unique client-cloud architecture for streaming
apps
Application Intelligence
Application Virtualization
Web Application
Instart Logic Cloud
(30 Global locations)
Browser API Resources
Application Server
Web Browser

• Designed as a full replacement for a CDN
• No changes required for you or end users

29
Call to action

• Optimizations
• Concepts similar to JIT, Profile driven compiler
  optimizations
• New and novel web-app optimizations
• Use asynchronous and distributed programming
• Distributed storage and caching
• Client-cloud optimizations
• Performance monitoring and measurement
• Data analytics
• We have full-time and intern positions!!

30
Q/A?
31
(No Transcript)
32
Agenda

• Current approaches to desktop, mobile, and tablet
  sites
• Responsive sites function and performance impact
• Image quality and performance impact on
  conversions
• New challenges with modern web delivery
• A new modern solution for fast responsive
  websites
• Demo and customer case studies

33
Web Application Streaming Demo
34
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 CDN
• Conversion Boost
• 16.8 overall
• Up to 27 for tablets
• Up to 126 for smartphones

35
Case Study Bonfaire
Our goal is to create a high-end luxury
experienceto draw users in, get them immersed.
Working with Instart helped us nail that goal

• Keiron McCammon, CEO and Founder

• Switched from CDN
• Using large immersive images
• Dramatic performance boost
• 2x improvement in page load times
• Offloaded backend servers

36
Summary

• Responsive websites can help tame the
  multi-screen world
• But performance needs to be a key part of your
  strategy
• Images are a big impact on performance
• Replace your CDN with Instart Logic
• Make your existing web experiences dramatically
  faster
• Enables high-resolution images with performance
• Turn your responsive sites into adaptive sites
• Improves conversions with no changes for you or
  your users
• Request a free trial of the service on our
  website

37
Extreme image performance without quality loss

• Mehrdad Reshadi (mreshadi_at_instartlogic.com)
• Lead Software Architect

38
Increase conversions with a faster responsive
mobile website with a new approach to delivery