Mobile Web Performance Optimization Tips and Tricks


Published on

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

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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 />
    1. A particular slide catching your eye?

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