UX centric web performance - Expedia Group UI conference

Where to get metrics from?
How UX helps us prioritize?
What interactivity metrics we use?

Transcript

1. UX-centric web performance UX-centric web performance — Csaba Palfi Csaba Palfi 1 . 1
2. this talk: metrics only this talk: metrics only ⏱ Where do we get metrics from? How UX helps us to prioritize? What interactivity metrics we use? 1 . 2
3. ⏱ Where we get metrics from? ⏱ Where we get metrics from? 1 . 3
4. WebpageTest WebpageTest
5. 1 . 4
7. 1 . 5
8. Lighthouse Lighthouse
9. 1 . 6
10. Comparison Comparison 1 . 7
11. Browsers Browsers const {navigationStart, responseStart} = window.performance.timing; const ttfb = navigationStart - responseStart; 1 . 8
12. RUM RUM monitoring real users, in their browser Synthetic Synthetic ideal for CI/CD - prevent regressions 1 . 9
13. Synthetic: gotchas Synthetic: gotchas make it realistic noise 1 . 10
14. RUM: gotchas RUM: gotchas overhead browser support survivorship bias 1 . 11
15. ETOOMANYMETRICS ETOOMANYMETRICS WebpageTest/SpeedCurve: Start render, Speed Index, Visually Complete, Load Time, Fully Loaded... Browsers: navigation-timing, resource-timing, user- timing, paint-timing, long-tasks... Lighthouse: First Contentful/Meaningful Paint, Estimated Input Latency, First CPU Idle... 1 . 12
16. How users think? How users think? 1 . 13
17. happening? happening? 1 . 14
18. meaningful? meaningful? 1 . 15
19. usable? usable? smooth? smooth? 1 . 16
20. UX questions UX questions Happening? Meaningful? Usable? Smooth? HMUS (hummus? like RAIL, PRPL) 1 . 17
21. Example workflow Example workflow ❓ UX question: Happenning? Primary Metric: Start render ⚙ Secondary Metrics: TTFB, ... identify bottlenecks, fix, repeat 1 . 18
22. 1 . 19
23. Usable? Usable? a.k.a interactivity metrics 1 . 20
24. JS loaded JS loaded User Timing to the rescue componentDidMount() { performance.mark("Primary Action"); // like Page Usable for BEX } 1 . 21
25. Main thread busy? Main thread busy? 1 . 22
26. Long tasks Long tasks Anything longer than 50ms 1 . 23
27. First Interactive First Interactive 1 . 24
28. ⏳ Input delay ⏳ Input delay const inputDelay = performance.now() - event.timestamp; 1 . 25
29. First input delay First input delay GoogleChromeLabs/first-input-delay 1 . 26
30. 1 . 27
31. Summary Summary use both synthethic and RUM think in terms UX (HMUS) try first-input-delay! 1 . 28
32. Thank you! Thank you! @csabapalfi cpalfi@homeaway.com 1 . 29