Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

How fast is it?

2.793 Aufrufe

Veröffentlicht am

Measuring web performance - Smashing conference London 2018

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

How fast is it?

  1. 1. How Fast Is It? Patrick Meenan @PatMeenan
  2. 2. 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
  3. 3. 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
  4. 4. Pick metrics that will improve the user experience
  5. 5. Onload – aka “Page Load Time” • Single-Page Apps: Blank? Progress Indicator? • Intentional Gaming: • Load a loader script • Load actual page content after load event
  6. 6. 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
  7. 7. Technical Metrics • Time to First Byte • Server Response Time (full HTML) • DOM Content Loaded • OnLoad • Fully Loaded
  8. 8. Visual Metrics Speed Index (weighted average) https://developers.google.com/web/updates/2017/06/user-centric-performance-metrics Visually Complete
  9. 9. Interactive Metrics
  10. 10. First Paint/ Start Render (8.7s) First Meaningful Paint (9.8s) First Contentful Paint (9.1s) First Interactive (48s)
  11. 11. Consistently Interactive (49s)First Interactive (10.7s)
  12. 12. User Timing – performance.mark() https://caniuse.com/#feat=user-timing
  13. 13. Synthetic or and RUM Synthetic • Stable • More detailed measurements • Requires “representative” configuration Real User Measurement • Actual Performance • Highly variable • Limited competitive analysis
  14. 14. RUM Variability https://grafana.wikimedia.org/dashboard/db/navigation-timing
  15. 15. 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
  16. 16. Metric Recommendations Synthetic • First Contentful Paint • Speed Index • First Interactive Real User Measurement • First (Contentful) Paint • First Interactive User Timing
  17. 17. 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
  18. 18. 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/
  19. 19. 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 ∞
  20. 20. Effective Connection Type – ft.com 90.8% “effective 4G”*
  21. 21. 0% 5% 10% 15% 20% 25% First Contentful Paint (milliseconds) Amazon.com Walmart
  22. 22. Why it matters https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/
  23. 23. 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
  24. 24. https://wpostats.com/
  25. 25. •Inform Goals using RUM •Track Progress using Synthetic •Use representative configurations in Dev
  26. 26. Local dev testing – CPU Emulation
  27. 27. 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/
  28. 28. Tooling
  29. 29. Lighthouse https://developers.google.com/web/tools/lighthouse/
  30. 30. In WebPageTest https://www.webpagetest.org/lighthouse
  31. 31. Speed Index (WebPageTest): 4,150 Perceptual Speed Index (Lighthouse): 7,738
  32. 32. WebPageTest API – lighthouse=1
  33. 33. WebPageTest – Custom Metrics
  34. 34. WebPageTest – Code Injection
  35. 35. Thank You! @PatMeenan pmeenan@webpagetest.org

×