5a82812568
* add new types of performance monitoring * adding LCP * adding cls to perf relayer * add test for cls and lcp * nit fixes * re-organizing code * fixing tests for lcp * updating size limits in test
78 lines
2.2 KiB
JavaScript
78 lines
2.2 KiB
JavaScript
function isTypeSupported(type) {
|
|
if (self.PerformanceObserver && PerformanceObserver.supportedEntryTypes) {
|
|
return PerformanceObserver.supportedEntryTypes.includes(type)
|
|
}
|
|
return false
|
|
}
|
|
|
|
export function observeLayoutShift(onPerfEntry) {
|
|
if (isTypeSupported('layout-shift')) {
|
|
let cumulativeScore = 0
|
|
const observer = new PerformanceObserver(list => {
|
|
for (const entry of list.getEntries()) {
|
|
// Only count layout shifts without recent user input.
|
|
if (!entry.hadRecentInput) {
|
|
cumulativeScore += entry.value
|
|
}
|
|
}
|
|
})
|
|
observer.observe({ type: 'layout-shift', buffered: true })
|
|
|
|
document.addEventListener(
|
|
'visibilitychange',
|
|
function clsObserver() {
|
|
if (document.visibilityState === 'hidden') {
|
|
// Force any pending records to be dispatched.
|
|
observer.takeRecords()
|
|
observer.disconnect()
|
|
removeEventListener('visibilitychange', clsObserver, true)
|
|
onPerfEntry({
|
|
name: 'cumulative-layout-shift',
|
|
value: cumulativeScore,
|
|
})
|
|
}
|
|
},
|
|
true
|
|
)
|
|
}
|
|
}
|
|
|
|
export function observeLargestContentfulPaint(onPerfEntry) {
|
|
if (isTypeSupported('largest-contentful-paint')) {
|
|
// Create a variable to hold the latest LCP value (since it can change).
|
|
let lcp
|
|
|
|
// Create the PerformanceObserver instance.
|
|
const observer = new PerformanceObserver(entryList => {
|
|
const entries = entryList.getEntries()
|
|
const lastEntry = entries[entries.length - 1]
|
|
lcp = lastEntry.renderTime || lastEntry.loadTime
|
|
})
|
|
|
|
observer.observe({ type: 'largest-contentful-paint', buffered: true })
|
|
|
|
document.addEventListener(
|
|
'visibilitychange',
|
|
function lcpObserver() {
|
|
if (lcp && document.visibilityState === 'hidden') {
|
|
removeEventListener('visibilitychange', lcpObserver, true)
|
|
onPerfEntry({
|
|
name: 'largest-contentful-paint',
|
|
value: lcp,
|
|
})
|
|
}
|
|
},
|
|
true
|
|
)
|
|
}
|
|
}
|
|
|
|
export function observePaint(onPerfEntry) {
|
|
const observer = new PerformanceObserver(list => {
|
|
list.getEntries().forEach(onPerfEntry)
|
|
})
|
|
observer.observe({
|
|
type: 'paint',
|
|
buffered: true,
|
|
})
|
|
}
|