Improving user experience by monitoring real user measurements data. Presented at JS-Lovers Bangalore Meetup 20th Jan 2019

1. If you can't measure it, you can't improve it.
Improving User Experience with RUM
er.samarpanda@gmail.com
Samar Panda

2. State of the web… ¯_(ツ)_/¯
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
performance
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