Install Vercel Speed Insights package

auth.html

@@ -1061,6 +1061,12 @@ <h1 id="form-title">Welcome back 👋</h1>
     }
     setTimeout(typeLine, 1000);
   </script>
+
+  <!-- Vercel Speed Insights -->
+  <script type="module">
+    import { injectSpeedInsights } from '/node_modules/@vercel/speed-insights/dist/index.mjs';
+    injectSpeedInsights();
+  </script>
 </body>
 
 </html>

dashboard.html

@@ -2200,7 +2200,11 @@ <h3 style="font-size:18px;font-weight:700;margin:0 0 20px;">📋 Your Roadmap Su
       </div>
     </div>
 
-
+  <!-- Vercel Speed Insights -->
+  <script type="module">
+    import { injectSpeedInsights } from '/node_modules/@vercel/speed-insights/dist/index.mjs';
+    injectSpeedInsights();
+  </script>
 </body>
 
 </html>

index.html

@@ -866,5 +866,11 @@ <h5>Legal</h5>
     draw();
   })();
   </script>
+
+  <!-- Vercel Speed Insights -->
+  <script type="module">
+    import { injectSpeedInsights } from '/node_modules/@vercel/speed-insights/dist/index.mjs';
+    injectSpeedInsights();
+  </script>
 </body>
 </html>

package.json

@@ -10,5 +10,7 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "dependencies": {}
+  "dependencies": {
+    "@vercel/speed-insights": "^2.0.0"
+  }
 }

react-app/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@vercel/speed-insights": "^2.0.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5"
   },

react-app/src/App.jsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { SpeedInsights } from '@vercel/speed-insights/react'
 import reactLogo from './assets/react.svg'
 import viteLogo from './assets/vite.svg'
 import heroImg from './assets/hero.png'
@@ -115,6 +116,7 @@ function App() {
 
       <div className="ticks"></div>
       <section id="spacer"></section>
+      <SpeedInsights />
     </>
   )
 }