performance monitoring for single page applications
TRANSCRIPT
Performance Monitoring for SPA
Nitin MehraMay 3, 2023
Agenda
WhatWhyHowChallengesWhat next
Passive MonitoringAlerting of performance
What
ServerSide• Db performance, method execution time …
Clientside• User Experience time, Page load time, network time …
Synthetic vs RUM
Why
Synthetic Testing
Synthetic Testing
RUM
RUM
Synthetic vs RUM
Why
Measure performance by real usersMeasure Improvements
Alerts on issuesHighlight 3rd party Dependencies
How
Navigation Timing API
Navigation Timing API
How
User Timing API
Navigation Timing API
User Timing API
window.performance.measure(‘content_load_time’, ‘navigationStart’, ‘content_loaded’);;
window.performance.mark(‘content_loaded’);
Window.performance.getEntriesByType(‘measure’);
Naïve Solution
PerformanceMeasure[] = Window.performance.getEntriesByType(‘measure’)
window.performance.measure(‘page_load’, ‘navigationStart’, ‘loadEventEnd’);
Challenges
Onload!
Only 1 page onLoad for SPA
Challenges
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>
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" });
}
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" });
}
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