The Future Of Performance Tooling

Slide 1

Slide 1 text

THE FUTURE OF PERFORMANCE TOOLING ADDY OSMANI

Slide 2

Slide 2 text

@addyosmani chrome

Slide 3

Slide 3 text

JavaScript

Slide 4

Slide 4 text

User Experience Happening Useful Usable Delightful Is it… ?

Slide 5

Slide 5 text

https://pagetransitions.netlify.app/

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

What does the future of performance tooling look like?

Slide 8

Slide 8 text

User-centric. Actionable. Contextual.

Slide 9

Slide 9 text

User-centric. Actionable. Contextual.

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

A Page Load in Lighthouse

Slide 13

Slide 13 text

A Page Load in DevTools

Slide 14

Slide 14 text

MPA vs. SPA Back / Forward Cache Core Web Vitals Pre- fetch & Pre- render Warm cache vs. cold cache And many more. Beyond initial page-load performance

Slide 15

Slide 15 text

A User Flow is a series of steps a user takes to achieve a meaningful goal.

Slide 16

Slide 16 text

MPA vs. SPA Purchasing Creating things User onboarding Inviting People Upgrading Cancelling page fl ows.com

Slide 17

Slide 17 text

Designing User Flows 1.Who is the user? 2.What is their goal? 3.What steps help achieve this goal? Source: https://butteracademy.com/user- fl ows Photo by Bekah Allmark from Pexels

Slide 18

Slide 18 text

Designing User Flows 1.Who is the user? 2.What is their goal? 3.What steps help achieve this goal?

Slide 19

Slide 19 text

Designing User Flows 1.Who is the user? 2.What is their goal? 3.What steps help achieve this goal?

Slide 20

Slide 20 text

User Flow: Buying something

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Introducing User Flows for DevTools & Lighthouse

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Export and Import User Flows Chrome Canary

Slide 25

Slide 25 text

Edit User Flow selectors and timeouts

Slide 26

Slide 26 text

Record flows from Lighthouse in DevTools 👩🔬

Slide 27

Slide 27 text

What if you could use flows with other tools?

Slide 28

Slide 28 text

https: / / github.com/WebPageTest/Recorder-To-WPT-Script $ node index.js cart.json Note: Very early and experimental 👩🔬🧪

Slide 29

Slide 29 text

setEventName Navigate navigate https://demo.vercel.store/ setEventName Click execAndWait document.querySelector("#__next > div > main > div.Marquee_root__jkJK1.Marquee_secondary__8dcL6.marquee-container > div:nth- child(1) > a:nth-child(3) > div.ProductCard_header__qlwPO").click(); setEventName Click execAndWait document.querySelector("#__next > div > main > div > div > div.ProductView_sidebar__pNv5P > div:nth-child(1) > div:nth-child(2) > div > button:nth-child(3)").click(); setEventName Click execAndWait document.querySelector("#__next > div > main > div > div > div.ProductView_sidebar__pNv5P > div:nth-child(4) > button").click(); setEventName Click execAndWait document.querySelector("#__next > div > div.Sidebar_root__hUV6J > div > section > div > div > div > header > button > svg").click(); setEventName Click execAndWait document.querySelector("#__next > div > div.Navbar_root__oKPSU.shadow-magical > div > div.Navbar_nav__FsbqY > div:nth-child(1) > nav > a:nth-child(2)").click(); setEventName Click execAndWait document.querySelector("#__next > div > main > div > div > div.col-span-8.order-3.lg\:order-none > div.grid.grid- cols-1.gap-6.sm\:grid-cols-2.lg\:grid-cols-3 > a:nth-child(5) > div.ProductCard_imageContainer__G6HoR > div > span > img").click(); setEventName Click execAndWait document.querySelector("#__next > div > main > div > div > div.ProductView_sidebar__pNv5P > div:nth-child(1) > div:nth-child(1) > div > button:nth-child(3)").click(); setEventName Click execAndWait document.querySelector("#__next > div > main > div > div > div.ProductView_sidebar__pNv5P > div:nth-child(4) > button").click(); setEventName Click execAndWait document.querySelector("#__next > div > div.Sidebar_root__hUV6J > div > section > div > div > div > div > div.flex- shrink-0.px-6.py-6.sm\:px-6.sticky.z-20.bottom-0.w-full.right-0.left-0.bg-accent-0.border-t.text-sm > div:nth-child(3) > a").click(); Example Output

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

What about cross-browser testing user flows?

Slide 32

Slide 32 text

$ npm install cypress $ npx @cypress/chrome-recorder cart.json

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

$ npm install cypress $ npx @cypress/chrome-recorder cart.json $ npx cypress run - - record - - key

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

User-centric. Actionable. Contextual.

Slide 37

Slide 37 text

I am excited to announce my new position 🎉

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Load code proportional to what's onscreen.

Slide 43

Slide 43 text

Only load what you users need.

Slide 44

Slide 44 text

Preload LCP image Avoid large layout shifts LCP image shouldn't be lazy- loaded Avoid long main- thread tasks Images should have dimensions specified And many more. Lighthouse Actionability for Web Vitals

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

What is input responsiveness? FIRST INPUT DELAY TOTAL BLOCKING TIME TIME TO INTERACTIVE INP

