Making Your Grandparents Happy

With Web App Performance Monitoring

 

Maor Frankel

Real Users!

  • Old Phones
  • Old Computers
  • Slow Internet

WHY don't we accommodate?

  • Maybe - You don't care
  • Or maybe  - You don't know...
  • New web application, optimised for performance
  • Over time, app became bigger, and slower
  • We were in denial
  • Users complained

background: #story;

What to do?

  • Put out the fires - good
  • How to prevent this from happening again? - better

MONITORING

  • Availability
  • Functionality
  • API Monitoring
  • Synthetic Performance Tests
  • ?

Real Time User Monitoring (RUM)

Real Data, Real Users, Real Time

Third Parties

BUILD YOUR OWN

Leverage our existing systems

SUCCESS!

ETC...

  • If your not monitoring it, it doesn't exist 
  • Dev time is not real time
  • Before you pay for it, try to build it

Thank You For Listening!

http://tinyurl.com/y4y4b64j

@Mr_Frankel

@MrFrank

Web Application Are Getting Bigger!

And Slower?

Total Kilobytes

http archive

onLoad

http archive

"This is the time it takes the page to load. It begins when the navigation begins and ends when the webpage has completed loading in the user’s browser"

Page Load?

 

 pageLoadTime = loadEventStart - navigationStart

 

The Plan!

Web Performance API

"The High Resolution Time standard defines a Performance interface that supports client-side latency measurements within applications. "

const then = performance.now();
console.log(then) // 3157728.1249999944 

(function doSomething() {
    for(let i=0 ; i < 10000 ; i++){
    ///DO SOMETHING...
    
    }
})()

const now = performance.now();
console.log(now) // 3158311.935000005
console.log((now - then)) // 583.8100000107661

Good

performance.mark('doSomething-start')

function doSomething() {
    for(let i=0 ; i < 10000 ; i++){    
     ///DO SOMETHING...
    }
}

performance.mark('doSomething-end')
performance.measure('doSomething', 'doSomething-start', 'doSomething-end')
let marks = performance.getEntriesByName('doSomething', 'mark')
console.info(`${marks[1].startTime - marks[0].startTime}`) // 583.8100000107661

Better

<!doctype html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <base href='/'/>
  <title>Outbrain - Amplify</title>
  <script>
    performance.mark('page-load-start');
  </script>

Marking key sections

<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>

Marking key sections

setDatasource(dataSource) {
   this.showGridLoadingOverlay()  
   performance.mark('reports-start')    
}


whenGridRenderComplete() {
   performance.mark('reports-end')
   this.hideGridLoadingOverlay()      
}

Marking key sections


performance.measure('ob_css', 'css-start', 'css-end');
performance.measure('ob_scripts', 'scripts-start', 'scripts-end');
performance.measure('ob_total_page', 'total-page-start', 'reports-end');

Measuring the metrics


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 : ''
      }
    });

//Fall back to http post
navigator.sendBeacon('/performance-benchmark', { measures });

Phoning home

 this.app.post('/performance-benchmark', this.performanceBenchmark.observe);

 async observe(req: express.Request, res: express.Response) {
   const events: BenchmarkEvent[] = this.parseEvents(req.body);
   this.metrics[`${event.name}_country`].observe(
            {
              app: event.app,
              browser: event.browser,
              speed: event.speed,
              country,
            },
            event.duration
          )
   })    
    return res.sendStatus(200);
  }

Phoning home

Putting

it all together

The Gotchas

Reduce

The Noise

Big Data

Tracking

Memory Leaks

console.log(performance.memory);

// Would show, for example
{
 jsHeapSizeLimit: 767557632,
 totalJSHeapSize: 58054528,
 usedJSHeapSize: 42930044
}

Performance.memory

const MAX_MEMORY_LIMIT = 1000 * 1048576; // 1000MB

setInterval(() => {
    if(performance.memory.usedJsHeadSize > MAX_MEMORY_LIMIT){
    
    //fire alert
    }
}, 60000*30);

Performance.memory

 QUESTIONS? 

Made with Slides.com