$30 off During Our Annual Pro Sale. View Details »

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

    View Slide

  2. WHY MEASURE?

    View Slide

  3. WHAT TO
    MEASURE?

    View Slide

  4. PAGE RESOURCES

    View Slide

  5. PAGE WEIGHT
    • Transferred data
    • Slow connectivity
    • Metered contracts
    • Optimisation
    • Reduce assets
    • Minify JS & CSS
    • Active gzip
    Chrome DevTools

    View Slide

  6. # REQUESTS
    • Number of assets
    • Browser only uses 8 parallel
    requests per domain
    • Optimisation
    • Domain sharding
    • Bundling & spriting
    • HTTP/2

    View Slide

  7. CACHABILITY
    • Local browser cache
    • Reuse already loaded assets
    • Optimisations
    • expires / max-age header

    with asset-hashing
    • etag / last-modified

    View Slide

  8. TIMINGS

    View Slide

  9. • Server processing time
    • Browser waits for HTML
    • Optimisation
    • Streaming templates
    Time to First Byte / TTFB

    View Slide

  10. Page Loaded?
    DOMContentLoaded
    • Browser finished processing

    the HTML document
    Load
    • All referenced assets are loaded
    (img, fonts, ads, tracking, …)

    View Slide

  11. Custom Metrics - User Timing API
    window.performance
    .mark('sell_page_interactive')

    View Slide

  12. VISUAL METRICS

    View Slide

  13. • First Visual Reaction
    • „Critical Path“
    • Optimisation
    • Prioritize assets
    Time to First Paint
    https://github.com/sitespeedio/browsertime/blob/master/
    browserscripts/timings/firstPaint.js

    View Slide

  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

    View Slide

  15. • Viewport is fully rendered
    • Depends on screen size
    Time to Visually Complete

    View Slide

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

    View Slide

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

    View Slide

  18. HOW TO
    MEASURE?

    View Slide

  19. Network Throttling
    Chrome DevTools | Netwerk-Tab
    Firefox | Responsive Design Mode
    Network Link Conditioner | Hardware IO Tools for Xcode

    View Slide

  20. Chrome DevTools | Timeline-Tab
    Low-End
    Device
    Mode

    View Slide

  21. 5 METRIC TOOLS

    View Slide

  22. Yahoo YSlow
    • Calculates a score based on best practices
    • Focuses on network based metrics
    • Recommends improvements

    View Slide

  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

    View Slide

  24. WebPageTest
    • Father of the SpeedIndex
    • Solid results
    • Records video
    • Online results
    • Cons
    • Confusing user interface
    • Messy selfhosting

    (Windows)
    https://www.webpagetest.org/

    View Slide

  25. sitespeed.io
    • Docker based (selfhosting)
    • Visual Metrics
    • Modular
    • Accessibility Rules
    • CI & Metric Integration
    • Cons
    • might contain bugs
    https://www.sitespeed.io/

    View Slide

  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/

    View Slide

  27. GETTING REAL

    View Slide

  28. Real User Monitoring
    • Measuring inside the
    users browser
    • real device distribution
    • real browser distribution
    • real connectivity situations

    View Slide

  29. Navigation Timing API

    View Slide

  30. Resource Timing API

    View Slide

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

    View Slide

  32. boomerang.js
    • Collects metrics in the
    browser
    • Started by Yahoo!

    <br/>BOOMR.init({<br/>beacon_url: "/logging"<br/>});<br/>
    https://github.com/SOASTA/boomerang

    View Slide

  33. browsertime
    • Part of sitespeed.io
    • Leverages browser APIs
    https://github.com/sitespeedio/browsertime/tree/master/browserscripts/timings

    View Slide

  34. No OpenSource
    RUM Solution :(

    View Slide

  35. TIPS

    View Slide

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

    View Slide

  37. Continuous Integration
    & Visualisations

    View Slide

  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

    View Slide

  39. Show don’t tell
    webpagetest comparison

    View Slide

  40. View Slide

  41. Thanks for watching!
    Michael Geers / naltatis

    View Slide