Measuring web performance - Smashing conference London 2018

1. How Fast Is It?
Patrick Meenan
@PatMeenan

4. Which Metric?
• Time to First Byte
• Server Response Time
• Time to Title
• DOM Interactive
• DOM Content Loaded
• “Page Load Time”
• Fully Loaded
• Application Ready
• First Paint
• First Contentful Paint
• First Meaningful Paint
• Speed Index
• Visually Complete
• First Interactive
• Consistently Interactive
• Hero Content

5. For What User(s)?
0%
5%
10%
15%
20%
25%
0
200
400
600
800
1000
1200
1400
1600
1800
2000
2200
2400
2600
2800
3000
3500
4000
4500
5000
5500
6000
6500
7000
7500
8000
8500
9000
9500
10000
15000
20000
25000
30000
40000
50000
60000
90000
110000
120000
Percentofpageloads
onload time (milliseconds)
onload time distribution for www.webpagetest.org

6. Pick metrics that will improve
the user experience

7. Onload – aka “Page Load Time”
• Single-Page Apps: Blank? Progress Indicator?
• Intentional Gaming:
• Load a loader script
• Load actual page content after load event

8. Tracking, retargeting, ads…
https://brave.com/
https://blog.mozilla.org/blog/2017/11/20/firefox-private-browsing-vs-chrome-incognito/
• Lazy Load Images
• Async (or split) JS

9. Technical Metrics
• Time to First Byte
• Server Response Time (full HTML)
• DOM Content Loaded
• OnLoad
• Fully Loaded

10. Visual Metrics
Speed Index (weighted average)
https://developers.google.com/web/updates/2017/06/user-centric-performance-metrics
Visually
Complete

12. Interactive Metrics

13. First Paint/
Start Render
(8.7s)
First Meaningful
Paint
(9.8s)
First Contentful
Paint
(9.1s)
First Interactive
(48s)

14. Consistently Interactive
(49s)First Interactive
(10.7s)

16. User Timing – performance.mark()
https://caniuse.com/#feat=user-timing

17. Synthetic or and RUM
Synthetic
• Stable
• More detailed measurements
• Requires “representative” configuration
Real User Measurement
• Actual Performance
• Highly variable
• Limited competitive analysis

18. RUM Variability
https://grafana.wikimedia.org/dashboard/db/navigation-timing

19. Metric Availability
• Time to First Byte
• Server Response Time
• Time to Title*
• DOM Interactive
• DOM Content Loaded
• “Page Load Time”
• Fully Loaded
• Application Ready
• First Paint
• First Contentful Paint
• First Meaningful Paint*
• Speed Index*
• Visually Complete*
• First Interactive
• Consistently Interactive
• Hero Content*
* Synthetic (lab) only

20. Metric Recommendations
Synthetic
• First Contentful Paint
• Speed Index
• First Interactive
Real User Measurement
• First (Contentful) Paint
• First Interactive
User Timing

21. Pick Some representative profiles
• “My Site isn’t that slow”
• CrUX effective connection type
• GA and RUM connection info
• Slow users underrepresented
• Median and 99+ percentile

22. Chrome User Experience Report
• Real-user performance data from Chrome users
• Aggregated per-origin
• Histograms of several metrics:
• First Paint
• First Contentful Paint
• DOM Content Loaded
• Onload
• Split by:
• Country
• Effective connection type (2g, 3g, 4g…)
• Device Type (phone, tablet, desktop)
https://developers.google.com/web/tools/chrome-user-experience-report/

23. Effective Connection Type
navigator.connection.effectiveType()
http://wicg.github.io/netinfo/
ECT Minimum RTT (ms) Maximum downlink (Kbps)
slow-2g 2000 50
2g 1400 70
3g 270 700
4g 0 ∞

24. Effective Connection Type – ft.com
90.8% “effective 4G”*

25. 0%
5%
10%
15%
20%
25%
First Contentful Paint (milliseconds)
Amazon.com Walmart

26. Why it matters
https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/

27. https://www.thinkwithgoogle.com/marketing-resources/experience-design/mobile-page-speed-load-time/
0%
5%
10%
15%
20%
25%
30%
35%
40%
45%
0.5
1.0
1.5
2.0
2.5
3.0
3.5
4.0
4.5
5.0
5.5
6.0
6.5
7.0
7.5
8.0
8.5
9.0
9.5
10.0
10.5
11.0
11.5
12.0
12.5
13.0
13.5
14.0
14.5
15.0
15.5
16.0
16.5
17.0
17.5
18.0
18.5
19.0
19.5
20.0
BounceRate
Time to DOM Content Loaded Event (Seconds)
Predicted Bounce Rate
5.5 Seconds

28. https://wpostats.com/

29. •Inform Goals using RUM
•Track Progress using Synthetic
•Use representative configurations in Dev

30. Local dev testing – CPU Emulation

31. Local dev testing – Traffic-Shaping
https://calendar.perfplanet.com/2016/testing-with-realistic-networking-conditions/
https://github.com/WPO-Foundation/win-shaper
http://facebook.github.io/augmented-traffic-control/

32. Tooling

33. Lighthouse
https://developers.google.com/web/tools/lighthouse/

34. In WebPageTest
https://www.webpagetest.org/lighthouse

35. Speed Index (WebPageTest): 4,150
Perceptual Speed Index (Lighthouse): 7,738

36. WebPageTest API – lighthouse=1

38. WebPageTest – Custom Metrics

39. WebPageTest – Code Injection

40. Thank You!
@PatMeenan
pmeenan@webpagetest.org