Skip to content

Commit d70e223

Browse files
authored
docs(performance): Adding information on polyfilling FID (#2096)
1 parent c545eea commit d70e223

File tree

1 file changed

+11
-1
lines changed

1 file changed

+11
-1
lines changed

docs/performance/getting-started.md

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,16 @@ The page load trace breaks down into the following default metrics:
3232
* [first input delay traces](https://firebase.google.com/docs/perf-mon/automatic-web#input-delay) — measure the time between when the user interacts with a page and when the browser is able to respond to that input
3333
* **Angular specific traces** - measure the time needed for `ApplicationRef.isStable` to be true, an important metric to track if you're concerned about solving Zone.js issues for proper functionality of NGSW and Server Side Rendering
3434

35+
### Measuring First Input Delay
36+
37+
> First Input Delay (FID) measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction. [See the article on the Google Developer's Blog for more information on FID.](https://developers.google.com/web/updates/2018/05/first-input-delay)
38+
39+
In order to track first input delay, you'll want to [polyfill the browser performance API](https://github.com/GoogleChromeLabs/first-input-delay):
40+
41+
`npm install --save-dev first-input-delay`
42+
43+
Then add `import 'first-input-delay';` to your `src/polyfills.ts`.
44+
3545
## Manual traces
3646

3747
You can inject `AngularFirePerformance` to perform manual traces on Observables.
@@ -162,4 +172,4 @@ this.articles = afs.collection('articles')
162172
}),
163173
share()
164174
);
165-
```
175+
```

0 commit comments

Comments
 (0)