-
Notifications
You must be signed in to change notification settings - Fork 113
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(perf): Add new event to report modern performance metrics
- Loading branch information
Showing
5 changed files
with
193 additions
and
97 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
interface PerformancePaintTiming { | ||
loadTime?: DOMHighResTimeStamp; | ||
renderTime?: DOMHighResTimeStamp; | ||
} | ||
|
||
interface PerformanceReport { | ||
fcp?: number; | ||
lcp?: number; | ||
} | ||
|
||
export default class PreviewPerf { | ||
private fcpObserver: PerformanceObserver; | ||
|
||
private lcpObserver: PerformanceObserver; | ||
|
||
private performance: Performance = performance; | ||
|
||
private performanceReport: PerformanceReport = {}; | ||
|
||
/** | ||
* Performance metrics are recorded in a global context. We use only unbuffered metrics to avoid skewed data, | ||
* as buffered values can be set based on whatever page the user *first* landed on, which may not be preview. | ||
* | ||
* Glossary: | ||
* - FCP - First Contentful Paint (usually loading screen) | ||
* - LCP - Largest Contentful Paint (usually full content preview) | ||
*/ | ||
constructor() { | ||
this.fcpObserver = new window.PerformanceObserver(this.handleFcp.bind(this)); | ||
this.lcpObserver = new window.PerformanceObserver(this.handleLcp.bind(this)); | ||
|
||
try { | ||
this.fcpObserver.observe({ entryTypes: ['paint'] }); | ||
this.lcpObserver.observe({ entryTypes: ['largest-contentful-paint'] }); | ||
} catch (e) { | ||
// We're unable to collect these metrics from legacy browsers, such as IE11/Edge (non-Chromium) | ||
} | ||
} | ||
|
||
/** | ||
* Returns defined metrics if the following conditions are satisfied: | ||
* 1) it's recorded by the browser at all (some are Chrome-only, for now) | ||
* 2) if it was logged *after* the Preview SDK was loaded (not buffered) | ||
*/ | ||
public report(): PerformanceReport { | ||
return this.performanceReport; | ||
} | ||
|
||
protected handleFcp(list: PerformanceObserverEntryList): void { | ||
const fcpEntries = list.getEntriesByName('first-contentful-paint') || []; | ||
const fcpEntry = fcpEntries[0] || {}; | ||
|
||
this.performanceReport.fcp = Math.round(fcpEntry.startTime || 0); | ||
} | ||
|
||
protected handleLcp(list: PerformanceObserverEntryList): void { | ||
const lcpEntries = (list.getEntries() as PerformancePaintTiming[]) || []; | ||
const lcpEntry = lcpEntries[lcpEntries.length - 1] || {}; | ||
|
||
this.performanceReport.lcp = Math.round(lcpEntry.renderTime || lcpEntry.loadTime || 0); | ||
} | ||
} |
Oops, something went wrong.