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
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
41. Thanks for watching! Michael Geers / naltatis