How fast is it?
Download as PPTX, PDF5 likes3,884 views
This document discusses various metrics for measuring website speed and performance. It outlines different technical, visual, and interactive metrics and explains considerations for synthetic versus real-user measurement. Key recommendations include using First Contentful Paint, Speed Index from synthetic tests and First Interactive for real-user measurement to track progress towards performance goals. Effective connection type distribution from real-user data should also be considered to ensure optimizations work for all users.
How fast is it?
- 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
- 13. First Paint/ Start Render (8.7s) First Meaningful Paint (9.8s) First Contentful Paint (9.1s) First Interactive (48s)
- 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
- 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
- 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
- 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
- 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