FRONTEND OPS
Visualize your real web app performance
Tsachi Shushan, Software Engineer @
- New web application, optimised for performance
- Over time, app became slow
- Users were not happy
background: #story;
WHY IS IT SLOW?
- First instinct - find the problem
- A better question: why didn't we know it's slow?
THE DEVOPS MINDSET
- How can we improve?
- Performance monitoring was the missing part
FRONTEND MONITORING
- Availability, functionality, speed
- Automated performance tests vs RUM
READY TO BUILD
- Started with a simple metric
- Leveraged our current monitoring system
- Added more metrics and dimensions
<script>performance.mark('scripts-start');</script>
<script src="https://u.outbrain.com/static/vendor.87b3e412.js"></script>
<script src="https://u.outbrain.com/static/app.10f8627e.js"></script>
<script>performance.mark('scripts-end');</script>
performance.measure('ob_css', 'css-start', 'css-end');
performance.measure('ob_scripts', 'scripts-start', 'scripts-end');
performance.measure('ob_total_page', 'total-page-start'
, 'total-page-end');
const measures = performance.getEntriesByType('measure')
.filter(msr => msr.name.includes('ob_'))
.map(msr => {
return {
name: msr.name,
duration: parseInt(msr.duration),
speed: connection ? connection.effectiveType : ''
}
});
this.http.post('/performance-benchmark', { measures });
SUCCESS!
- Identified bottlenecks
- Better correlation between changes and performance issues
- Raised developers awareness
NEXT STEPS
- Alerts
- Specific users flows
- Memory leaks
ALTERNATIVES
QUESTIONS?
Frontend Ops - Visualize your real web app performance
By Tsachi Shushan
Frontend Ops - Visualize your real web app performance
- 461