Performance Metrics for Modern Apps

It has become critically important to improve your performance of web apps. Users should have a good visual experience while loading a web app. Be it pre-loading important resources, or displaying cached resources, or rendering hero elements first, users should not feel blank and should be able to interact with web apps quickly

There are certain myths about web performance monitoring. Myths like "My website loads in X seconds" or "Performance only matters at load time". But, the reality is poor performance can happen at any time, not just during load. Traditional performance metrics like DOMContentLoad and onLoad are highly unreliable

You can learn how to improve user experience and web performance in different scenarios using various performance metrics

Transcript

1. PERFORMANCE METRICS FOR MODERN APPS 1 http://trafficbooster.guru/blog/2018/01/23/5-proven-ways-to-get-website-traffic
2. ABOUT ME Web Performance @ AppDynamics shubham.jindal@appdynamics.com shubham-jindal-67b69048 skiindal93
3. WHAT IS WEB PERFORMANCE MONITORING? Measuring speed of your website using important metrics
4. WHY? User Retention!
5. WHY? 40% will abandon a site that takes >3secs to load 47% expect a page to load in 2 secs 52% say fast load time speed is important to site loyalty
6. TIMELINE What metrics to look for? What do they mean? Why are they important? How are they measured? Web APIs to look for? 6
7. METRICS
8. METRICS LOAD MILESTONE VISUAL INTERACTIVE https://www.iconfinder.com
9. LOAD MILESTONE VISUAL INTERACTIVE METRICS https://www.iconfinder.com
10. LOAD METRICS Determines final load time of a web page ๏ Page Load Time (onLoad) ๏ Total Page Load Time (SPA)
12. PAGE LOAD TIME onLoad onLoad: Resources finished loading/rendering
13. TOTAL PAGE LOAD TIME onLoad Actual Load Time Resources and XHR finished loading
14. At onLoad Actual Load v/s
15. DEMO onLoad vs Actual Load Time https://github.com/DanWahlin/Angular-JumpStart
16. HOW TO IMPROVE? ➤ onLoad only works for non SPA frameworks ➤ Always look for “Total Page Load Time” COMPRESS MINIFY HTTP2 https://www.iconfinder.com
17. METRICS LOAD MILESTONE VISUAL INTERACTIVE https://www.iconfinder.com
18. MILESTONE METRICS Elapsed time b/w navigation to a page and a critical milestone ๏ Time To First Byte (TTFB) ๏ Server Response Time (SRT) ๏ DOM Content Loaded (DCL)
19. NAVIGATION TIMING API NETWORK FRONTEND window.performance.timing navigationStart responseStart TTFB SRT DCL https://www.w3.org/TR/navigation-timing
21. IDEAL METRICS 250.0 200.0 TTFB SRT ms ms
22. HOW TO IMPROVE? Reduce blocking scripts Reduce DOM size Use CDN for TTFB for SRT for DCL https://www.iconfinder.com
23. METRICS LOAD MILESTONE VISUAL INTERACTIVE https://www.iconfinder.com
24. SPEED INDEX ➤ Overall Score based on visual progress of viewport of page ➤ Can’t be computed on client side https://rigor.com/blog/2017/07/monitoring-the-ux
25. VISUALLY COMPLETE ➤ Content in the viewport has finished rendering ➤ Nothing has changed in the viewport after that Why viewport? ๏ Good user experience ๏ User can see full content loaded in screen and engage
27. What is visually complete time for these sites? https://rigor.com/blog/2017/07/monitoring-the-ux
28. WEBPAGE TEST ➤ Test any website from any location across globe with different connection speeds ➤ Mostly run on EC2 machines ➤ Synthetic tests DEMO
29. IDEAL METRICS Speed Index < 5000
30. HOW TO IMPROVE? LAZY LOAD IMAGES CACHE RESOURCES (Intersection Observer API) https://www.iconfinder.com
31. METRICS LOAD MILESTONE VISUAL INTERACTIVE https://www.iconfinder.com
32. INTERACTIVE METRICS https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
33. PAINT TIMING API
34. FMP AND TTI ➤ FMP: Most “important” part of page is visually rendered ➤ TTI: Point at which page is visually rendered and capable to respond to user input ๏ FMP can’t be measured easily ๏ Most “important” parts of pages are different for each website ๏ TTI Polyfill by Chrome
35. WHY INTERACTIVE METRICS? Good Visual Progress User Experience https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
36. HOW TO IMPROVE? https://winaero.com/blog/wp-content/uploads/2017/02/Settings-Gear-icon.png AVOID LONG TASKS (Long Tasks API) USE SERVICE WORKERS BACKGROUND TASKS (Web Workers) https://www.iconfinder.com
37. LIGHTHOUSE
38. PROBLEMS WITH LOCAL TESTING VARIANT NETWORK SPEED DIFFERENT/LATEST BROWSER DIFFERENT OPERATING SYSTEMS DIFFERENT GEO LOCATIONS https://www.iconfinder.com
39. SOLUTION Use tools like AppDynamics to overcome the problems
40. “ When performance is measured, performance improves When performance is measured and reported, the rate of improvement accelerates -Thomas Monson