Slide 47

Slide 47 text

Click ➡ Open Menu

Slide 48

Slide 48 text

Click ➡ Add to Cart

Slide 49

Slide 49 text

👩🔬 A new experimental Responsiveness metric 👆 Measures Runtime Responsiveness 🕓 Full Interaction Latency ⌨ Tap, Drag, and Keyboard Interaction to Next Paint (INP)

Slide 50

Slide 50 text

Total Blocking Time (TBT) - Lab metric 🤖 Automatic, out of the box 👆 Measures Long Tasks until Interactive 🔮 Best way to predict Responsiveness

Slide 51

Slide 51 text

70% 100ms 2x views Share of users that experience terrible Responsiveness at least once a week. That’s measuring one whole second of interaction latency UX research on expected latency to user input. RAIL model: web.dev/rail Many studies cite even higher expectations for speci fi c fl ows. On desktop: Users load 2x more as many pages if they experience Good Responsiveness overall.

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

Debugging performance

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

about:tracing

Slide 60

Slide 60 text

ui.perfetto.dev

Slide 61

Slide 61 text

Could this be better? A preview.

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

User-centric. Actionable. Contextual.

Slide 64

Slide 64 text

A StackPack allows Lighthouse to display stack specific suggestions.

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

A Treemap displays large amounts of tree-structured data.

Slide 69

Slide 69 text

Webpack Bundle Analyzer

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

Improving performance is a journey

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

User-centric. Actionable. Contextual. The future of performance tooling is:

Slide 76

Slide 76 text

@addyosmani

Slide 77

Slide 77 text

Archive.

Slide 78

Slide 78 text

Reference sheet What prior art should I be looking at? • https://twitter.com/addyosmani/status/1465221489209319428 • https://twitter.com/addyosmani/status/1455936618439737346 • https://twitter.com/addyosmani/status/1460515430204801031 • https://twitter.com/jec fi sh/status/1509849613473226752 • https://twitter.com/ChromeDevTools/status/1509808262249517056 • https://twitter.com/addyosmani/status/1443108286727852034 • https://twitter.com/addyosmani/status/1506518696709136384 • https://twitter.com/davewsmart/status/1463843638752989191 • https://web.dev/optimize-vitals-lighthouse/

Slide 79

Slide 79 text

Demos What should I be testing? • Vercel Commerce: • https://demo.vercel.store/ - Recorder, Flows • https://next-blog-wordpress.vercel.app/ • https://demo.vercel.events/ • Could even use Google Search • Movies: • tastejs.com/movies - Stack Packs. Maybe performance?

Slide 80

Slide 80 text

What Videobolts should I use? Un fi nalized Speed logo reveal maybe Car drift - good Car wheel Car electric logo Space trails Anime impact - good Nitro Lightning logo Zap Cyber city good Titles Quick titles Nice little podcast based intro edit Titles bigger font Another opener text And can use pexels for user fl ows, speed etc

Slide 81

Slide 81 text

What VideoHive should I use? Un fi nalized * Spectrum computer: https://videohive.net/item/spectrum-old-computer-opener/15247782 Car racing reveal https://videohive.net/item/car-racing-reveal/20157855 https://videohive.net/item/man-waiting-for-someone-who-late-at-the-coffee-shop-checking-time-on-his-watch/ 14676946 waiting

Slide 82

Slide 82 text

Real-world / Time

Slide 83

Slide 83 text

Real-world / Time

Slide 84

Slide 84 text

Time

Slide 85

Slide 85 text

Actionability

Slide 86

Slide 86 text

Actionability

Slide 87

Slide 87 text

Actionability

Slide 88

Slide 88 text

Context

Slide 89

Slide 89 text

Context

Slide 90

Slide 90 text

Addy Osmani Future Of Performance Tooling DevsForUkraine

Slide 91

Slide 91 text

The web is composed of layers.

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

Proprietary + Confidential The Platform Foundation Applications

Slide 94

Slide 94 text

Proprietary + Confidential Hardware (CPU, GPU, RAM) and Network Operating System The Platform Foundation Applications

Slide 95

Slide 95 text

Proprietary + Confidential Hardware (CPU, GPU, RAM) and Network Operating System Web Browsers Polyfills / Transforms The Platform Foundation Applications

Slide 96

Slide 96 text

Proprietary + Confidential Hardware (CPU, GPU, RAM) and Network Operating System JavaScript Frameworks & Tools Components The Platform Foundation Applications Infrastructure Web Browsers Polyfills / Transforms

Slide 97

Slide 97 text

If you want a fast site, test on slow hardware. regularly. Hardware (CPU, GPU, RAM) and Network

Slide 98

Slide 98 text

Everyone talks about how Social Media is bad for your health, but what about JavaScript?

Slide 99

Slide 99 text

There is a huge gap in CPU Perf between high-end vs. low-end phones

Slide 100

Slide 100 text

There is a huge gap in CPU Perf between high-end vs. low-end laptops

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

Good defaults matter. JavaScript Frameworks & Tools

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

Can we make faster one-click away? Infrastructure

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

Experimenting with performance using Cloudflare Workers Priority Hints improving Largest Contentful Paint from 2.6 s to 1.9 s in a test of Google Flights