Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Image-ine That: Image Optimization for Conversion Maximization


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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 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 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 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 @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
  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 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 - Ringmark OSS maintained by Facebook @ Native UX testing & development Works with existing W3C tests Full list of supported features across browsers: 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) Writing Cross-Browser JavaScript Polyfills Ultimate Guide to Mobile Emulators & Simulators
  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
  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
  35. 35. @yottaa #WebPerf Thank You! Follow us! @yottaa @yottaa #WebPerf