@yottaa #WebPerf

that

Brought to you by:

Image optimization for desktop & mobile

@yottaa #WebPerf

Imagine All The People…Growth of Webpage Footprint & Number

of Requests (1995 to 2012)

(Sources: Demenech 2007, Gomez 2008, Charzinski 2010, Souders 2012)

Ajax / HTML5 Becomes

Mainstream

Global Internet Devices Shipment (2005 to 2016, Unit: 500M)

(Source: Business Insider Mobile Report 2012)

2005

Personal Computers

Smartphones

Tablets

2006 2007 2008 2009 2010 2011 2012E2013E2014E2015E2016E

@yottaa #WebPerf

½ billion mCommerce shoppers by 201671% of smartphone users shop on their mobile

48% of retail shopping already on mobile

@yottaa #WebPerf

@yottaa #WebPerf

It’s Easy If You TryWebsite Visits by Device

Smartphone Revenue / Session

@yottaa #WebPerf80% of mobile revenue Derived from visitors browsing the full site from a mobile device

35% of mobile visitorsPrefer to use a full site over an m.site whenever the option is provided

(souders)

One in fiveElectronic purchases is made using a mobile phone

(BuzzCity)

@yottaa #WebPerf

Living for Today…

64%OF SMARTPHONE

USERS EXPECT PAGES TO LOAD IN

UNDER 4s

$1BnAPPAREL &

ACCESSORIESPURCHASES

in Q113

71%Of all retail transactions

SMARTPHONEUSERS SHOPVIA MOBILE

48%

Expect mobile to be fasterthan desktop

85%Will go to a competitorto transact

42%Will neverreturn toyour site

29%

@yottaa #WebPerf

51% say websites hard to navigate & use

46% say product images are too small

41% are concerned about security26% feel that checkout is frustrating

41% are materially concerned about security

@yottaa #WebPerf

@yottaa #WebPerf

Nothing to Kill or Die For…Slow web performance

directly impacts conversions

The effect is more severe for mobile websites

Web Pages are GROWING• > 1.4MB, > 80 round trips• By 2015 pages will be > 2MB• Mobile devices & networks less

powerful & render slowly

Mobile SLOWER, shaky• Download speed 1Mbps – 31Mbps• Environmental factors impact speed• Mobile provides less feedback

And it’s all highly VARIABLE

@yottaa #WebPerf

@yottaa #WebPerf

Users perceive sites to be 15% slower than they really are

@yottaa #WebPerf

@yottaa #WebPerf

No Need for Greed or Hunger…

• What makes mobile sites larger?– Fonts– Retina Images– Audio– Video

• What makes sites slower?– All of the above– 3rd party tags

< 300 KB 300-600 KB 600-900 KB 900-1200 KB 1200-1500 KB

1500-1800 KB

0100020003000400050006000700080009000

Series 1

Series 1

< 10 10-20 21-30 31-40 41-50 > 500

2000

4000

6000

8000

10000

12000

14000

Series 1

Series 1

@yottaa #WebPerf

• Yottaa case studies

http://bit.ly/15aVu1E

Challenge 1.4 MB page, heaviest 20% on web

Goal Increase traffic & conversions, incl. mobile

Solution Reduce Requests 41%

Results 53% faster loads, increased traffic 100%

“With Yottaa turned on, the Big Train site just flies on mobile devices.” Jim Wendt, eCommerce Marketing Manager

@yottaa #WebPerf

@yottaa #WebPerf

Image-ine that…

20%

4%

5%

70%

1%

Average Bytes per Page by Content Type on Mobile

ScriptsStylesheetsHTMLImagesOther

@yottaa #WebPerf

@yottaa #WebPerfhttp://bit.ly/133ijam

Challenge User Experience Issues

Goal Increase traffic & conversions

Solution Accelerate page rendering

Results 30% more conversions

“That’s a very real figure indicating more sales and more money in my pocket.” James Ness, Founder and President

@yottaa #WebPerf

@yottaa #WebPerf

Analyze & Optimize

http://bit.ly/17nUE7z@yottaa #WebPerf

@yottaa #WebPerf

Understand Demographics, Entry Points

@yottaa #WebPerf

@yottaa #WebPerf

Responsive Not.

@yottaa #WebPerf

@yottaa #WebPerf

3rd Parties = Distributed Problems

http://bit.ly/1dsV3b7

@yottaa #WebPerf

Challenge: Slow 3rd party content loading

Goal: Improve user experience, site speed

Solution: Sequence social content rendering

Results: 53% faster loadResults: 53% faster load

@yottaa #WebPerf

Challenge: Slow page rendering impacts conversions

Goal: Improve page load time, engage more users

Solution: Optimize images, sequence contentResults: 4X faster load

@yottaa #WebPerf

@yottaa #WebPerfhttp://bit.ly/15aRBtG

Pick Your Battles

@yottaa #WebPerf

@yottaa #WebPerf

All Things Are NOT Created Equal

DNS Resolution

ServerConnection

Server‘Wait Time’

Page Downloaded

Browser Title Bar Appears

Page Starts to Render

Page is Displayed

