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

Beyond the bubble

Ben Schwarz
September 08, 2017
0
640

Beyond the bubble

Ben Schwarz

September 08, 2017
Tweet

More Decks by Ben Schwarz

See All by Ben Schwarz
The Critical Request
benschwarz
11
6.7k
Vanity performance metrics — Looking beyond the numbers
benschwarz
15
3.2k
Useful performance metrics
benschwarz
19
3.8k

Featured

See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
Ruby is Unlike a Banana
tanoku
96
11k
Faster Mobile Websites
deanohume
304
30k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Into the Great Unknown - MozCon
thekraken
31
1.5k
GraphQLとの向き合い方2022年版
quramy
43
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
370
BBQ
matthewcrist
85
9.3k

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