diff --git a/package.json b/package.json
index 73a50e0c..eda5eada 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "vite": "^5.2.10",
-    "web-vitals": "^3.0.0"
+    "web-vitals": "^4.2.3"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 44740cfb..5992628d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,8 +93,8 @@ importers:
         specifier: ^5.2.10
         version: 5.2.10(@types/node@20.12.7)
       web-vitals:
-        specifier: ^3.0.0
-        version: 3.5.2
+        specifier: ^4.2.3
+        version: 4.2.3
     devDependencies:
       '@biomejs/biome':
         specifier: 1.8.3
@@ -2202,8 +2202,8 @@ packages:
       jsdom:
         optional: true
 
-  web-vitals@3.5.2:
-    resolution: {integrity: sha512-c0rhqNcHXRkY/ogGDJQxZ9Im9D19hDihbzSQJrsioex+KnFgmMzBiy57Z1EjkhX/+OjyBpclDCzz2ITtjokFmg==}
+  web-vitals@4.2.3:
+    resolution: {integrity: sha512-/CFAm1mNxSmOj6i0Co+iGFJ58OS4NRGVP+AWS/l509uIK5a1bSoIVaHz/ZumpHTfHSZBpgrJ+wjfpAOrTHok5Q==}
 
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
@@ -4302,7 +4302,7 @@ snapshots:
       - supports-color
       - terser
 
-  web-vitals@3.5.2: {}
+  web-vitals@4.2.3: {}
 
   which@2.0.2:
     dependencies:
diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts
index 9ba96039..93cdc27b 100644
--- a/src/reportWebVitals.ts
+++ b/src/reportWebVitals.ts
@@ -1,13 +1,13 @@
-import type { ReportHandler } from "web-vitals";
+import type { MetricType } from "web-vitals";
 
-const reportWebVitals = (onPerfEntry?: ReportHandler): void => {
+const reportWebVitals = (onPerfEntry?: (metric: MetricType) => void): void => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
+    import("web-vitals").then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {
+      onCLS(onPerfEntry);
+      onINP(onPerfEntry);
+      onFCP(onPerfEntry);
+      onLCP(onPerfEntry);
+      onTTFB(onPerfEntry);
     });
   }
 };