1. @yottaa #WebPerf
that
Brought to you by:
Image optimization for desktop & mobile

2. @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 2012E 2013E 2014E 2015E 2016E

3. @yottaa #WebPerf
½ billion mCommerce shoppers by 2016
71% of smartphone users shop on their mobile
48% of retail shopping already on mobile
@yottaa #WebPerf

4. @yottaa #WebPerf
It’s Easy If You Try
Website Visits by Device
Smartphone Revenue / Session

5. @yottaa #WebPerf
80% of mobile revenue
Derived from visitors browsing the full site from a mobile device
35% of mobile visitors
Prefer to use a full site over an m.site whenever the option is provided
(souders)
One in five
Electronic purchases is made using a mobile phone
(BuzzCity)

6. @yottaa #WebPerf
Living for Today…
64%
OF SMARTPHONE
USERS EXPECT
PAGES TO LOAD IN
UNDER 4s
$1Bn
APPAREL &
ACCESSORIES
PURCHASES
in Q113
71%
Of all retail
transactions
SMARTPHONE
USERS SHOP
VIA MOBILE
48%
Expect mobile
to be faster
than desktop
85%
Will go to
a competitor
to transact
42%
Will never
return to
your site
29%

7. @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

8. @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

9. @yottaa #WebPerf
Users perceive sites to be 15% slower
than they really are
@yottaa #WebPerf

10. @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
0
1000
2000
3000
4000
5000
6000
7000
8000
9000
< 300 KB 300-600 KB 600-900 KB 900-1200 KB 1200-1500 KB 1500-1800 KB
Series 1
0
2000
4000
6000
8000
10000
12000
14000
< 10 10-20 21-30 31-40 41-50 > 50
Series 1

11. @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

12. @yottaa #WebPerf
Image-ine that…
20%
4%
5%
70%
1%
Average Bytes per Page by Content Type on Mobile
Scripts
Stylesheets
HTML
Images
Other
@yottaa #WebPerf

13. @yottaa #WebPerf
http://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

14. @yottaa #WebPerf
Analyze & Optimize
http://bit.ly/17nUE7z
@yottaa #WebPerf

15. @yottaa #WebPerf
Understand Demographics, Entry Points
@yottaa #WebPerf

16. @yottaa #WebPerf
Responsive Not.
@yottaa #WebPerf

17. @yottaa #WebPerf
3rd Parties = Distributed Problems
http://bit.ly/1dsV3b7

18. @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

19. @yottaa #WebPerf
Challenge: Slow page rendering impacts conversions
Goal: Improve page load time, engage more users
Solution: Optimize images, sequence content
Results: 4X faster load
@yottaa #WebPerf

20. @yottaa #WebPerf
http://bit.ly/15aRBtG
Pick Your Battles
@yottaa #WebPerf

21. @yottaa #WebPerf
All Things Are NOT Created Equal
DNS
Resolution
Server
Connection
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)
LEGEND
DNS
Resolution
Content
Delivery
User Experience
Delivery
Challenges
Start
Your Website
0.013
Sec
1.056
Sec
2.116
Sec
11.389
Sec
1.687
Sec
0.748
Sec
0.062
Sec

22. @yottaa #WebPerf
Compress
Aim LOW
– Lowest acceptable
quality
Investigate Formats
– WebP?
Be Progressive
– Can lead to better
perceived perf

23. @yottaa #WebPerf
26% smaller than PNG
25-34% smaller than JPEG
No planned Firefox support
SVGs are resolution independent
…but much heavier than PNGs
Progressive JPEG enables faster perceived load
Drop 75%! Try 2x display size w/high compression
Lossy/Lossless optimizations like ImageOptim-CLI

24. @yottaa #WebPerf
CSS Sprites & DataURIs
Include 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

25. @yottaa #WebPerf
Latest DIY
Srcset (webkit)
Picture element
1
2
3
4
5
<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>
1
2
3
4
5
6
7
<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

26. @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, PNGOU
T + OptiPNG or Zopfli
– Integrating a 3rd party delivery-time service
@yottaa #WebPerf

27. @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

28. @yottaa #WebPerf
Modernizr
javascript 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

29. @yottaa #WebPerf
Has.js
phiggins42./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.bin
d
}else{
// you should get
a new browser.
}

30. @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 Polyfills
http://addyosmani.com/blog/writing-polyfills/
Ultimate Guide to Mobile Emulators & Simulators
http://www.mobilexweb.com/emulators

31. @yottaa #WebPerf
Networks
@yottaa #WebPerf

32. @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

33. @yottaa #WebPerf
End-to-End
Optimization
Infrastructure
Awareness
Geographic
Presence
Last Mile
Network Presence
Device & Browser
Presence
Data Center Middle Mile Last Mile Front End
In-page
Visibility
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/Web
monitoring
• Prioritized Content
• In-Context Transformation
• Sequenced Rendering

34. @yottaa #WebPerf
yottaa
Mobile Performance Testing
Understand performance across the globe
See iOS and Android end user rendering (diffs)
Verify graceful degradation across various networks
Mobile Monitoring
Eliminate downtime, errors
Understand site performance & competitive position
Prioritize optimization, feature work w/historical analysis
Mobile Optimization
Overcome slow / variable networks with adaptive infrastructure
Optimize dynamic content: offload bandwidth, intelligently cache, adapt images
Maximize user experience with federated CDN delivery, global server load balancing
Guarantee availability and network elasticity by analyzing and managing traffic
http://www.yottaa.com

35. @yottaa #WebPerf
Thank You!
Follow us! @yottaa
www.yottaa.com/signup
@yottaa #WebPerf