Making your grandparents happy

With Web App Performance Monitoring

 

Maor Frankel & Tsachi Shushan

WHY?

Old Phone

Old computer

slow internet

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?

Copy of Frontend Ops - Visualize your real web app performance

By Maor Frankel

Copy of Frontend Ops - Visualize your real web app performance

  • 403