Improve User Experience with Real User Measurements

Browser metrics those can help to measure before and after loading experience of a site. If we can't measure we can't improve.

Transcript

1. If you can't measure it, you can't improve it. Improving User Experience with RUM er.samarpanda@gmail.com Samar Panda
2. ツ credits : llya grigorik
3. India mobile(~76%) vs desktop(~23%) vs tablet(0.4%) market share http://bit.ly/2UcWRNI
4. Are you measuring it right? Are you measuring right it? and if you claim that you can measure it... If you can't measure it, you can't improve it. credits : llya grigorik
5. Real User Monitoring is a type of performance monitoring that captures and analyzes each transaction by users of a website or application. It’s also known as real user measurement, real user metrics, end-user experience monitoring or RUM.
6. EVERYONE IS RESPONSIBLE FOR f credits : addy osmani
7. Web performance tooling Synthetic lab conditions Real-world Lighthouse RUM credits : llya grigorik
8. Number of transferred bytes Average page load time Time to interactive Average First Contentful paint #1 #2 #3 #4 50th: 5.8s 75th: 7.8s 90th: 10.6s 50th: 1285.5kb 75th: 2650.1kb 90th: 5075.8kb 50th: 8.7s 75th: 15.6s 90th: 25.8s 50th: 16s 75th: 25.4s 90th: 40.9s * data from HTTP Archive crawl for Dec/18 credits: llya grigorik
9. Number of transferred bytes Median page load time Time to interactive Median first meaningful paint #1 #2 #3 #4 Misfires on progressive loading First, first contentful, first meaningful, ...? “But all of my users are on ~4G” When does the user click? General jank? credits: llya grigorik
10. Median metrics across 1M sites from HttpArchive http://bit.ly/2AYlve0
11. Distribution of Load / Time to Interactive credits : philip walton
12. credits : addy osmani
13. credits : addy osmani
14. Navigation Paint (Visual Metrics) User Timing (Product specific flows)
15. End User Monitoring - Code Examples Navigation Timing Paint Timing User Timing
16. Navigation timings https://www.w3.org/TR/navigation-timing/#processing-model#processing-model
17. Resource timing https://www.w3.org/TR/navigation-timing-2/
18. User Timing - Custom Metrics • Marks - record individual user timing APIs • Measures - record difference between two marks • Instrumentation is required to measure all product KPIs Benefits • Measures product use-cases not standard metrics • These timings will be available in Synthetic Analysis Requires • Detailed code instrumentation
19. User Timing API Support https://caniuse.com/#feat=user-timing
20. Demo • View detail, Edit project Profile sites • www.amazon.in • www.flipkart.com
21. 60 frames per second 1 frame 1000/60 = 16.66 ms
22. The pixel pipeline & main thread flame chart Rendering performance
23. First Input Delay (FID) First Input Delay (FID) measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction. Source - http://bit.ly/2RZaov5
24. Network requests & Main thread activities Source - http://bit.ly/2RZaov5
25. Time To Interactive (Lab data) Source - http://bit.ly/2RZaov5
26. First Input Delay Source - http://bit.ly/2RZaov5
27. Example of FID Issues https://www.youtube.com/watch?v=Lx1cYJAVnzA
28. const btn = document.querySelector(‘target-button’) btn.addEventListener(‘click’, (e) => { const lag = performance.now() - e.timeStamp; if(lag > 100) sendDataToAnalytics(`Input latency: ${lag}`) }) Calculating input delay for all clicks
29. LongTask API http://bit.ly/2QKKBWX
30. Is it happening? Is it useful? Is it usable? Is it delightful? Consistent snappy experience? User centric perf metrics RUM data First paint & first contentful paint First meaningful paint & UX APIs TTI (Lab data) / FID(First Input delay) Free of long tasks Input latency data credits: llya grigorik
31. • Navigation & Paint metrics will be available for all page loads • User centric business KPIs can be monitored granularly (Required instrumentation) • Long task monitoring • Track input latency • All these data can be tracked in GA Performance metrics we discussed
32. Product Specific UX Speed Measurements • “Time to first tweet” Improving performance on twitter.com • “Pinner wait time” Four lessons of making pinterest faster
33. Performance budget • Decide perf budget for each page • Prioritize features in a page • http://www.performancebudget.io/ • https://bit.ly/perf-budgets
34. Quick Overview Of Chromedevtools
35. Devtool Panels • Network • Sources • Performance • Application • Audits • Memory
36. • Logpoint for quicker js debugging • Code coverage • Code folding, Improved inspect element tooltip, Copy jspath • Paint timing markers • Pinning console expressions • Storing global variables http://bit.ly/2RMwbH4
37. Tools • https://www.webpagetest.org/ • Google pagespeed insights • https://pagespeedreports.proteusthemes.com/ - Weekly pagespeed reports • https://browserdiet.com/calories/ - Browser Calories Chrome / Firefox extension • https://testmysite.thinkwithgoogle.com - Test your mobile site speed • https://www.thinkwithgoogle.com/feature/mobile/ - Compare with competitor • Chrome dev tools audit using Lighthouse • https://squoosh.app/ - Image optimization
38. Q & A