$30 off During Our Annual Pro Sale. View Details »

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 Slide

  2. It’s a mobile world

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  32. View Slide

  33. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  40. Uh oh!

    View Slide

  41. Reduce requests

    View Slide

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

    View Slide

  43. Sorry Office Depot

    View Slide

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

    View Slide

  45. -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 Slide

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

    View Slide

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

    View Slide

  48. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  57. Eliminate unnecessary redirects

    View Slide

  58. m.domain.com

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  63. 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 Slide

  64. 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 Slide

  65. 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 Slide

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

    View Slide

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

    View Slide

  68. Asynchronous UIs

    View Slide

  69. 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 Slide

  70. Make use of AppCache

    View Slide

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

    AddType text/cache-manifest .appcache

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  79. 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 Slide

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

    View Slide

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

    View Slide

  82. 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 Slide

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

    View Slide

  84. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  91. Page Speed Online

    View Slide

  92. View Slide

  93. View Slide

  94. View Slide

  95. Charles Proxy

    View Slide

  96. View Slide

  97. Blaze.io

    View Slide

  98. View Slide

  99. Mobile performance bookmarklet

    View Slide

  100. Jdrop

    View Slide

  101. View Slide

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

    View Slide

  103. 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 Slide

  104. Experiment. Create. Share.

    View Slide

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

    View Slide