Measuring Web Performance: Metrics & Tools

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

40. None

41. Thanks for watching! Michael Geers / naltatis