Skip to content

Instantly share code, notes, and snippets.

@jpvincent

jpvincent/print-perf-metrics.js

Last active February 11, 2022 13:05
Download ZIP

Revisions

  1. jpvincent revised this gist Feb 11, 2022. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion print-perf-metrics.js
    View file
    Original file line number Diff line number Diff line change
    @@ -11,10 +11,11 @@ const customMetrics = allEntries
    return final // object with key looking like this "MARK — loadInAsync que/query_grid_webpart start" and value is number of milliseconds
    }, {})

    // Pour Ivalua en mode DEV seulement
    var jsTimer = document.getElementById('jsTimerSpan').innerText // ' +0,45'
    .split(ivScope.UserNumberFormat.NumberDecimalSeparator) // [' +0', '45']
    .map(Number) // [0, 45]
    jsTimer = jsTimer[0] * 1000 + jsTimer[1] * 10 // 45 (ms)
    jsTimer = jsTimer[0] * 1000 + jsTimer[1] * 10 // 450 (en millisecondes)


    const out = {
  2. jpvincent created this gist Feb 11, 2022.
    31 changes: 31 additions & 0 deletions print-perf-metrics.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@

    const timings = performance.getEntriesByType('navigation')[0]
    const allEntries = performance.getEntries()
    const customMetrics = allEntries
    .filter(entry => ['mark', 'measure'].includes(entry.entryType )) // array of PerformanceMark / PerformanceMeasure objects
    .reduce((final, current) => { // make an object
    final[current.entryType.toUpperCase() + ' — ' + current.name] // key name : "MARK — loadInAsync que/query_grid_webpart start"
    = Math.round(
    current.entryType === 'measure' ? current.duration : current.startTime
    )
    return final // object with key looking like this "MARK — loadInAsync que/query_grid_webpart start" and value is number of milliseconds
    }, {})

    var jsTimer = document.getElementById('jsTimerSpan').innerText // ' +0,45'
    .split(ivScope.UserNumberFormat.NumberDecimalSeparator) // [' +0', '45']
    .map(Number) // [0, 45]
    jsTimer = jsTimer[0] * 1000 + jsTimer[1] * 10 // 45 (ms)


    const out = {
    'Time To First Byte':Math.round(timings.responseStart),
    'Server response time': Math.round(timings.responseStart - timings.requestStart),
    // 'Input Latency' ==> plus compliqué, demande de poser des listeners en début de page
    'First Paint': Math.round(allEntries.filter(entry => entry.name === 'first-paint')[0].startTime),
    'jsTimer' : jsTimer,
    // Visual Layout Stability ==> demande de poser des listeners en début de page
    // JS blocking time ==> demande de poser des listeners en début de page
    ...customMetrics
    }

    console.table(out)