Web Perf like it's 2017 - London Node Meetup

What's the current state of the art in web performance analytics? What's worth measuring and how? Let's focus on the user experience!

Transcript

1. Web Perf like it's Web Perf like it's 2017 2017 ⚡ = ⚡ = fast or driving customers away 1 . 1
2. Csaba Palfi Csaba Palfi doing web for ~10 years ex-(Hotels.com • Yahoo! • FT.com • trainline + YLD...) now: HomeAway.com @csabapalfi 1 . 2
3. How many people here are NOT web developers? (or full-stack) 1 . 3
4. Today we're going to talk about... tips and tricks tips and tricks ⏱ measurements ⏱ measurements 1 . 4
5. ...more specifically user-centric metrics user-centric metrics real user-monitoring real user-monitoring 1 . 5
6. What is 'fast'? What is 'fast'? DOMContentLoaded? load? nothing to do with UX 1 . 6
7. How users think? How users think? 1 . 7
8. 1 . 8
9. 1 . 9
10. 1 . 10
11. How users think? How users think? happening? meaningful? usable? smooth? 1 . 11
12. ⏱ Metrics from? ⏱ Metrics from? 1 . 12
13. webpagetest.org webpagetest.org 1 . 13
14. Lighthouse Lighthouse
15. 1 . 14
16. const observer = new PerformanceObserver((list) => { // ... list.getEntries() }); observer.observe({entryTypes: ['resource']}); 1 . 15
17. How users think? How users think? happening? meaningful? usable? smooth? 1 . 16
18. happening? happening? first pixel on the screen? Start Render - webpagetest.org N/A explicitly - LightHouse 1 . 17
19. entryTypes: ['paint'] first-paint https://w3c.github.io/paint-timing/ 1 . 18
20. meaningful? meaningful? above the fold rendered? Visually Complete - webpagetest.org Time to First Meaningful Paint - LightHouse 1 . 19
21. hero elements hero elements Neither in webpagetest.org or LightHouse
22. 1 . 20
23. tdresser/ tdresser/ hero-element-polyfill hero-element-polyfill 1 . 21
24. 1 . 22
25. usable? usable? loaded JS to make things work? https://www.w3.org/TR/user-timing/ componentDidMount() { performance.mark("datepicker.active"); } 1 . 23
26. usable? usable? are long tasks blocking the main thread? 1 . 24
27. First Interactive First Interactive both in webpagetest.org and Lighthouse 1 . 25
28. entryTypes: ['longtask'] long task: an event loop task that exceeds 50ms https://w3c.github.io/longtasks/ 1 . 26
29. GoogleChromeLabs/ GoogleChromeLabs/ tti-polyfill tti-polyfill 1 . 27
30. smooth? smooth? eventListeners execute quickly? Estimated Input Latency - LightHouse N/A - webpagetest.org performance.now() - event.timeStamp; 1 . 28
31. smooth? smooth? watch out for track long tasks 1 . 29
32. 1 . 30
33. Let's test! Let's test! first-paint: 0.5s / ... 1 . 31
34. synthetic synthetic vs vs real-user monitoring real-user monitoring 1 . 32
35. RUM in your RUM in your browser browser 1 . 33
36. survirvorship bias survirvorship bias track visibilitychange 1 . 34
37. 1 . 35
38. browser support browser support Web Perf like it's 2020 1 . 36
39. Synthetic & RUM Synthetic & RUM 1 . 37
40. Summary Summary think about performance in terms UX leverage user-centric metrics use synthethic testing to prevent regressions verify your performance with real user monitoring 1 . 38
41. Thanks! Thanks! Questions? Questions? @csabapalfi 1 . 39