Visualize your REAL web app performance
By Tsachi Shushan, Software Engineer @
Our (painful) story
Two year ago, launched a new web application, tested and optimised for performance
300 components and 1000 commits later - page loading time was more than 17 seconds
Users were not happy
Why is it slow?
First instinct - find the problem (chrome devtools, webpagetest)
A better question: why didn't we know it's slow?
Goals
- Constantly monitor app performance
- Measure real users experience
- Add performance awareness to our dev cycle
Now what?
Added more metrics and dimensions
Leveraged our current monitoring system
Started with a basline
Created some simple metrics
<script>performance.mark('scripts-start');</script>
<script src="https://u.outbrain.com/amplify/static/vendor.87b3e4af58273a61209b.js"></script>
<script src="https://u.outbrain.com/amplify/static/app.10f8627e9a08eca68701.js"></script>
<script>performance.mark('scripts-end');</script>
...
performance.measure('ob_css_load_time', 'css-start', 'css-end');
performance.measure('ob_scripts_load_time', 'scripts-start', 'scripts-end');
performance.measure('ob_total_page_load_time', 'total-page-load-start', 'total-page-load-end');
const measures = performance.getEntriesByType('measure')
.filter(msr => msr.name.includes('ob_'))
.map(msr => {
return {
name: msr.name,
duration: parseInt(msr.duration),
browser: this.browserDetectService.type,
speed: connection ? connection.effectiveType : ''
}
});
this.http.post('/performance-benchmark', { measures });
Success!
Identified and solved number of problems
Raised developers awareness
Clearly see how changes to our code affect performance
What's Next?
Specific users flows
Memory leaks
Alternatives
Visualize your real web app performance
By Tsachi Shushan
