Image-ine That: Image Optimization for Conversion Maximization


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 1.3bn units
  • 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 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’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
  • 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