Measuring Web Performance: Metrics & Tools

The talk was presented on JSUnconf.eu 2017 in Hamburg

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