Record first paint time from chrome.loadTimes (Chrome/Opera, IE11) to Google Analytics
(function ($) { | |
'use strict'; | |
function recordTimeToFirstPaint() { | |
// Use Chrome's loadTimes or IE 9+'s msFirstPaint to record the time to render in milliseconds: | |
var firstPaintTime, timingSource; | |
if ('chrome' in window && $.isFunction(window.chrome.loadTimes)) { | |
var loadTimes = window.chrome.loadTimes(); | |
// A small percentage of traffic from Chrome in the wild returns impossibly large values – 2+ | |
// days! – which need to be filtered out: | |
firstPaintTime = loadTimes.firstPaintTime - loadTimes.startLoadTime; | |
if (firstPaintTime > 3600) { | |
Raven.captureMessage('chrome.loadTimes() reported impossible values', | |
{extra: {loadTimes: loadTimes}}); | |
return; | |
} | |
// Convert from seconds to milliseconds: | |
firstPaintTime = Math.round(firstPaintTime * 1000); | |
timingSource = 'chrome.loadTimes'; | |
} else if ('performance' in window) { | |
var navTiming = window.performance.timing; | |
if (navTiming.navigationStart === 0) { | |
return; // IE9 bug - see below | |
} | |
// See http://msdn.microsoft.com/ff974719 | |
firstPaintTime = navTiming.msFirstPaint - navTiming.navigationStart; | |
timingSource = 'msFirstPaint'; | |
} | |
if (typeof firstPaintTime == 'number' && firstPaintTime > 0) { | |
ga('send', { | |
hitType: 'timing', | |
transport: 'beacon', | |
timingCategory: 'RUM', | |
timingVar: 'First Paint (ms)', | |
timingValue: firstPaintTime, | |
timingLabel: timingSource | |
}); | |
} | |
} | |
// Defer collecting data until after the load event has finished to avoid an IE9 | |
// bug where navigationStart will be 0 until after the browser updates the | |
// performance.timing data structure: | |
$(window).on('load', function () { | |
setTimeout(recordTimeToFirstPaint); | |
}); | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment