Your title can go here.

Extreme image performance without quality lossMehrdad Reshadi (mreshadi@instartlogic.com)Lead Software Architect

1

Images & User ExperienceProblem: dealing with large images

Large beautiful imagesAre essential for user experienceCan hurt user experience!Specially on mobile devices2 | Confidential and proprietary

2

Mobile website approachesDesktop site for allIgnore mobileDedicated desktop, with an m. siteLimit mobileDedicated desktop, mobile, and tablet sitesInvest on separate sitesResponsive websites Single site adapts to the deviceAdapt both Presentation & Performance

3

The first approach is to use a desktop site for all. And certainly when smartphones and tablets started popping up that was really commonApple and the Android vendors actually designed their mobile products to deal with this but its not idealCertainly on the smaller devices there is a lot of zooming and scrolling around which is not a good user experienceAnd trying to use tablets with a site designed for mouse clicks can be a challengeSo then we started seeing people building dedicated mobile sites, these are optimized for the screen size and in many cases the resource constraints of mobile devicesAnd then today we see some people with tons of resources (really only the biggest web properties) doing three dedicated sitesDesktop, mobile, and touch or tabletNow the forth one which I wanted to focus on more today is the idea of a responsive websiteThis is a new approach that promises a single site for all you end users devices. Its a really compelling idea, write once and run on anythingAnd as the mobile device vendors keep spitting out new screen sizes this is becoming more an more attractive3

Whats a responsive website look like?4

At a high level its a website that automatically responds to the capabilities of the end users deviceThe biggest item tends to be around the screen sizeDesktop lots of room, display everythingDisplay less and display longer on smartphones and tabletsMany times you will see this concept of a fluid grid used like you see here.On the desktop and laptop all 7 areas are displayedOn the tablet you only see four itemsAnd on the smartphone 3The other items may he hidden or would be shown below as the user scrollsIm going to be using the starbucks website as an example so let me build that outAnd you can see that they are using this grid approach The grids which include images and text change size depending on the screen sizeNow to pull this off web developers and designers generally use 3rd party libraries or toolsSome examples are wordpress themes that are built to be responsiveAnd third party libraries that generally use something called media queries to determine screen resolutionsThis is not a responsive design webinar so Im not going to go into those details.

4

Whats the performance look like?

Firefox5Mbps wired1.7 MB3.9 seconds

Safari on iPad 4 3G3.1 MB94 seconds

Chrome 5Mbps wired1.7 MB3.6 seconds

Safari iPhone 53G1.9 MB38 secondsSource: webpagetest.org, Appurify.webpagetest.org

So lets say you had unlimited bandwidth and system resources then responsive sounds awesome.You have one way to create your site and it changes for each device.But nothing in life is free rightThe problem with what Id say is the first generation of responsive websites is the performance can be really poorAnd ultimately the speed of display and the interactivity is a key part of the user experienceSo I used a couple of free tools webpagetest.org and appurify to test the performance of the starbucks siteAnd the results were a bit shockingYou can see on the desktop and laptop the page load times are under 4 seconds which is decentNow lets look at the tablet and smartphone. These are both running on mobile network connectionsAnd you can see the performance is really poorI cant imagine hanging around to load up this site if Im on the run looking for the closest starbucksAnd look at the download sizes, thats a ton of data

Chromehttp://www.webpagetest.org/result/140222_XD_4NY/

Firefoxhttp://www.webpagetest.org/result/140222_QG_539/

iPad 4 @ 3Ghttp://appurify.webpagetest.org/result/140222_58_3/

iPhone 5http://appurify.webpagetest.org/result/140222_7P_6/

5

Whats going on?Same images (and data) sent to every deviceExpensive resizing on the client sideSolution: Right image for each device

750 x 422 283KB

300 x 169 283 KB 750 x 422 283KB

6

So digging in a little deeper lets figure out whats going on.The big download sizes on the mobile devices was a hintAnd it turns out starbucks is doing something fairly common for a responsive siteThey are sending the desktop images which are nice and big high resolution images downAnd then resizing them on the client sideSo look at the original size and resolution 750x422 and 283kb of space, that full image is shown on the desktop siteBut then for the smartphone its actually downloading the full 283kb image and then resizing it on the client sideNow as I said this is really very common with responsive websites, its really nothing specific to starbucksI am a big fan of starbucks and happy customer so Im not picking on them.But this is a big performance boo-boo, you not only download a bunch of extra data But you load the end device up by making it size down imagesThe solution here is to send a resized image from the backendIll talk more about how instart logic can help with that later in the presentation

6

Big, high-resolution images increase user engagementbut mean slower page load times

7

You cant blame starbucks for using bigger and better images. Intuitively to most of us bigger and better images of products are more compellingI actually now have a craving for a starbucks brownie after seeing it on their siteWithout the ability to hold the real thing in your hand the more detail you can see when making a purchase decision the better. And it turns out the data supports this as well. Numerous studies including those from eBay, Skinner Auctions, and Dell have found that bigger better images reduced bounce rates And increased conversions from 5-63%. So big and better images are a good thing right? Well yes but they can mean slower page load times

Sources: http://www.ecommercebytes.com/cab/abn/y13/m05/i06/s01http://webperformanceguru.files.wordpress.com/2011/07/19986_whatmobileuserswant_wp.pdfttp://wwwconference org/www2011/proceeding/companion/p45 pdfhttp://econsultancy.com/blog/62391-do-bigger-images-mean-improved-conversion-rates-three-case-studies

7

Frustrates your mobile/tablet users the mostSource: Keynote

2.99seconds14.3seconds

15.8secondsSource: Keynote Systems, Average response time for retail sites across devices

The problem with big beautiful images is they impact performance, we saw that with the starbucks exampleBut this looks like its actually a fairly widespead problemThis is data from Keynote systems that does web page performance testingAnd this is the average response time for retail sites across various devicesThis is data from December 2013 so its fairly recentAnd you can see that similar to what we saw with starbucks The performance looks good on desktops but really suffers when you look at users on devices8

Poor load times destroy conversions

0-11-22-33-44-55-66-77-88-99-1010-1111-1212-1313-1414-5>15Load Time (seconds)

Population (%)Conversion rate (%)Conversion rate vs. Load TimeSources: Walmart, Amazon, GlassesDirect

And the effect of poor performanceIt destroys your conversionsThis is something that has been proven time and time againThis data is from Walmart but you can also find studies from Amazon, GlassesDirect and othersShowing the same thing, poor performance negatively impacts conversionsGenerally after 4 seconds it gets really badSo going back to the numbers from earlier the desktops are under 4 secondsBut the mobile devices not so much9

Problem : Web delivery designed for desktops10

Last MileMiddle MileFirst Mile

Bottleneck100ms10ms

CDNs

ADCs

So whats the problem?Well the existing web delivery systems were designed 10+ years ago when the world looked very differentThe bottleneck was from the backend web servers to the edge of ISP networksThe last mile to the end user was a nice wired connectionSo the focus was on solving the middle of the internet bottleneck

10

Whats changed #1: Wireless Networks and DevicesBottleneck

Edge

Internet

11

So now whats changed?The first thing is the rise of wireless networks and devicesUsers have moved from wired to private and public wifi, 3g, and 4g technologiesAnd in doing so the bottleneck for web delivery has shifted pass the edge of the ISP networks where the old vendors focusedTo the wireless last mileAnd the wireless networks are really where the problem is today. The delays on those networks can actually be many times that of the core of the internet where those other vendors were focusing11

2014Whats changed #2: Big Complex Sites2003

12

Now the second problem is the web sites themselves have radically changed.10 years ago we had desktop optimized websites with fairly low levels of interactivity and immersivenessAnd every user essentially got the same user experienceNow we have this great big web sites with lots of images, interactivity, javascriptAnd they are super personalized so each visitor gets a unique experienceThe result of all this is first there is a lot more data to download to the end users device to make a web page show upAnd second each user gets a very unique experience so the old keep a copy of a website close to the end users approach breaks downSo these old systems like CDN and ADCs just were not built for this new world12

The New Bottlenecks: Browser Mechanics and Last-Mile Latency13 | Confidential and proprietary

High resolution displaysImage heavy design patterns

HTML 5 adoption

13

Performance vs. QualityCurrent responsesIgnoring performance at the expense of user experienceWeb app developers creating lower quality mobile experiences Automated quality reduction systems from CDNsResultPoor user experience, poor conversions, high bounce ratesReducing download size can improve load timesBut ultimately does not deliver a great user experience

14

And so what happens is you start having to make this tradeoff between performance and quality of experience14

Image OptimizationBrowsers try to not block on image downloadTechnically, page can be interactive before images downloadPractically, user has to wait for important information to arriveSimple modeld: time to download contentNetwork boundu: time for user to see somethingDownload Decode Render

15 | Confidential and proprietary

networkcpu

Goal is to trade some CPU to compensate network issues15

Original ImagesUser sees all info after all images are fully downloadLarge image => slow download => high wait time16 | Confidential and proprietary

d1r1downloadrenderAssume 1connection

d2r2(d1+d2) U

Individual Image OptimizeGoal: reduce download and render timeRemove unnecessary metadata from image (Photoshop )Resize for each device/screen typeCompress un-important images moreUse browser specific image formats when possibleWebP on Chrome, JPEG XR on IE, Experiment with other formats on different browsers17 | Confidential and proprietary

JPEG XR: extended range17

Progressive ImagesOverlap download and rendering of imagesConvert to progressive JPEG or JPEG XRStill download of one image, blocks other images18 | Confidential and proprietary

d1r1downloadrenderAssume 1connection

d2r2(d1+) U

18

Split Progressive ImagesUse smaller (progressive?) images firstLoad actual images after all images are loaded replace the small onesMore complexMore download => can starve other tasks, more cost on the server19 | Confidential and proprietary

d'1r'1downloadrenderAssume 1connection

d'2r'2(d1+) U d1

d1r1

d2r2

Stream ImagesSend only part of the images firstLoad rest of images laterSame download as before, but faster information load20 | Confidential and proprietary

d'1r'1downloadrenderAssume 1connection

d'2r'2(d1+) U d1

d"1r"1

d"2r"2

Choosing Best OptimizationMost effective optimization depends on the many factorsDevice, image type (even content), network Choosing proper optimization may require significant investment

Instart Logic application streaming technologyAutomatically detect the best optimizationApply to each image transparently with no developer investment21 | Confidential and proprietary

Streaming disrupted downloading

FROM DOWNLOADSTO STREAMING

FROM DOWNLOADSTO STREAMINGFROM DOWNLOADSTO STREAMINGADC

CDN

Video

x86 Applications

Web Applications22

So we looked at these challenges and really saw an opportunity.And we got some inspiration from looking the past experience with video deliveryIf you look at earlier challenges around video delivery on the internet.10+ years ago users were forced to download full files before they could view them.Then real networks and macromedia invented video streaming, you send down the most important information first and then bring down the rest in the backgroundAbout 5-6 years ago a bunch of companies figured out how to do this with windows applications, and if you download office from Microsoft they are using windows application streaming technology to let you start using word right away and then the other parts of office come down in the background.We are doing the same thing for web sites and web apps, we bring down the most important stuff first get the user seeing the page and then bring the remainder down in the background.22

Instart Logics solution: Web Application StreamingHigh 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

23

So what we are doing is being smarter about what and when we send data to the end users device.We take bigger components in your web site or app like images and html and divide them into smaller componentsAnd then we send the most important information first, to reduce the time for a user to interact with a website dramatically and then bring the remainder of the information down in the background providing a full fidelity experience

It gives you high performance plus high qualityAnd leverages the latest advances in the capability of web browsers and javascriptIts designed as a full cdn replacement with the same easy integration process and its totally transparent to end usersAnd while it was designed for modern web delivery challenges to devices its works just as well for desktops 23

Web ApplicationWeb App Streaming vs CDN / Application Delivery

Web Application

CDN24

This is a quick high level comparison to drive the point home.We are not really changing the total amount of data going down to the endpoint we are just being smarter about sending the most important information first, but sending ultimately the full fidelity experience.Whereas with the old world of downloads you the browser has to download a bunch more information up front before it can display the webpage24

How Traditional Image Delivery Works2 Mbps1,500 KB5.8 Sec

Ready1,500 KB of JPG/PNG

25

Traditional delivery systems dont understand the structure of images so they send all the image information up frontThat means the user needs to download much more data up front that is actually required to start seeing the web siteIn this example lets assume the tablet can download two things at a time and has a 2mbps connection.It starts downloading the images 2 at a time and displaying them to the userAnd you can see it has to download all the image data for the first two images before it can move on to the next imageAnd then it takes close to 6 seconds to paint the screen.

25

How Instart Logic Image Streaming Works2 Mbps1,500 KB of JPG/PNG

Initial: 500 KBNext: 1,000 KB500 KB1.9 Sec

1,000 KB3.6 Sec

Ready26

With image streaming from Instart Logic what happens is we analyze the images since our service understands JPGs and PNGs and then we divide the images into two fragmentsThat allows us to paint the screen in two passes vs. a single longer pass with the traditional case.And so here we send about a third of the data up front which takes about 2 seconds here.And then the screen is painted for the user, they can interact and click and see the pageThen we bring down the remainder of the information in the background to delivery the full fidelity experience.

26

IRIS Image Resize as a ServiceSingle high quality version on web serverDevelopers can request any size they wantInstart Logic will resize images during deliveryGet your performance and conversions back

750 x 422 283KB

300 x 169 28 KB 750 x 422 283KB /brownie.jpg/brownie.jpg/brownie.jpg?resize=width:30027

Earlier I talked about the problem I see with many responsive websitesAnd thats sending desktop images to mobile endpoints which we saw really impacted performanceIn the desktop case you can send a big image to a desktop or laptop And you saw how our image streaming technology can make that dramatically faster But for the tablets and smartphones what you want to do is resize the images on the backendNow if you had to go build your own image resizing system its a lot of work for each customerBut luckily for you we have a solution for this called IRIS or image resize as a serviceThis allows you to continue to have a single image on your webserver say the desktop versionAnd then your developers can simply ask for different resized versions from our serviceIts super simple to use where you just add a few instructions on the querystring.We resize the images on the fly and send them down to the different devicesWe can even write rules for you so that for say an iPhone or iPad we will just scale down the images in a uniform waySo you can see that for the brownie image here we shaved a ton of data off what needs to go down to the smartphoneSo this lets you get your performance and conversions back and keep your responsive website27

