Performance Monitoring for single page applications.
-
Upload
nitin-mehra -
Category
Internet
-
view
95 -
download
0
Transcript of Performance Monitoring for single page applications.
![Page 1: Performance Monitoring for single page applications.](https://reader035.fdocuments.us/reader035/viewer/2022081605/58cf67921a28ab01358b6067/html5/thumbnails/1.jpg)
Performance Monitoring for SPA
Nitin MehraMay 3, 2023
![Page 2: Performance Monitoring for single page applications.](https://reader035.fdocuments.us/reader035/viewer/2022081605/58cf67921a28ab01358b6067/html5/thumbnails/2.jpg)
Agenda
WhatWhyHowChallengesWhat next
![Page 3: Performance Monitoring for single page applications.](https://reader035.fdocuments.us/reader035/viewer/2022081605/58cf67921a28ab01358b6067/html5/thumbnails/3.jpg)
Passive MonitoringAlerting of performance
What
ServerSide• Db performance, method execution time …
Clientside• User Experience time, Page load time, network time …
![Page 4: Performance Monitoring for single page applications.](https://reader035.fdocuments.us/reader035/viewer/2022081605/58cf67921a28ab01358b6067/html5/thumbnails/4.jpg)
Synthetic vs RUM
Why
![Page 5: Performance Monitoring for single page applications.](https://reader035.fdocuments.us/reader035/viewer/2022081605/58cf67921a28ab01358b6067/html5/thumbnails/5.jpg)
Synthetic Testing
![Page 6: Performance Monitoring for single page applications.](https://reader035.fdocuments.us/reader035/viewer/2022081605/58cf67921a28ab01358b6067/html5/thumbnails/6.jpg)
Synthetic Testing
![Page 7: Performance Monitoring for single page applications.](https://reader035.fdocuments.us/reader035/viewer/2022081605/58cf67921a28ab01358b6067/html5/thumbnails/7.jpg)
RUM
![Page 8: Performance Monitoring for single page applications.](https://reader035.fdocuments.us/reader035/viewer/2022081605/58cf67921a28ab01358b6067/html5/thumbnails/8.jpg)
RUM
![Page 9: Performance Monitoring for single page applications.](https://reader035.fdocuments.us/reader035/viewer/2022081605/58cf67921a28ab01358b6067/html5/thumbnails/9.jpg)
Synthetic vs RUM
Why
Measure performance by real usersMeasure Improvements
Alerts on issuesHighlight 3rd party Dependencies
![Page 10: Performance Monitoring for single page applications.](https://reader035.fdocuments.us/reader035/viewer/2022081605/58cf67921a28ab01358b6067/html5/thumbnails/10.jpg)
How
Navigation Timing API
![Page 11: Performance Monitoring for single page applications.](https://reader035.fdocuments.us/reader035/viewer/2022081605/58cf67921a28ab01358b6067/html5/thumbnails/11.jpg)
Navigation Timing API
![Page 12: Performance Monitoring for single page applications.](https://reader035.fdocuments.us/reader035/viewer/2022081605/58cf67921a28ab01358b6067/html5/thumbnails/12.jpg)
How
User Timing API
Navigation Timing API
![Page 13: Performance Monitoring for single page applications.](https://reader035.fdocuments.us/reader035/viewer/2022081605/58cf67921a28ab01358b6067/html5/thumbnails/13.jpg)
User Timing API
window.performance.measure(‘content_load_time’, ‘navigationStart’, ‘content_loaded’);;
window.performance.mark(‘content_loaded’);
Window.performance.getEntriesByType(‘measure’);
![Page 14: Performance Monitoring for single page applications.](https://reader035.fdocuments.us/reader035/viewer/2022081605/58cf67921a28ab01358b6067/html5/thumbnails/14.jpg)
Naïve Solution
PerformanceMeasure[] = Window.performance.getEntriesByType(‘measure’)
window.performance.measure(‘page_load’, ‘navigationStart’, ‘loadEventEnd’);
![Page 15: Performance Monitoring for single page applications.](https://reader035.fdocuments.us/reader035/viewer/2022081605/58cf67921a28ab01358b6067/html5/thumbnails/15.jpg)
Challenges
Onload!
Only 1 page onLoad for SPA
![Page 16: Performance Monitoring for single page applications.](https://reader035.fdocuments.us/reader035/viewer/2022081605/58cf67921a28ab01358b6067/html5/thumbnails/16.jpg)
Challenges
![Page 17: Performance Monitoring for single page applications.](https://reader035.fdocuments.us/reader035/viewer/2022081605/58cf67921a28ab01358b6067/html5/thumbnails/17.jpg)
Solution (for fresh page load)
<html><head>
<script type="text/css" rel="stylesheet" src=‘main.css’><script type=‘text/javascript’>window.performance.mark(‘css_loaded’)</script><script type=‘text/javascript’ src=‘main.js’><script type=‘text/javascript’>window.performance.mark(‘js_loaded’)</script>
</head><body>
<div id=‘atf’>…<img src=‘hero.jpg’ onload=‘window.performance.mark(‘hero_img_loaded’)’/>…
</div> <script type=‘text/javascript’>window.performance.mark(‘atf_content_loaded’)</script><div id=‘btf’></div>
</body></html>
![Page 18: Performance Monitoring for single page applications.](https://reader035.fdocuments.us/reader035/viewer/2022081605/58cf67921a28ab01358b6067/html5/thumbnails/18.jpg)
Solution (for fresh page load)
Navigation.js
function calculateMaxTimeMarked() {var markers = window.performance.getEntriesByType("mark");var lastMarkedTime;for (i = 0; i < markers.length; i++) { if ((lastmarkedTime == undefined) || (markers[i].startTime > lastmarkedTime))
lastMarkedTime = markers[i].startTime;}calculateLoadTime( lastMarkedTime)
}
Function calculateLoadTime( lastMarkedTime) { var timeTaken = lastMarkedTime;
var message = 'fresh page load:' + window.location.pathname + ', time taken:' + timeTaken ; $.post("/fsg/IMWebLogger.ashx", { Message: message, level: "warn" });
}
![Page 19: Performance Monitoring for single page applications.](https://reader035.fdocuments.us/reader035/viewer/2022081605/58cf67921a28ab01358b6067/html5/thumbnails/19.jpg)
Solution (for route change)
Function calculateLoadTime( lastMarkedTime) {var markedLink = this.getTheMarkedLinkClicked();
if (markedLink) timetaken= lastMarkedTime - markedLink.startTime; var timeTaken = lastMarkedTime;
var message = 'fresh page load:' + window.location.pathname + ', time taken:' + timeTaken ; $.post("/fsg/IMWebLogger.ashx", { Message: message, level: "warn" });
}
![Page 20: Performance Monitoring for single page applications.](https://reader035.fdocuments.us/reader035/viewer/2022081605/58cf67921a28ab01358b6067/html5/thumbnails/20.jpg)
What Next?
1. This is dev intensive.2. We can make this partially automated by capturing above
the fold content in an offline step and putting markers as described. We can capture dom mutations in this step and put it as part of the performance metric calculated.
3. Including a javascript file (for the algorithm described above) which will be used to capture metrics. Finally we will cover an evaluation of one of the tools that helps in real user performance monitoring for single page applications