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.

Mobile Web Performance Optimization Tips and Tricks


Published on

Published in: Technology, Design
  • Be the first to comment

Mobile Web Performance Optimization Tips and Tricks

  1. 1. Mobile Web Performance Optimization<br />Guy Podjarny, CTO<br />
  2. 2. Agenda<br />Why Web Performance Matters<br />And why Mobile Web Performance Matters<br />Web Performance Optimization<br />How Mobile is different than Desktop<br />Mobile Optimization Techniques<br />Measuring Mobile Performance<br />Summary<br />
  3. 3. Why Web Performance Matters<br />Site Speed Impacts Revenue<br />Increases conversions and reduces abandonment, across industries<br /><ul><li>Site Speed Impacts Google Page Rank
  4. 4. Assumed to affect other search engines as well</li></ul>3<br />Shopzilla: 5s load time improvement<br />KISSMetrics: Page Abandonment vs. Load Time<br />
  5. 5. Why Mobile Web Performance Matters<br />Mobile Browsing is Exploding<br />Expected to pass desktop browsing by 2014<br />4<br />Mobile Users are Impatient<br />58% Except faster or equal speeds to desktop<br />Only 11% accept real delays<br />
  6. 6. Front-End vs. Back-End Performance<br />Back-End Performance<br />Time to generate page<br />10% of page load time<br />Front-End Performance<br />Network Time<br />Browser Time<br />90% of page load time<br />5<br />Source:<br />
  7. 7. Front-End Optimization<br />FEO: Front-End Optimization<br />Addresses 90% of the problem<br />Keys to FEO:<br />Reduce Requests<br />Reduce Bytes<br />Do More in Parallel<br />6<br />
  8. 8. FEO in Mobile vs. Desktop<br />Mobile Browsing has unique challenges<br />Different types of Mobile WPO techniques<br />Unique to mobile<br />More important on mobile<br />Tuned for mobile<br />Equally important on desktop and mobile<br />We’ll take a holistic approach instead<br />Describe the mobile challenges<br />Describe the solutions, using all of the above<br />7<br />
  9. 9. Mobile front end optimization<br />8<br />
  10. 10. Mobile Web Performance Traits<br />Challenges:<br />Slower & Asymmetric network<br />Different Connection Model<br />Weaker CPU<br />Smaller Caches<br />Form Factor vs. Platform Compatibility<br />Opportunities:<br />Smaller screen size<br />Broad HTML5 Support<br />Relatively new browsers (no IE6 equivalent…)<br />9<br />
  11. 11. Slower & Asymetric Network<br />Download Speed 3x slower than DSL/Cable<br />Upload Speed 5x slower than Cable<br />Similar properties to DSL<br />Low Reliability<br />17% of connections fail to maintain reasonable speed<br />High initial connection cost<br />Average 2.5 seconds<br />Blaze study shows:Number of reqs is the top slowdown factor on mobile<br />Total number of bytes the top factor on desktop<br />10<br />
  12. 12. Slow Network Solution: Reduce Reqs<br />Consolidate CSS & JS Files<br />Inline small CSS & JS <br />Download size impact is minor after gzip<br />Especially useful for light mobile sites<br />Embed CSS Images into CSS <br />Using data URIs (data:image/png;base64,…)<br />Data URIs supported by all major mobile browsers<br />Only load images as they scroll into view<br />Highest impact on smaller screens<br />11<br />
  13. 13. Slow Network Solution: Reduce Bytes<br />Resize images to screen size<br />Desktop resolution: 85% are over 1024x768<br />Recent mobile resolution: 480x360(Torch), 800x480 (Nexus S), 960x640(iPhone 4), <br />Shouldn’t send the same image to both<br />Properly compress images<br />Enable lossless compression, drop metadata<br />Avoid excessive image quality, it doesn’t show<br />Enable gzip Compression<br />All mobile browsers that matter support gzip<br />12<br />
  14. 14. Different Connection Model<br />Small Max # Connections<br />Android, Blackberry, Nokia<br />Less max conn on IE Mobile<br />HTTP Pipelining on Android<br />Only browser to do so?<br />Expensive Connections<br />Slower Hardware<br />Slower Network<br />13<br />
  15. 15. Different Connection Model: Solutions<br />Reduce domain sharding<br />2-3 shards on iOS<br />No sharding on other devices<br />Reduce 304 responses<br />Wasteful requests, wasteful connections<br />Use versioning with far future expiration<br />Verify support for HTTP Pipelining<br />Most major web servers support it today<br />14<br />
  16. 16. Weaker CPU = Slower JavaScript<br />Results of SunSpider JavaScript benchmark<br />Measured in duration, lower is better<br />Impacts evaluation of JavaScript too<br />Estimated at 1ms per KB<br />Seems to slow down image rendering as well<br />Seen in Blaze Study, still being verified<br />15<br />
  17. 17. Weaker CPU Solutions<br />Make JavaScript Async to Page Load<br />Download, eval and exec block page load<br />Async JS avoids delays to rest of page<br />Remove unused code<br />browser-specific code, full 3rd party libraries, Flash…<br />Defer evaluation of JS not needed for load<br />Fetch via XHR<br />Fetch via Iframe<br />Serve in HTML comment, eval on-demand<br />16<br />
  18. 18. Smaller Caches<br />Persistent Cache Sizes<br />After Browser Process Restart<br />iOS Memory Cache varies (20-100 MB for iOS 4.3)<br />Average mobile page size is ~400KB<br />Mobile users browse for 74 mins/day on average<br />Desktop users visit 88 sites/day, mobile likely similar<br />Your page not likely to be in the cache tomorrow<br />17<br />
  19. 19. More Mobile Cache Problems<br />Older phones strongly limit individual file size<br />iOS 3.2 only caches pages under 25KB unzipped<br />Cache eviction policy not simple<br />Not a simple Least-Recently-Used<br />Seem to prefer far-future expiry dates<br />Android cacheability depends on device<br />Above and beyond the version<br />Cache eviction policy may change as well<br />18<br />
  20. 20. Smaller Cache Solution: localStorage<br />Use HTML5 persistent storage for caching<br />Called localStorage<br />Available on all major mobile platforms<br />Doesn’t expire <br />Survives browser reset and power cycle<br />Size limit is usually ~5MB<br />Most useful for caching JavaScript & CSS files<br />Using for images will quickly consume the 5MB<br />Implementation Tips<br />Ensure proper version control and clear old items<br />Handle case of not enough space<br />Ideally create a Least-Recently-Used Cache<br />In addition, use far-future expiry dates<br />19<br />
  21. 21. Optimizing for Form Factor vs OS<br />Mobile OSes impose technical limitations<br />Notably having no or poor Flash support<br />Simplifying site to match smaller screen helps<br />Mobile sites are usually simpler and faster<br />Tablets carry the same limitations<br />But take away the “mobile site” solution<br />Result: Tablets force us to truly improve perf<br />But a mobile site for phones can still help usability<br />20<br />
  22. 22. Form Factor vs OS: Solutions<br />Don’t just minimize content – fix performance<br />Mobile websites are for usability, not perf<br />Create an adaptive website<br />E.g. Determine image size by client width<br />Download code on-demand<br />E.g. Don’t download desktop JS in mobile site<br />Progressive Design helps address usability<br />We focus on performance…<br />21<br />
  23. 23. Measuring mobile web perf<br />22<br />
  24. 24. Mobitest<br />Mobile Web Performance Measurement<br />Free Online Service:<br />23<br />
  25. 25. Different Locations<br />3 Locations<br />Ottawa<br />Amsterdam<br />Dulles<br />Sponsored Non-Ottawa Locations<br />Aaron Peters<br />Patrick Meenan(WebPageTest)<br />Interested in hosting a location?<br />24<br />
  26. 26. Different Devices<br />25<br />
  27. 27. Measures Page Load<br />Measures Load Time & Page Size<br />Supports Video Visualization<br />Calculates Load Time Percentiles<br />Based on past results, per device<br />26<br />
  28. 28. Details Results Per Run<br />Supports Multiple Runs<br />WPT Waterfalls<br />Detailed HAR Viewer<br />27<br />
  29. 29. Mobile FEO – Summary <br />Reduce Requests<br />Consolidate CSS & JS <br />Embed CSS images in CSS<br />Inline small CSS & JS files<br />Load images only when visible<br />Reduce Bytes<br />Resize images to screen size<br />Properly compress images<br />Enable gzip Compression<br />Minimize Connections<br />Manage domain sharding by client<br />Reduce 304 responses<br />Verify support for HTTP Pipelining<br />Defer and minimize JavaScript<br />Download and Execute JavaScript asynchronously <br />Remove unused code<br />Defer evaluation of JS not required during page load<br />Cache using localStorage<br />Primarily for CSS & JS Files<br />Use far-future expiry dates<br />Measure your changes<br />28<br />
  30. 30. Blaze Automated Front-End Optimization<br />Blaze automates Front-End Optimization<br />No Software, Hardware or Code Changes needed<br />All the pitfalls and complexities taken care of<br />Blaze optimizes Mobile & Desktop Websites<br />Applying the right optimizations for each client<br />Contact us for a free reporton how much faster yourmobile site can be at<br />29<br />
  31. 31. 30<br />Questions?<br />Contact us at<br /><br />Thank You!<br />
  32. 32. External Sources<br />31<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />