@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: Demenec...
@yottaa #WebPerf
½ billion mCommerce shoppers by 2016
71% of smartphone users shop on their mobile
48% of retail shopping ...
@yottaa #WebPerf
It’s Easy If You Try
Website Visits by Device
Smartphone Revenue / Session
@yottaa #WebPerf
80% of mobile revenue
Derived from visitors browsing the full site from a mobile device
35% of mobile vis...
@yottaa #WebPerf
Living for Today…
64%
OF SMARTPHONE
USERS EXPECT
PAGES TO LOAD IN
UNDER 4s
$1Bn
APPAREL &
ACCESSORIES
PUR...
@yottaa #WebPerf
51% say websites hard to navigate & use
46% say product images are too small
41% are concerned about secu...
@yottaa #WebPerf
Nothing to Kill or Die For…
Slow web performance
directly impacts conversions
The effect is more severe f...
@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
• ...
@yottaa #WebPerf
• Yottaa case studies
http://bit.ly/15aVu1E
Challenge 1.4 MB page, heaviest 20% on web
Goal Increase traf...
@yottaa #WebPerf
Image-ine that…
20%
4%
5%
70%
1%
Average Bytes per Page by Content Type on Mobile
Scripts
Stylesheets
HTM...
@yottaa #WebPerf
http://bit.ly/133ijam
Challenge User Experience Issues
Goal Increase traffic & conversions
Solution Accel...
@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 so...
@yottaa #WebPerf
Challenge: Slow page rendering impacts conversions
Goal: Improve page load time, engage more users
Soluti...
@yottaa #WebPerf
http://bit.ly/15aRBtG
Pick Your Battles
@yottaa #WebPerf
@yottaa #WebPerf
All Things Are NOT Created Equal
DNS
Resolution
Server
Connection
Server
‘Wait Time’
Page
Downloaded
Brow...
@yottaa #WebPerf
Compress
Aim LOW
– Lowest acceptable
quality
Investigate Formats
– WebP?
Be Progressive
– Can lead to bet...
@yottaa #WebPerf
26% smaller than PNG
25-34% smaller than JPEG
No planned Firefox support
SVGs are resolution independent
...
@yottaa #WebPerf
CSS Sprites & DataURIs
Include multiple images in a page using only a single
HTTP request with no JavaScr...
@yottaa #WebPerf
Latest DIY
Srcset (webkit)
Picture element
1
2
3
4
5
<h1>
<img alt="The Breakfast Combo"
src="banner.jpeg...
@yottaa #WebPerf
Beware the DIY Ripple Effect
Pitfalls
– Reflowing
– Variable Support
– Hairy Code
Consider…
– Moving opti...
@yottaa #WebPerf
rng.io - Ringmark
OSS maintained by Facebook @
https://github.com/facebook/rng.io
Native UX testing & dev...
@yottaa #WebPerf
Modernizr
javascript library
For development
with HTML5 + CSS3
Ensure support for
old browsers
Checks for...
@yottaa #WebPerf
Has.js
phiggins42./has.js
on Github
For development
with JavaScript
Self-contained tests
& unified framew...
@yottaa #WebPerf
Useful Links
The All-In-One Entirely-Not-Alphabetical No-
Bullshit Guide to HTML5 Fallbacks (yes, really)...
@yottaa #WebPerf
Networks
@yottaa #WebPerf
@yottaa #WebPerf
AT&T Application Resource Optimizer
• All Platforms
– pcap/tcpdump network trace
– Wi-Fi Hotspot + Wiresh...
@yottaa #WebPerf
End-to-End
Optimization
Infrastructure
Awareness
Geographic
Presence
Last Mile
Network Presence
Device & ...
@yottaa #WebPerf
yottaa
Mobile Performance Testing
Understand performance across the globe
See iOS and Android end user re...
@yottaa #WebPerf
Thank You!
Follow us! @yottaa
www.yottaa.com/signup
@yottaa #WebPerf
Upcoming SlideShare
Loading in...5
×

Image-ine That: Image Optimization for Conversion Maximization

