Optimizing for Mobile Performance

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

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