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. 5.

    PAGE WEIGHT • Transferred data • Slow connectivity • Metered

    contracts • Optimisation • Reduce assets • Minify JS & CSS • Active gzip Chrome DevTools
  2. 6.

    # REQUESTS • Number of assets • Browser only uses

    8 parallel requests per domain • Optimisation • Domain sharding • Bundling & spriting • HTTP/2
  3. 7.

    CACHABILITY • Local browser cache • Reuse already loaded assets

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

    • Server processing time • Browser waits for HTML •

    Optimisation • Streaming templates Time to First Byte / TTFB
  6. 10.

    Page Loaded? DOMContentLoaded • Browser finished processing
 the HTML document

    Load • All referenced assets are loaded (img, fonts, ads, tracking, …)
  7. 13.

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

    Prioritize assets Time to First Paint https://github.com/sitespeedio/browsertime/blob/master/ browserscripts/timings/firstPaint.js
  8. 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
  9. 19.

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

    Mode Network Link Conditioner | Hardware IO Tools for Xcode
  10. 22.

    Yahoo YSlow • Calculates a score based on best practices

    • Focuses on network based metrics • Recommends improvements
  11. 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
  12. 24.

    WebPageTest • Father of the SpeedIndex • Solid results •

    Records video • Online results • Cons • Confusing user interface • Messy selfhosting
 (Windows) https://www.webpagetest.org/
  13. 25.

    sitespeed.io • Docker based (selfhosting) • Visual Metrics • Modular

    • Accessibility Rules • CI & Metric Integration • Cons • might contain bugs https://www.sitespeed.io/
  14. 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/
  15. 28.

    Real User Monitoring • Measuring inside the users browser •

    real device distribution • real browser distribution • real connectivity situations
  16. 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
  17. 35.
  18. 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
  19. 40.