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

Faster Mobile Websites

Dean Hume
May 19, 2015
Programming
296
29k

Faster Mobile Websites

This talk was first presented at UpFront Conference on the 19th May 2015. http://upfrontconf.com/

Presentation Details
----------------------------------
As mobile device usage continues to grow, developers need to ensure that their mobile websites are fast and offer a high quality experience for all users. A fast mobile website can be the difference between winning or losing a customer. A few seconds delay in your page load time and you might find that users to your site easily become frustrated and navigate away to another site...or even worse, your competitors site!

Developers understand the need for fast, smooth websites - but how do you apply this to a mobile website and the vast amount of mobile devices out there? This talk is aimed at all developers that build websites and will dive into basic and advanced web performance techniques - there is something for everyone! The talk also covers free tools that developers can use to test and profile the performance of their mobile websites.

This talk will cover a variety of performance related issues specifically aimed at mobile websites and the techniques that developers can use to overcome them and will include:

- Mobile Network Overhead
- Critical Path Rendering
- Basic web performance techniques
- Responsive images
- Performance build automation
- Mobile Website profiling and debugging tools
- A step by step website optimization

http://deanhume.com

Dean Hume

May 19, 2015
Tweet

More Decks by Dean Hume

See All by Dean Hume
Blink and you’ll miss it: Building a progressive web app with HTTP/2
deanohume
3
370
Unleashing the power within: A hands-on guide to browser developer tools
deanohume
1
320
Progressive Web Apps in the Real World
deanohume
11
990
SaaS Metrics for Dummies
deanohume
4
500
Automating Web Performance
deanohume
8
590
The Good, The Bad, and The Ugly of the HTTP Archive
deanohume
6
1.7k
Get the LEAST from your images
deanohume
13
1.4k
Stand out from the crowd
deanohume
4
860
Speed is important
deanohume
1
230

Other Decks in Programming

See All in Programming
4 Patterns to Jumpstart your Event-Driven Architecture Journey @ Current 2023, San Jose California
hpgrahsl
0
260
スケーラブルシステム / Scalable System
nrslib
3
230
WebのE2Eテスト自動化 〜導入から運用・評価までの道のり編〜
coconala_engineer
0
200
再考 Fourkeys メトリクス
eiel
1
220
CSS Subgridが遂に全ブラウザ対応。新時代のグリッドデザインを学ぼう
tonkotsuboy_com
7
7.2k
ゆめみの謎制度「フルリモし放題制度 ㊗️ MAX」で買ったものを紹介します
k9i
0
270
HonoでReact・TypeScriptの実行環境をブラウザー上に作る
steelydylan
1
590
PHP 8.3のmbstringの進化を見てください - コントリビューターとしてのかかわり -
youkidearitai
0
270
プチモブから始めてみよう(XP祭り2023)
jxmtst
0
490
PGConf NYC 2023: Lightning Talk — Query Identifier
andyatkinson
PRO
0
190
htmx is not a typo
kimihito_
5
3.8k
Why Tomcat Matters for Jakarta EE
ivargrimstad
0
220

Featured

See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
352
21k
Debugging Ruby Performance
tmm1
68
11k
Into the Great Unknown - MozCon
thekraken
7
610
Art, The Web, and Tiny UX
lynnandtonic
285
18k
Designing for humans not robots
tammielis
246
24k
How GitHub Uses GitHub to Build GitHub
holman
467
280k
YesSQL, Process and Tooling at Scale
rocio
159
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
3.9k
Keith and Marios Guide to Fast Websites
keithpitt
407
21k
GraphQLとの向き合い方2022年版
quramy
25
12k
How to name files
jennybc
57
85k
Gamification - CAS2011
davidbonilla
75
4.3k

