perf: add web vitals monitoring and optimize performance

2026-02-13 15:24:51 +08:00
parent 8175c2f035
commit b7e52aa086
3 changed files with 59 additions and 2 deletions
@@ -0,0 +1,33 @@
+'use client';
+
+import { useReportWebVitals } from 'next/web-vitals';
+
+export function WebVitals() {
+  useReportWebVitals((metric) => {
+    if (process.env.NODE_ENV === 'development') {
+      console.log('[Web Vitals]', metric);
+    }
+
+    if (process.env.NODE_ENV === 'production') {
+      const body = JSON.stringify({
+        name: metric.name,
+        value: metric.value,
+        rating: metric.rating,
+        delta: metric.delta,
+        id: metric.id,
+      });
+
+      if (navigator.sendBeacon) {
+        navigator.sendBeacon('/api/analytics', body);
+      } else {
+        fetch('/api/analytics', {
+          body,
+          method: 'POST',
+          keepalive: true,
+        }).catch(() => {});
+      }
+    }
+  });
+
+  return null;
+}