Use @vercel/speed-insights

apps/web/package.json

@@ -28,6 +28,7 @@
     "@radix-ui/react-dialog": "^1.1.1",
     "@react-hookz/web": "^24.0.4",
     "@vercel/analytics": "^1.3.1",
+    "@vercel/speed-insights": "^1.0.12",
     "axios": "^1.7.2",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.11",

apps/web/src/app/layout.tsx

@@ -1,5 +1,6 @@
 import '~/styles/globals.css'
 import { Analytics } from '@vercel/analytics/react'
+import { SpeedInsights } from '@vercel/speed-insights/next'
 import Script from 'next/script'
 import { Providers } from './providers'
 
@@ -35,6 +36,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             data-website-id="ddb2a2da-618f-4c49-b230-c7b9b66ccd7c"
           />
         )}
+        <SpeedInsights />
       </body>
     </html>
   )

yarn.lock

@@ -184,6 +184,7 @@ __metadata:
     "@types/qs": "npm:^6.9.15"
     "@types/react": "npm:^18.3.3"
     "@vercel/analytics": "npm:^1.3.1"
+    "@vercel/speed-insights": "npm:^1.0.12"
     autoprefixer: "npm:^10.4.19"
     axios: "npm:^1.7.2"
     clsx: "npm:^2.1.1"
@@ -1804,6 +1805,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vercel/speed-insights@npm:^1.0.12":
+  version: 1.0.12
+  resolution: "@vercel/speed-insights@npm:1.0.12"
+  peerDependencies:
+    "@sveltejs/kit": ^1 || ^2
+    next: ">= 13"
+    react: ^18 || ^19
+    svelte: ^4
+    vue: ^3
+    vue-router: ^4
+  peerDependenciesMeta:
+    "@sveltejs/kit":
+      optional: true
+    next:
+      optional: true
+    react:
+      optional: true
+    svelte:
+      optional: true
+    vue:
+      optional: true
+    vue-router:
+      optional: true
+  checksum: 10/eb8ab819afa32fd0a9f32fc292e24f2f70742e874e606fcbd8f21008ffa349841c90a2146fe1251d5c812872c557b12958b4a9fb88eb874b4ad446f3af8b9cc1
+  languageName: node
+  linkType: hard
+
 "@vitest/expect@npm:2.0.3":
   version: 2.0.3
   resolution: "@vitest/expect@npm:2.0.3"