542

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
542
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 1.3bn units
  • http://www.comscore.com/Insights/Press_Releases/2013/5/comScore_Reports_Q1_2013_Desktop_Based_US_Retail_ECommerce_Spending
  • http://queue.acm.org/detail.cfm?id=2510122
  • Imagine all the people…
  • Fun fact: research shows that rodeo riders are one of the (if not THE) only professions to consistently guesstimate time.
  • The total size of the markup and assets for mobile web will be significantly smaller than that delivered to desktop web.The total number of http requests for mobile web will be smaller than those delivered to desktop web.Why are Some Mobile Sites Bigger than their Desktop Counterparts?The number of mobile sites that were significantly larger than their desktop siblings surprised me. The source for the big differences were:Font usage — Some of the sites were using an old version of Typekit that downloaded SVG fonts on iPhone. These font files made the mobile version much bigger than desktop.Retina images — Sites that were using retina images. In one case, I’m not 100% certain they are retina images because they are routed through tiny src so I can only tell that file size is much bigger for the images on mobile than desktop, but not why. In the other case, both the mobile images and the retina mobile images are getting downloaded for a double hit.HTML5 Audio — HTML5 audio is embedded on the page. The browser is downloading the full mp3 file regardless of whether or not the user presses play. This balloons huffduffer.com from 122k on desktop to 2.9MB in Mobile Safari.HTML5 Video — Mobile Safari starts downloading a portion of the video in order to validate the video will work and to grab a scene from the video to use in the player. Desktop Safari wasn’t doing this.The lesson here is that if you want to really know what is getting downloaded, you need to test using something like Blaze.io’s mobile test or better yet, use a proxy like I did.
  • SVG is resolution-independent.But look at this demo of PNG vs. SVGGoogle’s WebP26% smaller than PNG, 25-34% smaller than JPEGSupported in Google Chrome, Opera, Yandex, Android and Safari and can be activated in Internet Explorer using the Google Chrome Frame plugin.Firefox does not plan to implement it. Knowing this, widespread use is unlikely for now.Progressive JPEGImpression of greater speed (quick low-res image) Improves user experience not technical performance and image size problemsKeeps image dimensions 2x display size w/higher compression75% maller image files Still be sharp on both normal and high-density screensLossy/Lossless optimizations like ImageOptim-CLI
  • http://aftonbladet.github.io/demos/responsive-images/reflow.html
  • https://github.com/phiggins42/has.js
  • http://bit.ly/133ixOB
  • Image-ine That: Image Optimization for Conversion Maximization

    1. 1. @yottaa #WebPerf that Brought to you by: Image optimization for desktop & mobile
    2. 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. 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. 4. @yottaa #WebPerf It’s Easy If You Try Website Visits by Device Smartphone Revenue / Session
    5. 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. 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. 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. 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. 9. @yottaa #WebPerf Users perceive sites to be 15% slower than they really are @yottaa #WebPerf
    10. 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. 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. 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. 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. 14. @yottaa #WebPerf Analyze & Optimize http://bit.ly/17nUE7z @yottaa #WebPerf
    15. 15. @yottaa #WebPerf Understand Demographics, Entry Points @yottaa #WebPerf
    16. 16. @yottaa #WebPerf Responsive Not. @yottaa #WebPerf
    17. 17. @yottaa #WebPerf 3rd Parties = Distributed Problems http://bit.ly/1dsV3b7
    18. 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. 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. 20. @yottaa #WebPerf http://bit.ly/15aRBtG Pick Your Battles @yottaa #WebPerf
    21. 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. 22. @yottaa #WebPerf Compress Aim LOW – Lowest acceptable quality Investigate Formats – WebP? Be Progressive – Can lead to better perceived perf
    23. 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. 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. 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. 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. 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. 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. 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. 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. 31. @yottaa #WebPerf Networks @yottaa #WebPerf
    32. 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. 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. 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. 35. @yottaa #WebPerf Thank You! Follow us! @yottaa www.yottaa.com/signup @yottaa #WebPerf
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×