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