File tree Expand file tree Collapse file tree 1 file changed +17
-2
lines changed Expand file tree Collapse file tree 1 file changed +17
-2
lines changed Original file line number Diff line number Diff line change @@ -14,7 +14,7 @@ The [web-vitals](https://github.com/GoogleChrome/web-vitals) is a small and powe
14
14
15
15
## Usage
16
16
17
- Report [ Core Web Vitals] ( https://web.dev/vitals/ ) and device information to an API endpoint:
17
+ ① Report [ Core Web Vitals] ( https://web.dev/vitals/ ) and device information to an API endpoint:
18
18
19
19
``` js
20
20
import { getCLS , getFID , getLCP } from ' web-vitals'
@@ -41,7 +41,7 @@ getCLS(sendToAnalytics)
41
41
}
42
42
```
43
43
44
- Measure performance with [ Next.js] ( https://nextjs.org/docs/advanced-features/measuring-performance ) :
44
+ ② Measure performance with [ Next.js] ( https://nextjs.org/docs/advanced-features/measuring-performance ) :
45
45
46
46
``` js
47
47
import { createApiReporter } from ' web-vitals-reporter'
@@ -62,6 +62,21 @@ export function reportWebVitals(metric) {
62
62
export { report as reportWebVitals }
63
63
```
64
64
65
+ ③ Load and report Web Vitals using a ` <script> ` tag:
66
+
67
+ ``` html
68
+ <script defer src =" https://unpkg.com/web-vitals" ></script >
69
+ <script defer src =" https://unpkg.com/web-vitals-reporter" ></script >
70
+ <script >
71
+ addEventListener (' DOMContentLoaded' , function () {
72
+ var sendToAnalytics = webVitalsReporter .createApiReporter (' /analytics' )
73
+ webVitals .getCLS (sendToAnalytics)
74
+ webVitals .getFID (sendToAnalytics)
75
+ webVitals .getLCP (sendToAnalytics)
76
+ })
77
+ </script >
78
+ ```
79
+
65
80
## API
66
81
67
82
### createApiReporter(url, [ options] )
You can’t perform that action at this time.
0 commit comments