Measuring Web Performance: Metrics & Tools

Transcript

1. 1.

   MEASURING WEB PERFORMANCE Michael Geers @naltatis JSUnconf.eu 2017

2. 2.

   WHY MEASURE?

3. 3.

   WHAT TO MEASURE?

4. 4.

   PAGE RESOURCES

5. 5.

   PAGE WEIGHT • Transferred data • Slow connectivity • Metered

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

   # REQUESTS • Number of assets • Browser only uses

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

   CACHABILITY • Local browser cache • Reuse already loaded assets

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

   TIMINGS

9. 9.

   • Server processing time • Browser waits for HTML •

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

    Page Loaded? DOMContentLoaded • Browser finished processing
 the HTML document

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

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

12. 12.

    VISUAL METRICS

13. 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. 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. 15.

    • Viewport is fully rendered • Depends on screen size

    Time to Visually Complete
16. 16.

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

17. 17.

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

18. 18.

    HOW TO MEASURE?

19. 19.

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

    Mode Network Link Conditioner | Hardware IO Tools for Xcode
20. 20.

    Chrome DevTools | Timeline-Tab Low-End Device Mode

21. 21.

    5 METRIC TOOLS

22. 22.

    Yahoo YSlow • Calculates a score based on best practices

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

    WebPageTest • Father of the SpeedIndex • Solid results •

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

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

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

    GETTING REAL

28. 28.

    Real User Monitoring • Measuring inside the users browser •

    real device distribution • real browser distribution • real connectivity situations
29. 29.

    Navigation Timing API

30. 30.

    Resource Timing API

31. 31.

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

    API • Experimental RUM-SpeedIndex
32. 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. 33.

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

34. 34.

    No OpenSource RUM Solution :(

35. 35.

    TIPS

36. 36.

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

37. 37.

    Continuous Integration & Visualisations

38. 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. 39.

    Show don’t tell webpagetest comparison

40. 40.

    None
41. 41.

    Thanks for watching! Michael Geers / naltatis