web-vitals is supported.

dimitardanailov · Oct 4, 2022 · e85820d · e85820d
1 parent 3ea77cf
commit e85820d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 11 deletions.
diff --git a/website/layouts/MainLayout.js b/website/layouts/MainLayout.js
@@ -4,22 +4,32 @@ import styled from 'styled-components'
 import PageTemplate from './components/PageTemplate'
 import PageHolder from './components/PageHolder'
 
+import {onLCP, onFID, onCLS} from 'web-vitals'
+
 const Container = styled.section`
   position: relative;
 
   min-height: 100%;
 `
 
-const MainLayout = Page => () => (
-  <Container>
-    <PageTemplate>
-      <PageHolder>
-        <Page />
-      </PageHolder>
-    </PageTemplate>
-
-    <MainFooter />
-  </Container>
-)
+const Page = function () {
+  onCLS(console.log)
+  onFID(console.log)
+  onLCP(console.log)
+
+  return (
+    <Container>
+      <PageTemplate>
+        <PageHolder>
+          <Page />
+        </PageHolder>
+      </PageTemplate>
+
+      <MainFooter />
+    </Container>
+  )
+}
+
+const MainLayout = Page
 
 export default MainLayout
diff --git a/website/package.json b/website/package.json
@@ -80,6 +80,7 @@
     "react-window": "^1.8.6",
     "styled-components": "5.1.1",
     "typed.js": "^2.0.12",
+    "web-vitals": "^3.0.2",
     "xstate": "^4.11.0"
   }
 }