Transcript

  1. Faster Mobile Websites

    View Slide

  2. Dean Hume
    @deanohume

    View Slide

  3. Why is speed so
    important?

    View Slide

  4. 100 millisecond delay

    View Slide

  5. 100 millisecond delay
    Decreased sales by 1%

    View Slide

  6. £1

    View Slide

  7. A slow site will :
    Affect the impression of your brand

    View Slide

  8. A slow site will :
    Affect the impression of your brand
    Increase user frustration

    View Slide

  9. A slow site will :
    Affect the impression of your brand
    Increase user frustration
    Cost your user’s money

    View Slide

  10. whatdoesmysitecost.com

    View Slide

  11. A slow site will :
    Affect the impression of your brand
    Increase user frustration
    Cost your user’s money
    Make your user’s use your competitors

    View Slide

  12. A slow site will :
    Affect the impression of your brand
    Increase user frustration
    Cost your user’s money
    Make your user’s use your competitors
    Affect your SEO rankings

    View Slide

  13. People != Patience

    View Slide

  14. View Slide

  15. Mobile Devices?

    View Slide

  16. Mobile

    View Slide

  17. is
    Mobile

    View Slide

  18. Mobile
    HUGE
    is

    View Slide

  19. Mobile commerce
    will be 40%
    of eCommerce by
    the end of 2015
    source: criteo.com/resources/mobile-commerce-q1-2015/

    View Slide

  20. Mobile
    transactions
    grew 10%
    in the
    last 3 months

    View Slide

  21. View Slide

  22. So what can we do?

    View Slide

  23. View Slide

  24. Understand Mobile Networks

    View Slide

  25. RRC
    Negotiation
    Network Overhead
    100ms

    View Slide

  26. DNS
    Lookup
    RRC
    Negotiation
    Network Overhead
    100ms 200ms

    View Slide

  27. DNS
    Lookup
    TCP
    Connection
    RRC
    Negotiation
    Network Overhead
    100ms 200ms 200ms

    View Slide

  28. DNS
    Lookup
    TCP
    Connection
    HTTP
    Request &
    Response
    RRC
    Negotiation
    Network Overhead
    100ms 200ms 200ms 200ms

    View Slide

  29. Latency
    is

    View Slide

  30. Latency
    is
    bad.

    View Slide

  31. Latency
    is

    View Slide

  32. Latency
    is
    “the new web
    performance
    bottleneck.”

    View Slide

  33. 3G 4G

    View Slide

  34. 3G
    200 - 3500 ms
    delay
    4G

    View Slide

  35. 3G
    200 - 3500 ms
    delay
    4G
    100 - 600 ms
    delay

    View Slide

  36. In North America 92% of
    smartphones took >
    200ms to load a 20KB file

    View Slide

  37. Deliver only the
    goods
    that will be used!

    View Slide

  38. View Slide

  39. RAIL

    View Slide

  40. R
    A
    I
    L

    View Slide

  41. Response
    A
    I
    L

    View Slide

  42. Response
    Animation
    I
    L

    View Slide

  43. Response
    Animation
    Idle
    L

    View Slide

  44. Response
    Animation
    Idle
    Load

    View Slide

  45. RAIL in Action

    View Slide

  46. RAIL in Action
    1. Reduce page size (Load)

    View Slide

  47. RAIL in Action
    1. Reduce page size (Load)
    2. Reduce HTTP requests (Load)

    View Slide

  48. RAIL in Action
    1. Reduce page size (Load)
    2. Reduce HTTP requests (Load)
    3. Reduce Blocking (Load, Idle)

    View Slide

  49. RAIL in Action
    1. Reduce page size (Load)
    2. Reduce HTTP requests (Load)
    3. Reduce Blocking (Load, Idle)
    4. Improve render times (Animation,
    Idle, Response)

    View Slide

  50. 1. Reduce page size

    View Slide

  51. 1. Reduce page size
    Load

    View Slide

  52. ● Optimize images
    ● Remove unused CSS
    ● Minify CSS and JS files
    ● Responsive images
    Reduce page size

    View Slide

  53. Optimize images

    View Slide

  54. 160 KB 110 KB
    Before After

    View Slide

  55. kraken.io

    View Slide

  56. imageoptimization.info

    View Slide

  57. Remove unused CSS

    View Slide

  58. Before
    107 KB
    After
    30 KB

    View Slide

  59. 86%
    Unused CSS

    View Slide

  60. Chrome
    Developer
    Tools

    View Slide

  61. Grunt
    Gulp

    View Slide

  62. Grunt
    uncss
    Gulp
    uncss

    View Slide

  63. Responsive images

    View Slide

  64. View Slide

  65. 72%

    View Slide






  66. This is some accessible text.

    View Slide






  67. This is some accessible text.

    View Slide






  68. This is some accessible text.

    View Slide

  69. Responsive
    -images
    Gulp-
    Responsive

    View Slide

  70. responsiveimages.org

    View Slide

  71. responsiveimages.org
    scottjehl.github.io/picturefill
    Polyfill
    Polyfill

    View Slide

  72. 2. Reduce HTTP Requests

    View Slide

  73. 2. Reduce HTTP Requests
    Load

    View Slide

  74. ★ Combine Styles and Scripts
    Reduce HTTP Requests

    View Slide

  75. ★ Combine Styles and Scripts
    ★ Spriting
    Reduce HTTP Requests

    View Slide

  76. ★ Combine Styles and Scripts
    ★ Spriting
    ★ Caching
    Reduce HTTP Requests

    View Slide

  77. ★ Combine Styles and Scripts
    ★ Spriting
    ★ Caching
    ★ Do you really need that?
    Reduce HTTP Requests

    View Slide

  78. Combine

    View Slide

  79. Grunt
    Gulp

    View Slide

  80. Automate all the
    things!
    yeoman.io/blog/performance-optimization.html

    View Slide

  81. Spriting

    View Slide

  82. View Slide

  83. View Slide

  84. 1 request

    View Slide

  85. 1 request
    many
    images

    View Slide

  86. - No whitespace
    Sprites

    View Slide

  87. - No whitespace
    - Optimize & cache
    Sprites

    View Slide

  88. - No whitespace
    - Optimize & cache
    - Aim for similar palettes
    Sprites

    View Slide

  89. Caching

    View Slide

  90. - Beware of proxies
    Caching

    View Slide

  91. - Beware of proxies
    - Standardize your file
    capitalization
    Caching

    View Slide

  92. - Beware of proxies
    - Standardize your file
    capitalization
    - Determine the best cache lifetime
    Caching

    View Slide

  93. - Beware of proxies
    - Standardize your file
    capitalization
    - Determine the best cache lifetime
    - Minimize churn
    Caching

    View Slide

  94. Do you really
    need that?

    View Slide

  95. “When you want to be
    fast, you have to give up
    the things slowing you
    down.”
    Addy Osmani

    View Slide

  96. CSS instead of images
    Consider :

    View Slide

  97. CSS instead of images
    Social Widgets
    Consider :

    View Slide

  98. View Slide

  99. “Across the 61 million
    mobile sessions we
    studied, we found that
    only 0.2% of mobile users
    do any social sharing.”
    source: http://moovweb.com/blog/anyone-use-social-sharing-buttons-mobile/

    View Slide

  100. CSS instead of images
    Social Widgets
    3rd Party Scripts
    Consider :

    View Slide

  101. CSS instead of images
    Social Widgets
    3rd Party Scripts
    Carousels
    Consider :

    View Slide

  102. shouldiuseacarousel.com

    View Slide

  103. Deliver only the goods
    that will be used!

    View Slide

  104. View Slide

  105. 3. Reduce Blocking

    View Slide

  106. 3. Reduce Blocking
    Load / Idle

    View Slide

  107. HTML

    View Slide

  108. HTML CSS

    View Slide

  109. HTML CSS JS

    View Slide

  110. HTML CSS JS
    Blocking Blocking

    View Slide

  111. “More Weight Doesn't
    Mean More Wait”
    Scott Jehl

    View Slide

  112. Finding the Critical Path

    View Slide

  113. View Slide

  114. 14 KB

    View Slide

  115. View Slide

  116. Grunt
    Critical
    Critical

    View Slide



  117. /* inlined critical CSS */<br/>
    loadCSS('deferred.css');<br/>


    ...body goes here

    View Slide



  118. /* inlined critical CSS */<br/>
    loadCSS('deferred.css');<br/>


    ...body goes here

    View Slide

  119. Inline?

    View Slide

  120. 1 Roundtrip
    14 KB

    View Slide

  121. 4. Improve Rendering

    View Slide

  122. 4. Improve Rendering
    Load / Idle
    Animation, Idle, Response

    View Slide

  123. View Slide

  124. Dev Tools are your
    Best Friend

    View Slide

  125. Profiling tools are everywhere

    View Slide

  126. Find your slowest points

    View Slide

  127. Find your slowest points

    View Slide

  128. Find your slowest points

    View Slide

  129. Stay Jank
    Free!
    jankfree.org

    View Slide

  130. http://bit.ly/60-fps
    Building 60 FPS
    Web Apps

    View Slide

  131. discover-devtools.codeschool.com

    View Slide

  132. View Slide

  133. github.com/zeman/perfmap

    View Slide

  134. Recap
    1. Reduce page size
    2. Reduce HTTP requests
    3. Reduce Blocking
    4. Improve render times

    View Slide

  135. Show me the Money

    View Slide

  136. View Slide

  137. Stats 52 HTTP Requests
    950 KB Total
    250 KB of CSS
    158 KB of JavaScript
    Speed Index - 2075

    View Slide

  138. 15 seconds
    3G Dulles, VA

    View Slide

  139. View Slide

  140. Grunt-UnCSS

    View Slide

  141. Grunt-UnCSS
    Kraken.io

    View Slide

  142. Grunt-UnCSS
    Grunt-Responsive-images
    Kraken.io

    View Slide

  143. Grunt-UnCSS
    Grunt-Responsive-images
    Grunt-Critical-CSS
    Kraken.io

    View Slide

  144. Grunt-UnCSS
    Grunt-Responsive-images
    Grunt-Critical-CSS
    Grunt-Contrib-htmlmin
    Kraken.io

    View Slide

  145. After
    32 HTTP Requests
    402 KB Total
    3.7 KB of CSS
    44 KB of JavaScript
    Speed Index - 1675

    View Slide

  146. After
    (52) 32 HTTP Requests
    (950) 402 KB Total
    (250) 3.7 KB of CSS
    (158) 44 KB of JavaScript
    (2075) Speed Index - 1675

    View Slide

  147. 3.7 seconds
    3G Dulles, VA
    3G Dulles, VA

    View Slide

  148. Critical Path
    0 0.5 1.0 1.5 2.0 2.5

    View Slide

  149. bit.ly/upfront-conf

    View Slide

  150. Testing

    View Slide

  151. webpagetest.org

    View Slide

  152. Pagespeed Insights

    View Slide

  153. Device
    Emulator
    Chrome

    View Slide

  154. Remote debugging Android

    View Slide

  155. Remote debugging iOS

    View Slide

  156. Remote debugging iOS
    developer.apple.com/safari/tools

    View Slide

  157. Summary
    The importance of a fast website

    View Slide

  158. Summary
    The importance of a fast website
    The latency delay in mobile networks

    View Slide

  159. Summary
    The importance of a fast website
    The latency delay in mobile networks
    RAIL

    View Slide

  160. Summary
    The importance of a fast website
    The latency delay in mobile networks
    RAIL
    Critical Path

    View Slide

  161. Summary
    The importance of a fast website
    The latency delay in mobile networks
    RAIL
    Critical Path
    Improve rendering

    View Slide

  162. Summary
    The importance of a fast website
    The latency delay in mobile networks
    RAIL
    Critical Path
    Improve rendering
    Profiling & testing tools

    View Slide

  163. View Slide

  164. Think lean
    Think fast!

    View Slide

  165. Thank you
    @deanohume

    View Slide