Pro Yearly is on sale from $80 to $50! »

Measuring Web Performance: Metrics & Tools

Measuring Web Performance: Metrics & Tools

The talk was presented on JSUnconf.eu 2017 in Hamburg

457365e2e75c27f3e1c3a3744f5c5e4b?s=128

Michael Geers

March 25, 2017
Tweet

Transcript

  1. MEASURING WEB PERFORMANCE Michael Geers @naltatis JSUnconf.eu 2017

  2. WHY MEASURE?

  3. WHAT TO MEASURE?

  4. PAGE RESOURCES

  5. PAGE WEIGHT • Transferred data • Slow connectivity • Metered

    contracts • Optimisation • Reduce assets • Minify JS & CSS • Active gzip Chrome DevTools
  6. # REQUESTS • Number of assets • Browser only uses

    8 parallel requests per domain • Optimisation • Domain sharding • Bundling & spriting • HTTP/2
  7. CACHABILITY • Local browser cache • Reuse already loaded assets

    • Optimisations • expires / max-age header
 with asset-hashing • etag / last-modified
  8. TIMINGS

  9. • Server processing time • Browser waits for HTML •

    Optimisation • Streaming templates Time to First Byte / TTFB
  10. Page Loaded? DOMContentLoaded • Browser finished processing
 the HTML document

    Load • All referenced assets are loaded (img, fonts, ads, tracking, …)
  11. Custom Metrics - User Timing API window.performance .mark('sell_page_interactive')

  12. VISUAL METRICS

  13. • First Visual Reaction • „Critical Path“ • Optimisation •

    Prioritize assets Time to First Paint https://github.com/sitespeedio/browsertime/blob/master/ browserscripts/timings/firstPaint.js
  14. • Primary Content is Visible • above-the-fold text • e.g.

    product image • „Soft metric“ Time to First Meaningful Paint https://docs.google.com/document/d/ 1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view#heading=h.yi0gbyc627x1
  15. • Viewport is fully rendered • Depends on screen size

    Time to Visually Complete
  16. SpeedIndex https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

  17. SpeedIndex https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index lower is better

  18. HOW TO MEASURE?

  19. Network Throttling Chrome DevTools | Netwerk-Tab Firefox | Responsive Design

    Mode Network Link Conditioner | Hardware IO Tools for Xcode
  20. Chrome DevTools | Timeline-Tab Low-End Device Mode

  21. 5 METRIC TOOLS

  22. Yahoo YSlow • Calculates a score based on best practices

    • Focuses on network based metrics • Recommends improvements
  23. Google PageSpeed Insights • Analyses rendering • Critical path •

    SEO relevant • Cons • Not open source (any more) • Google API-Key required • Pre-RWD • Aggressive mobile rules
  24. WebPageTest • Father of the SpeedIndex • Solid results •

    Records video • Online results • Cons • Confusing user interface • Messy selfhosting
 (Windows) https://www.webpagetest.org/
  25. sitespeed.io • Docker based (selfhosting) • Visual Metrics • Modular

    • Accessibility Rules • CI & Metric Integration • Cons • might contain bugs https://www.sitespeed.io/
  26. Google Lighthouse • Chrome Extension • Command Line Tool •

    Visual Metrics • First Meaningful Paint • Interaction-Metrics • Estimated Input Latency • Progressive Enhancement https://developers.google.com/web/tools/lighthouse/
  27. GETTING REAL

  28. Real User Monitoring • Measuring inside the users browser •

    real device distribution • real browser distribution • real connectivity situations
  29. Navigation Timing API

  30. Resource Timing API

  31. https://github.com/WPO-Foundation/RUM-SpeedIndex • Google project • Combines viewport & resource timing

    API • Experimental RUM-SpeedIndex
  32. boomerang.js • Collects metrics in the browser • Started by

    Yahoo! <script src="boomerang/boomerang.js" /> <script> BOOMR.init({ beacon_url: "/logging" }); </script> https://github.com/SOASTA/boomerang
  33. browsertime • Part of sitespeed.io • Leverages browser APIs https://github.com/sitespeedio/browsertime/tree/master/browserscripts/timings

  34. No OpenSource RUM Solution :(

  35. TIPS

  36. Performance Budgets https://timkadlec.com/2013/01/setting-a-performance-budget/

  37. Continuous Integration & Visualisations

  38. Facebook 2G Tuesday • Slowdown to 2G speed for 2

    hours • Opt-in dialogue the Facebook app http://www.businessinsider.com/facebook-2g-tuesdays-to-slow-employee-internet-speeds-down-2015-10?IR=T
  39. Show don’t tell webpagetest comparison

  40. None
  41. Thanks for watching! Michael Geers / naltatis