A unique client-cloud architecture for streaming appsApplication Server

Web ApplicationBrowser API & ResourcesApplication VirtualizationApplication IntelligenceNanoVisor.JS

Web Browser

Instart Logic Cloud(30 Global locations)28Designed as a full replacement for a CDNNo changes required for you or end users

So how do we do all this magic, we have a great new type of architectureIts the world first client-cloud architecture for web deliveryIt combines the use of web application virtualization technology using a small javascript library called nanovisor js on the client sideWith application intelligence in our cloud that actually understands your web sites and applicationsIts designed as a full replacement for a traditional CDN so we have 30 different delivery locations around the world and provide the same offload capability as a CDN but with much faster performance.The dual sided architecture allows us to have very tight control over the web delivery process and use application intelligence to send the most important information to the end users systems first.

28

Call to actionOptimizationsConcepts similar to JIT, Profile driven compiler optimizations New and novel web-app optimizationsUse asynchronous and distributed programmingDistributed storage and cachingClient-cloud optimizationsPerformance monitoring and measurementData analyticsWe have full-time and intern positions!!

29 | Confidential and proprietary

Q/A?

30

31 | Confidential and proprietary

AgendaCurrent approaches to desktop, mobile, and tablet sitesResponsive sites function and performance impactImage quality and performance impact on conversionsNew challenges with modern web deliveryA new modern solution for fast responsive websitesDemo and customer case studies

32

We will start out with a quick discussion on the different ways people are dealing with all the various web access devices these daysAnd Im going to drill down into the approach of building responsive websitesIll talk about how they work with an real site as an example and then we will look at the performance impactI also wanted to share some third party data around the impact to conversions of using bigger higher quality images but at the same time look at how performance can impact conversions as well and talk about the balance there.They I wanted to drill into some of the reasons we are seeing challenges with performance around modern web deliveryAnd then Ill talk about some more modern solutions to get the performance back along with a demo and a couple of customer case studies32

Web Application Streaming Demo

33

So now I wanted to show you a demo of this in actionThis is a ecommerce site with a bunch of images going through a legacy CDN and through Instart Logics systemYou can see images are displayed dramatically faster with Instart logic vs. the traditional approachBut with the same quality of experienceSo now lets talk about how we actually do this.33

Case Study: Dollar Shave Club

Switched from CDNConversion Boost16.8% overallUp to 27% for tabletsUp to 126% for smartphones

This was the single most impressive conversion win we have experienced to date for anything we have done.Todd Lehr, VP Engineering34

So Dollar Shave club is one of our great existing customers. And just for full transparency I am also a dollar shave club customers. I use their razors every day to shave.When they were evaluating our solution they did a 3 week A/B test and sent half their users thought their existing CDN and then half through Instart LogicAnd they saw some dramatic results in fact you can see from the quote here that switching from a CDN to Instart Logic was the single most impressive conversion win. And they had actually done quite a bit of optimization with A/B tests around making buttons bigger, changing the calls to action, etc.What they saw was almost a 17% improvement in conversions for everyoneAnd then whats really interesting is that the tablets saw a 27% improvement and for one of the most popular smartphones accessing their site they saw a big 126% improvement.

34

Case Study: Bonfaire35

Our goal is to create a high-end luxury experienceto draw users in, get them immersed. Working with Instart helped us nail that goalKeiron McCammon, CEO and Founder

Switched from CDNUsing large immersive imagesDramatic performance boost2x improvement in page load timesOffloaded backend servers

Bonfaire is another one of our great customers, and they were actually so successful they were acquired recently.They wanted to create a really high end luxury online experience and so they used great big images and lots of them on each page.They were using a traditional CDN and switch over to Instart Logic and saw some dramatic performance results with a 2x performance improvement on their page loadtimes.And not only did we help greatly with performance but we also offloaded their backend servers and allowed them to scale up to meet increasing customer demand during their sales. 35

SummaryResponsive websites can help tame the multi-screen worldBut performance needs to be a key part of your strategyImages are a big impact on performance

Replace your CDN with Instart LogicMake your existing web experiences dramatically fasterEnables high-resolution images with performanceTurn your responsive sites into adaptive sitesImproves conversions with no changes for you or your users

Request a free trial of the service on our website

36

So the key take aways36

Extreme image performance without quality lossMehrdad Reshadi (mreshadi@instartlogic.com)Lead Software Architect

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

38