Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Optimizing for Mobile Performance

Tim Kadlec
December 01, 2011

Optimizing for Mobile Performance

Presented at the Rich Web Experience in Fort Lauderdale, FL on 12/1/11.

Tim Kadlec

December 01, 2011
Tweet

More Decks by Tim Kadlec

Other Decks in Programming

Transcript

  1. http://flic.kr/p/5DBgES
    Optimizing for
    Mobile Performance
    presented by Tim Kadlec
    at The Rich Web Experience 2011
    in Fort Lauderdale, FL
    timkadlec.com @tkadlec

    View full-size slide

  2. It’s a mobile world

    View full-size slide

  3. http://flic.kr/p/68NZhL
    5.6 billion mobile subscriptions
    6.9 billion people

    View full-size slide

  4. http://allthingsd.com/20111010/mobile-devices-seen-doubling-by-2020-as-non-phones-dominate-wireless-airwaves/
    12 billion by 2020!

    View full-size slide

  5. http://flic.kr/p/7Pd9b9
    More smart phones and
    tablets shipped than PCs

    View full-size slide

  6. http://flic.kr/p/9w8eWL
    Mobile traffic will grow by
    26x in 5 years

    View full-size slide

  7. http://flic.kr/p/5ozJ6
    25% mobile only in US
    22% mobile only in UK

    View full-size slide

  8. http://flic.kr/p/4T2Rwa
    70%!

    View full-size slide

  9. http://flic.kr/p/4rRmGv
    Things have changed....

    View full-size slide

  10. http://flic.kr/p/53czUe
    Mobile is more than this....

    View full-size slide

  11. http://flic.kr/p/6e7uqr
    Phones are used everywhere....

    View full-size slide

  12. http://flic.kr/p/5PoENv
    ...for increasingly complex tasks

    View full-size slide

  13. Source: http://bit.ly/qap5fw
    2010: eBay mobile transactions were > $2 billion
    2009: $600 million

    View full-size slide

  14. Jeff Bezos (July 2010)
    In the last twelve months, customers
    around the world have ordered more than
    US $1 billion of products from Amazon
    using a mobile device.
    Source: http://bit.ly/oKcI3e

    View full-size slide

  15. Source: http://www.lukew.com/ff/entry.asp?1361
    Paypal: Up to $10 million mobile Total Payment Volume
    per day

    View full-size slide

  16. http://flic.kr/p/5X1QeB

    View full-size slide

  17. http://flic.kr/p/9trsE9
    More m-commerce than
    e-commerce by 2015

    View full-size slide

  18. http://flic.kr/p/3qHDNt
    If you’re not optimizing, you’re
    throwing money away

    View full-size slide

  19. http://flic.kr/p/4vg5r4
    Mobile users want
    fast experiences!

    View full-size slide

  20. 71% of mobile users expect websites to
    load as quickly, almost as quickly or faster
    on their mobile phone, compared to the
    computer they use at home
    Source: http://bit.ly/w2Dg3W

    View full-size slide

  21. In 2009, that number was 58%
    Source: http://bit.ly/w2Dg3W

    View full-size slide

  22. <= 1 second
    2 seconds
    3 seconds
    4 seconds
    5 seconds
    > 5 seconds
    30%
    14%
    21%
    24%
    11%
    18%
    12%
    How quickly should a
    mobile site load?
    Source: http://bit.ly/tB9Q3T

    View full-size slide

  23. 25%
    50%
    75%
    100%
    2009 2011
    20%
    74%
    Percentage of people who will
    bounce after 5 seconds
    Source: http://bit.ly/viowVq

    View full-size slide

  24. http://bit.ly/tVJpOJ
    Effect of delay on mobile

    View full-size slide

  25. http://bit.ly/tVJpOJ
    Effect of delay on
    returning visits

    View full-size slide

  26. Source: The business case for assuring the customer mobile Web experience

    View full-size slide

  27. http://flic.kr/p/5ASnEz
    Your visitors notice!

    View full-size slide

  28. Rollin Shelton
    Source: http://wapo.st/nXtqkd
    My default posture now, when wanting to
    check news sites, is to pretty much avoid
    The Post all together.

    View full-size slide

  29. http://flic.kr/p/66vUy5
    Phone rage

    View full-size slide

  30. http://flic.kr/p/GYjsD
    So how are we doing?

    View full-size slide

  31. http://mobile.httparchive.org/index.php
    HTTP Archive Mobile

    View full-size slide

  32. Source: http://www.gomez.com/benchmarks/sitemap/?region=US_Benchmarks
    Retail and Banking

    View full-size slide

  33. http://flic.kr/p/4mhKi5
    Room for improvement

    View full-size slide

  34. http://flic.kr/p/6e7uqr
    This is gonna hurt

    View full-size slide

  35. Source: http://bit.ly/oxwKDG

    View full-size slide

  36. Source: http://yhoo.it/nzZTMQ
    Latency sucks

    View full-size slide

  37. Source: http://bit.ly/o6mTmp
    Just how bad is it?

    View full-size slide

  38. Reduce requests

    View full-size slide

  39. http://flic.kr/p/8VoSGj
    CSS3

    View full-size slide

  40. Sorry Office Depot

    View full-size slide

  41. Image (1.23KB)
    Image (1.01KB)
    Image (137B)
    Image (155B)

    View full-size slide

  42. -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px
    background-color: #0081db;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#14a1f0), to
    (#0081db));
    background-image: -webkit-linear-gradient(top, #14a1f0, #0081db);
    background-image: -moz-linear-gradient(top, #14a1f0, #0081db);
    background-image: -ms-linear-gradient(top, #14a1f0, #0081db);
    background-image: -o-linear-gradient(top, #14a1f0, #0081db);
    background-image: linear-gradient(top, #14a1f0, #0081db);

    View full-size slide

  43. http://flic.kr/p/urBo
    No such thing as a silver bullet

    View full-size slide

  44. http://flic.kr/p/4krww7
    Replace images with Data URIs

    View full-size slide

  45. They’re a little ugly...
    data:image/
    png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAASCAMAAACQGyXoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZ
    SBJbWFnZVJlYWR5ccllPAAAAUdQTFRFFxUOJiMMFBIOkYsCjIYDioQDGxkNk40CYVwHNDALgHoENTILHRoNJSIMb
    WgFnJYBnpcBJCEMiYMDKygMPzwKWlUHREAJSUUJlo8CgXsEkIoCGBYNmJECIh8NXFgHHx0NExEOp6AAcWwFjYcD
    RkMJcm0Fgn0EHRsNUEwIY14GpJ0AcGoFIiAMT0sITEgJKCUMHBoNpp8Al5ECjogCa2YGaWQGIB0Nd3IFmZMBFhMOJ
    yQMGhgNiIIDWVQHOjcKLSoLIyAMODQKKicMVVEIPToKd3EFQj4KenQEaGQGS0cJh4EDlY8CoJkBfHcEZWAGaGMG
    hX8DZ2IGo5wAi4UDopsBlY4CeHIFRUEJXFcHdG8FKSYMeHMEmpMBV1MISkYJfnkEf3oEc24FnZcBVFAIeXQEQ0AJNj
    MLmJIBYl0Hn5gBVlEIqKEAEhAOjBZoxgAAAG10Uk5T/////////////////////////////////////////////////////////////////////////
    ///////////////////////////////////////////////////////////////////////
    AC221EsAAAEWSURBVHjabNHlVwMxDADw3u1kbGPK3NhwGe7uvuE+3En+/8/k2h6sQD70pf3l9aUNQ0Q9dj5/
    WWjFv8EQI2kAaJvA/
    7WTcKr513kgL9UkTcpar9En6ljHttBVgBFL6D4VeiI8TUAL1+ljMAQugxOZopPne3MWqY4LMCoavuEKUY3yoRC8kJYL2
    FNnXCtCwaZL/QBB0mvw3YZXuF6dSC4Z4ynqgHRwl7anTzNZ4jFojJzTVaB96y4Fwx925iKp6Doy
    +XpzL354tvauaMJVKzRH66eCnqzULh8MYP+BguEm/hu46H2EOOKkgvYr/8nZ8tHbA9XhZiM+L8kpaJrOry/uuFRK
    +78n+DPNjVo1at4Hu2PuyZcAAwA2KbSDyyYFcAAAAABJRU5ErkJggg==

    View full-size slide

  46. http://bit.ly/1nld1J
    ...but they don’t have to be hard

    View full-size slide

  47. java -jar cssembed-x.y.z.jar -o styles_new.css styles.css

    View full-size slide

  48. Inline JS & CSS
    (but be smart about it)

    View full-size slide

  49. window.locationStorage.setItem();
    window.locationStorage.getItem();
    window.locationStorage.removeItem();
    window.locationStorage.clear();

    View full-size slide

  50. http://bit.ly/r0Xwq8
    m.bing.com
    Desktop: 93kB
    iPad: 59kB
    iPhone: 198kb
    iPhone repeat: 30kb

    View full-size slide

  51. _load:function(b){
    var a=null;
    if(localStorage)
    try{a=localStorage.getItem(b)}
    catch(c){}
    return a
    }

    View full-size slide

  52. rel="stylesheet" type="text/css">
    .....

    View full-size slide

  53. <br/>RMS.Load('CUX.Keyframes.B8625FEE')<br/>

    View full-size slide

  54. Eliminate unnecessary redirects

    View full-size slide

  55. m.domain.com

    View full-size slide

  56. http://amzn.to/onTYpF
    Write better javascript
    (duh)

    View full-size slide

  57. Source: http://bit.ly/qXrMqe
    Javascript on desktop

    View full-size slide

  58. Source: http://bit.ly/oE8MK9
    Javascript on mobile

    View full-size slide

  59. Source: http://bit.ly/ot91Ee
    Don’t parse JS until needed
    1kB of JS = 1ms

    View full-size slide

  60. Use a script loader
    <br/>$LAB<br/>.script("myScript.js")<br/>.script("bonusScript.js");<br/>
    http://labjs.com/
    <br/>$script(“myScript.js”);<br/>$script(“bonusScript.js”);<br/>
    http://dustindiaz.com/scriptjs

    View full-size slide

  61. Source: http://bit.ly/gpwaa
    Lazy-loading JS

    ...
    <br/>// Make sure you strip out (or replace) comment blocks in your JavaScript first.<br/>/*<br/>JavaScript of lazy module<br/>*/<br/>
    <br/>function lazyLoad() {<br/>var lazyElement = document.getElementById('lazy');<br/>var lazyElementBody = lazyElement.innerHTML;<br/>var jsCode = stripOutCommentBlock(lazyElementBody);<br/>eval(jsCode);<br/>}<br/>
    Lazy Load

    View full-size slide

  62. http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html
    200k of JavaScript held within a block
    comment adds 240ms during page load,
    whereas 200k of JavaScript that is parsed
    during page load added 2600 ms.

    View full-size slide

  63. Source: http://bit.ly/p9NoOL
    Prefer touch over click
    300/500ms delay for click
    events
    Penalty is consistent cross-
    platform

    View full-size slide

  64. Gustave Flaubert
    There is no truth. There is only perception.

    View full-size slide

  65. Asynchronous UIs

    View full-size slide

  66. Alex MacCaw
    http://alexmaccaw.co.uk/posts/async_ui
    ...interfaces should be completely non-
    blocking. Interactions should be resolved
    instantly; there should be no loading
    messages or spinners.

    View full-size slide

  67. Make use of AppCache

    View full-size slide

  68. CACHE MANIFEST
    someJS.js
    someMoreJS.js
    styles.css
    /images/myGoodSide.png
    /images/myBadSide.png

    AddType text/cache-manifest .appcache

    View full-size slide

  69. CACHE MANIFEST
    CACHE
    someJS.js
    NETWORK
    login.php
    FALLBACK
    /online.php /offline.php

    View full-size slide

  70. http://flic.kr/p/4vV38F
    A few gotchas...

    View full-size slide

  71. A single 404 means
    nothing is cached
    http://flic.kr/p/9ZSGiM

    View full-size slide

  72. Pages with manifest attribute
    automatically cached
    http://flic.kr/p/7p7raq

    View full-size slide

  73. Manifest files must be changed
    for resources to update
    http://flic.kr/p/4xN7Mc

    View full-size slide

  74. http://bit.ly/qX4pbf
    Confess.js

    View full-size slide

  75. phantomjs confess.js http://functionsource.com

    View full-size slide

  76. CACHE MANIFEST
    # This manifest was created by confess.js, http://github.com/jamesgpearce/
    confess
    #
    # Time: Wed Apr 13 2011 15:40:27 GMT-0700 (PDT)
    # URL: http://functionsource.com
    # UA: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-US) AppleWebKit/533.3
    (KHTML, like Gecko) PhantomJS/1.1.0 Safari/533.3
    #
    # Any console output generated by this page or app is shown immediately
    below. You'll need to remove this to create a valid manifest syntax.
    # [Start of console output]
    # [End of console output]
    CACHE:
    /javascripts/lib/jquery.js
    /javascripts/lib/underscore.js
    /javascripts/lib/backbone.js
    ........
    http://functionsource.com/images/icons/rss.png
    http://functionsource.com/images/icons/podcast.png
    http://functionsource.com/images/icons/firehose.png
    NETWORK:
    *

    View full-size slide

  77. http://flic.kr/p/6e7uqr
    manifestR

    View full-size slide

  78. http://flic.kr/p/6e7uqr

    View full-size slide

  79. A few AppCache resources
    http://www.html5rocks.com/tutorials/appcache/beginner/
    http://appcachefacts.info/
    http://www.webdirections.org/blog/get-offline/
    http://www.stevesouders.com/blog/2011/10/03/improving-
    app-cache/

    View full-size slide

  80. http://flic.kr/p/5N2tQ
    In the not-so-distant future...
    hopefully!

    View full-size slide

  81. Source: http://www.w3.org/TR/netinfo-api/
    Network Information API
    navigator.connection.type
    returns: unknown, ethernet, wifi, 2g, 3g, 4g, none
    supported! (kind of)
    returns: 0,1,2,3,4

    View full-size slide

  82. http://flic.kr/p/XLMGv
    Battery life

    View full-size slide

  83. http://flic.kr/p/6e7uqr
    Source: http://bit.ly/qXrMqe

    View full-size slide

  84. Source: http://bit.ly/ny5IET

    View full-size slide

  85. Source: http://bit.ly/nob5dd
    http://stevesouders.com/ms/

    View full-size slide

  86. http://flic.kr/p/5gh6L2
    Test. Rinse. Repeat.

    View full-size slide

  87. http://flic.kr/p/Ruy9M
    Let’s look at some tools

    View full-size slide

  88. Page Speed Online

    View full-size slide

  89. Charles Proxy

    View full-size slide

  90. Mobile performance bookmarklet

    View full-size slide

  91. http://flic.kr/p/sBbaN
    We need more data!

    View full-size slide

  92. Joshua Bixby
    Source: http://bit.ly/mXUvR7
    It took our community almost ten years to
    generate meaningful data around regular
    web performance. We don’t have that
    luxury with the mobile internet.

    View full-size slide

  93. Experiment. Create. Share.

    View full-size slide

  94. http://flic.kr/p/6e7uqr
    timkadlec.com @tkadlec

    View full-size slide