Ready for Interaction

• Network bottlenecks

• Number of round trips

• Content Size & Complexity

− Page asset weight (4.3 MB)

− Number of requests (304)

− 3rd party widgets

− Use of CSS and Javascripts

• Serialization (sequential loading & execution of individual page assets)

LEGENDDNSResolution

Content Delivery

User ExperienceDelivery

Challenges

StartYour Website

0.013Sec

1.056Sec

2.116Sec

11.389Sec

1.687Sec

0.748Sec

0.062Sec

@yottaa #WebPerf

Compress

Aim LOW– Lowest acceptable

quality

Investigate Formats– WebP?

Be Progressive– Can lead to better

perceived perf

@yottaa #WebPerf

26% smaller than PNG 25-34% smaller than JPEGNo planned Firefox support

SVGs are resolution independent…but much heavier than PNGs

Progressive JPEG enables faster perceived loadDrop 75%! Try 2x display size w/high compressionLossy/Lossless optimizations like ImageOptim-CLI

@yottaa #WebPerf

CSS Sprites & DataURIsInclude multiple images in a page using only a single HTTP request with no JavaScript

Example Sprite w/Reference Grid Mobile Benchmark: DataURI vs. Sprite

@yottaa #WebPerf

@yottaa #WebPerf

Latest DIYSrcset (webkit)

Picture element

12345

<h1>    <img alt="The Breakfast Combo"         src="banner.jpeg"         srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, \ banner-phone-HD.jpeg 100w 2x"></h1>

1234567

<picture width="500" height="500"> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="med.jpg"> <source src="small.jpg"> <img src="small.jpg" alt="" lazyload> <p>Accessible text</p></picture>

@yottaa #WebPerf

@yottaa #WebPerf

Beware the DIY Ripple Effect

Pitfalls– Reflowing– Variable Support– Hairy Code

Consider…– Moving optimization to deploy time

• e.g. grunt-responsive-images or ImageMagick (node)

• For PNG: ScriptPNG, ImageAlpha, ImageOptim, advPNG, PNGOUT + OptiPNG or Zopfli

– Integrating a 3rd party delivery-time service

@yottaa #WebPerf

@yottaa #WebPerf

rng.io - Ringmark

OSS maintained by Facebook @ https://github.com/facebook/rng.io

Native UX testing & development

Works with existing W3C tests

Full list of supported features across browsers: http://bit.ly/1c0jDOj

Check whether an API is usable & produces expected, specified output

@yottaa #WebPerf

Modernizrjavascript library

For development with HTML5 + CSS3

Ensure support for old browsers

Checks for native browser support of new web features

Generates custom object to test what you need

@yottaa #WebPerf

Has.jsphiggins42./has.js on Github

For development with JavaScript

Self-contained tests & unified framework

Checks for native browser support of JavaScript features

Modular/a-la-carte to test only what you need

if(has("function-bind")){ // your enviroment has a native Function.prototype.bind}else{ // you should get a new browser.}

@yottaa #WebPerf

Useful Links

The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks (yes, really)

http://bit.ly/12griWY

Writing Cross-Browser JavaScript Polyfillshttp://addyosmani.com/blog/writing-polyfills/

Ultimate Guide to Mobile Emulators & Simulatorshttp://www.mobilexweb.com/emulators

@yottaa #WebPerf

Networks

@yottaa #WebPerf

@yottaa #WebPerf

AT&T Application Resource Optimizer

• All Platforms– pcap/tcpdump network trace– Wi-Fi Hotspot + Wireshark/NetMon

• iOS– Remote Virtual Interface– Uses Instruments to collect pcap over

3G/LTE

• Android – Native Collector – Requires root

https://github.com/attdevsupport/ARO

@yottaa #WebPerf

End-to-EndOptimization

InfrastructureAwareness

GeographicPresence

Last MileNetwork Presence

Device & BrowserPresence

Data Center Middle Mile Last Mile Front End

In-pageVisibility

User Interactivity

Application Sequencing

CDN FederationCloud Firewall Front End Optimization Deep Insight

• Integrate without changing code

• Optimizations applied in-flight

• Responds to user activity

• Mobility maximizing Service

• Profile-based optimization

• Just-in-time, geo-aware delivery

Site & user protection

Agile hybrid infrastructure

Mobile/Webmonitoring

• Prioritized Content

• In-Context Transformation

• Sequenced Rendering

@yottaa #WebPerf

yottaa

Mobile Performance TestingUnderstand performance across the globeSee iOS and Android end user rendering (diffs)Verify graceful degradation across various networks

Mobile MonitoringEliminate downtime, errorsUnderstand site performance & competitive positionPrioritize optimization, feature work w/historical analysis

Mobile OptimizationOvercome slow / variable networks with adaptive infrastructureOptimize dynamic content: offload bandwidth, intelligently cache, adapt imagesMaximize user experience with federated CDN delivery, global server load balancingGuarantee availability and network elasticity by analyzing and managing traffic

http://www.yottaa.com

@yottaa #WebPerf

Thank You!

Follow us! @yottaa

www.yottaa.com/signup

@yottaa #WebPerf