diff --git a/docusaurus/docs/measuring-performance.md b/docusaurus/docs/measuring-performance.md
new file mode 100644
index 00000000000..b7310c531c9
--- /dev/null
+++ b/docusaurus/docs/measuring-performance.md
@@ -0,0 +1,65 @@
+---
+id: measuring-performance
+title: Measuring Performance
+---
+
+By default, Create React App includes a performance relayer that allows you to measure and analyze
+the performance of your application using different metrics.
+
+To measure any of the supported metrics, you only need to pass a function into the `reportWebVitals`
+function in `index.js`:
+
+```js
+reportWebVitals(console.log);
+```
+
+This function is fired when the final values for any of the metrics have finished calculating on the
+page. You can use it to log any of the results to the console or send to a particular endpoint.
+
+## Web Vitals
+
+[Web Vitals](https://web.dev/vitals/) are a set of useful metrics that aim to capture the user
+experience of a web page. In Create React App, a third-party library is used to measure these
+metrics ([web-vitals](https://github.com/GoogleChrome/web-vitals)).
+
+To understand more about the object returned to the function when a metric value is calculated,
+refer to the [documentation](https://github.com/GoogleChrome/web-vitals/#types). The [Browser
+Support](https://github.com/GoogleChrome/web-vitals/#browser-support) section also explains which browsers are supported.
+
+## Sending results to analytics
+
+With the `reportWebVitals` function, you can send any of results to an analytics endpoint to measure and track real user performance on your site. For example:
+
+```js
+function sendToAnalytics(metric) {
+ const body = JSON.stringify(metric);
+ const url = 'https://example.com/analytics';
+
+ // Use `navigator.sendBeacon()` if available, falling back to `fetch()`
+ if (navigator.sendBeacon) {
+ navigator.sendBeacon(url, body);
+ } else {
+ fetch(url, { body, method: 'POST', keepalive: true });
+ }
+}
+
+reportWebVitals(sendToAnalytics);
+```
+
+> **Note:** If you use Google Analytics, use the `id` value to make it easier to construct metric distributions manually (to calculate percentiles, etc…).
+>
+> ```js
+> function sendToAnalytics({id, name, value}) {
+> ga('send', 'event', {
+> eventCategory: 'Web Vitals',
+> eventAction: name,
+> eventValue: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers
+> eventLabel: id, // id unique to current page load
+> nonInteraction: true, // avoids affecting bounce rate
+> });
+> }
+>
+> reportWebVitals(sendToAnalytics);
+> ```
+>
+> Read more about sending results to Google Analytics [here](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics).
diff --git a/docusaurus/website/sidebars.json b/docusaurus/website/sidebars.json
index f51541db097..386a29da1bf 100644
--- a/docusaurus/website/sidebars.json
+++ b/docusaurus/website/sidebars.json
@@ -36,6 +36,7 @@
"adding-a-router",
"adding-custom-environment-variables",
"making-a-progressive-web-app",
+ "measuring-performance",
"production-build"
],
"Testing": ["running-tests", "debugging-tests"],
diff --git a/package.json b/package.json
index 5e31230fe60..a90c9fa328e 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,8 @@
"strip-ansi": "^6.0.0",
"svg-term-cli": "^2.1.1",
"tempy": "^0.2.1",
- "wait-for-localhost": "^3.1.0"
+ "wait-for-localhost": "^3.1.0",
+ "web-vitals": "^0.2.2"
},
"husky": {
"hooks": {
diff --git a/packages/cra-template-typescript/template.json b/packages/cra-template-typescript/template.json
index a95bdf673dc..36b9a95bf0f 100644
--- a/packages/cra-template-typescript/template.json
+++ b/packages/cra-template-typescript/template.json
@@ -8,7 +8,8 @@
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/jest": "^25.0.0",
- "typescript": "^3.8.0"
+ "typescript": "^3.8.0",
+ "web-vitals": "^0.2.2"
}
}
}
diff --git a/packages/cra-template-typescript/template/src/index.tsx b/packages/cra-template-typescript/template/src/index.tsx
index f85c4d0ffde..bdf2dd80541 100644
--- a/packages/cra-template-typescript/template/src/index.tsx
+++ b/packages/cra-template-typescript/template/src/index.tsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
+import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
@@ -15,3 +16,8 @@ ReactDOM.render(
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
serviceWorker.unregister();
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/packages/cra-template-typescript/template/src/reportWebVitals.ts b/packages/cra-template-typescript/template/src/reportWebVitals.ts
new file mode 100644
index 00000000000..59d81aaab24
--- /dev/null
+++ b/packages/cra-template-typescript/template/src/reportWebVitals.ts
@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+ if (onPerfEntry && onPerfEntry instanceof Function) {
+ import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+ getCLS(onPerfEntry);
+ getFID(onPerfEntry);
+ getFCP(onPerfEntry);
+ getLCP(onPerfEntry);
+ getTTFB(onPerfEntry);
+ });
+ }
+}
+
+export default reportWebVitals;
diff --git a/packages/cra-template/template.json b/packages/cra-template/template.json
index 9d089f10187..27b3cfa4282 100644
--- a/packages/cra-template/template.json
+++ b/packages/cra-template/template.json
@@ -3,7 +3,8 @@
"dependencies": {
"@testing-library/jest-dom": "^5.9.0",
"@testing-library/react": "^10.2.1",
- "@testing-library/user-event": "^11.3.2"
+ "@testing-library/user-event": "^11.3.2",
+ "web-vitals": "^0.2.2"
}
}
}
diff --git a/packages/cra-template/template/src/index.js b/packages/cra-template/template/src/index.js
index f85c4d0ffde..bdf2dd80541 100644
--- a/packages/cra-template/template/src/index.js
+++ b/packages/cra-template/template/src/index.js
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
+import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
@@ -15,3 +16,8 @@ ReactDOM.render(
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
serviceWorker.unregister();
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/packages/cra-template/template/src/reportWebVitals.js b/packages/cra-template/template/src/reportWebVitals.js
new file mode 100644
index 00000000000..436ab8df817
--- /dev/null
+++ b/packages/cra-template/template/src/reportWebVitals.js
@@ -0,0 +1,13 @@
+const reportWebVitals = (onPerfEntry) => {
+ if (onPerfEntry && onPerfEntry instanceof Function) {
+ import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+ getCLS(onPerfEntry);
+ getFID(onPerfEntry);
+ getFCP(onPerfEntry);
+ getLCP(onPerfEntry);
+ getTTFB(onPerfEntry);
+ });
+ }
+}
+
+export default reportWebVitals;
diff --git a/tasks/e2e-installs.sh b/tasks/e2e-installs.sh
index fa5207cebdd..a430227c2d5 100755
--- a/tasks/e2e-installs.sh
+++ b/tasks/e2e-installs.sh
@@ -51,7 +51,7 @@ function exists {
# Check for accidental dependencies in package.json
function checkDependencies {
if ! awk '/"dependencies": {/{y=1;next}/},/{y=0; next}y' package.json | \
- grep -v -q -E '^\s*"(@testing-library\/.+)|(react(-dom|-scripts)?)"'; then
+ grep -v -q -E '^\s*"(@testing-library\/.+)|web-vitals|(react(-dom|-scripts)?)"'; then
echo "Dependencies are correct"
else
echo "There are extraneous dependencies in package.json"
@@ -62,7 +62,7 @@ function checkDependencies {
# Check for accidental dependencies in package.json
function checkTypeScriptDependencies {
if ! awk '/"dependencies": {/{y=1;next}/},/{y=0; next}y' package.json | \
- grep -v -q -E '^\s*"(@testing-library\/.+)|(@types\/.+)|typescript|(react(-dom|-scripts)?)"'; then
+ grep -v -q -E '^\s*"(@testing-library\/.+)|web-vitals|(@types\/.+)|typescript|(react(-dom|-scripts)?)"'; then
echo "Dependencies are correct"
else
echo "There are extraneous dependencies in package.json"