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

Beyond the bubble

1518538c2cd5fc2e54d4df083f1b3fa6?s=47 Ben Schwarz
September 08, 2017
380

Beyond the bubble

1518538c2cd5fc2e54d4df083f1b3fa6?s=128

Ben Schwarz

September 08, 2017
Tweet

Transcript

  1. Beyond the bubble Ben Schwarz @benschwarz !

  2. calibreapp.com

  3. <!doctype html> …
 <link href=“main.css" rel=“stylesheet” /> …
 <img src=“hero-header.jpg”

    /> …
 <script src=“common-vendor.js”> </script> <script src=“app.js” async> </script> ✅ HTML ✅ main.css ✅ webfont.woff2 ✅ hero-header.jpg ✅ webfont-semibold.woff2 ✅ common-vendor.js ✅ app.js
  4. Project timeline Performance happens here

  5. Project timeline “Hey, is the website fast?” “ohhhh fuck”

  6. Project timeline “Let’s make this really great!” When performance should

    happen
  7. State of Global Connectivity

  8. 53.9% no internet access 46.1% internet access 7.4 Billion People

  9. 108 million 65% of the 1.2 Billion population no access

    to the internet. new first time internet users in 2016.
  10. Number of hours worked for 500mb of data $ Brazil

    13 h % Indonesia 6 h & India 4 h ' Germany 1 h
  11. 1hr of work for: • 8 songs on Spotify •

    6 minutes of Youtube • Less than 1 hour playing online games
  12. 1hr of work for: • Reading an article on theverge.com

    with an empty cache (38 times)
  13. Average ‘LTE’ speed ( Denmark 30.6 Mbps ' Germany 20.3

    Mbps $ Brazil 19.68 Mbps ) Sweden 15.2 Mbps % Indonesia 8.79 Mbps & India 6.39 Mbps
  14. 0 Mbps 400 Mbps 7.2 Mbps Global Average Global Average

    Connection Speed
  15. 60% of mobile connections are 2G.* *Global connectivity

  16. Even if LTE is ‘available’, do not assume it will

    be fast.
  17. 51.3% 48.7% Hand held is majority

  18. OPPO Huawei vivo Apple Xaiomi China Samsung ¯\(°_o)/¯ Xaiomi Micromax

    Lenovo India Samsung Apple Huawei Sony Ericsson LG Germany
  19. Vendor Number of units Samsung 78.6 Million Apple 51.9 Million

    Huawei 34.1 Million Oppo 30.9 Million Vivo 25.8 Million Others 158.3 Million Total 379.9 Million Global smartphone sales Q1 2017
  20. Is there a single device that best represents “average”?

  21. Moto G4 Quad-core CPU 2GB Ram 16 or 32Gb of

    storage 1080x1920 13MP Camera
  22. Enabling CPU Throttling in Chrome

  23. Two versions of the internet The one we use daily

    Cable Fibre Large corporates University Airplanes
 AirBnBs
 Coffee shop wifi
 Conference wifi Lie-fi The one we don’t
  24. We must stop optimising for $3000 computers with fast connections.

  25. We must feel what our customers are feeling, train ourselves

    how to diagnose common performance issues then fix them.
  26. As an industry we need to stop putting our desires

    and needs in front of the people we say we’re building for.
  27. The Critical Request

  28. A critical request is one that contains an asset that

    is essential to the content within the user’s viewport.
  29. None
  30. Hey read this it’s really interesting

  31. None
  32. Hey read this it’s really interesting

  33. Hey read this it’s really interesting

  34. Hey read this it’s really interesting

  35. Making people wait for text to render The Web in

    2017:
  36. None
  37. The fold is the user’s viewport. Yes, it’s real.

  38. None
  39. When did the fonts load?

  40. Fonts load when: • The stylesheet targets an element with

    a font declaration • The stylesheet has a corresponding @font-face declaration • Fonts are not requested until there is text to render
  41. None
  42. <link rel=“preload" href=“font.woff" as=“font” crossorigin /> Preload Critical, essential resources.

  43. HTML request Fonts! CSS

  44. 3-5 seconds delay caused by webfonts 68% of sites use

    web fonts Impact
  45. ✅ Use <link rel=“preload” /> ✅ Use font-display: swap; ✅

    Have fallbacks that look similar ✅ Use woff2, woff where possible Webfont performance checklist
  46. Looking beyond delivery

  47. Delivery Parse Runtime + + Asset lifetime

  48. We ignore the fact that we’re often blocking the main

    thread. This matters.
  49. None
  50. Average size script on sites 453 KB

  51. 453 KB " 1,500 KB Compression rate of 2–3 times

  52. None
  53. None
  54. 560 Kb Compressed 2208 Kb Uncompressed

  55. Desktop Moto G4 Parse / Compile in the wild 2

    seconds!
  56. http://bit.ly/your-site-without-js

  57. Half the amount of data Half the number of requests

    1.59Mb vs 3.41Mb 61 Requests vs 115 Requests
  58. http://bit.ly/delete-js

  59. Webpack Code splitting import(/* webpackChunkName: “MyComponent" */ ‘./MyComponent’) Define split

    points using Dynamic Imports Webpack “magic comment”
  60. Webpack Code splitting new webpack.optimize.CommonsChunkPlugin() Split dependencies & cache those

    forever.
  61. ✅ Use code splitting ✅ Serve only what people need

    ✅ Test using ‘Real world’ conditions ✅ Monitor Parse & Compile time JS Runtime checklist
  62. Improve

  63. The metrics that we’re using to talk about performance tell

    us nothing about user experience.
  64. onLoad Speed Index onDomContentLoaded Metrics that don’t even

  65. First Paint First Meaningful Paint Visual Complete Time to Interactive

    Good metrics
  66. User navigates First Paint Visually Complete First Contentful Paint First

    Meaningful Paint
  67. Human-centric metrics

  68. Lighthouse npm install -g lighthouse

  69. Run Lighthouse in Chrome

  70. User navigates First Paint Visually Complete Short Javascript task Long

    Javascript task (>50ms) 5 seconds without long tasks Calculating Time to Interactive
  71. Time to Interactive in less than 5 seconds (on every

    device)
  72. “Time to first tweet”

  73. Performance monitoring checklist ✅ Use metrics that describe user-experience ✅

    Test using ‘Real world’ conditions ✅ Monitor continuously
  74. Don’t try to keep people on your site for as

    long as possible.
  75. Help people achieve their goals and move on with their

    lives.
  76. Service worker cache PRPL Pattern Code splitting Modern image formats

    HTTP/2 Reducing JS startup time with Prepack, Rollup, etc Use a CDN! Use SVG Set Cache headers
  77. Wealthy Western Web

  78. World Wide Web

  79. Make the web fast for everyone

  80. calibreapp.com

  81. @benschwarz Cheers calibreapp.com