Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Measuring Web Performance: Metrics & Tools

Measuring Web Performance: Metrics & Tools

The talk was presented on JSUnconf.eu 2017 in Hamburg

Michael Geers

March 25, 2017
Tweet

More Decks by Michael Geers

Other Decks in Technology

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