diff --git a/package.json b/package.json
index 54f1a2c763d5aef72ab8ef1f266a7ec6733a170a..0dda20af7318687405aa6a2688cb8d4df3c77401 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "vite": "^5.3.5",
     "vite-plugin-svgr": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "web-vitals": "^3.0.0"
+    "web-vitals": "^4.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.14.12",
diff --git a/src/index.tsx b/src/index.tsx
index 848d694d7a9cdb1cfa58afa92cf4f8744427ac4b..3793bb033f36bdbd750561f2d4a4c23fb80d2a0e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,13 +1,8 @@
 import { createRoot } from 'react-dom/client'
 import App from './App'
-import reportWebVitals from './reportWebVitals'
+import './reportWebVitals'
 import './styles/index.scss'
 
 const container = document.getElementById('root')
 const root = createRoot(container!)
 root.render(<App />)
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals()
diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts
index 57a24a21eae1de4e00842390a8e04a76e7c68bad..1c7d0b9489e8512388c61d228003901ab97469d1 100644
--- a/src/reportWebVitals.ts
+++ b/src/reportWebVitals.ts
@@ -1,15 +1,5 @@
-import { ReportHandler } from 'web-vitals'
+import { onCLS, onINP, onLCP } from 'web-vitals'
 
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry)
-      getFID(onPerfEntry)
-      getFCP(onPerfEntry)
-      getLCP(onPerfEntry)
-      getTTFB(onPerfEntry)
-    })
-  }
-}
-
-export default reportWebVitals
+onCLS(console.log)
+onINP(console.log)
+onLCP(console.log)
diff --git a/yarn.lock b/yarn.lock
index c414845f3310e814066c15d57aafb74a05674493..de0b4b3300805871c4eadb4bf9c0fd470e29c615 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3815,10 +3815,10 @@ vue-eslint-parser@^9.1.0:
     lodash "^4.17.21"
     semver "^7.3.6"
 
-web-vitals@^3.0.0:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-3.5.2.tgz#5bb58461bbc173c3f00c2ddff8bfe6e680999ca9"
-  integrity sha512-c0rhqNcHXRkY/ogGDJQxZ9Im9D19hDihbzSQJrsioex+KnFgmMzBiy57Z1EjkhX/+OjyBpclDCzz2ITtjokFmg==
+web-vitals@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-4.0.0.tgz#888b5ddb17f292673cdeb2b3ae0d6c2ff16d5e31"
+  integrity sha512-8wQd4jkwFRwY5q3yAmHZAJ5MjnKR1vRACK+g2OEC8nUqi0WOxBrXfOxGNlJ+QtxzzSn/TkQO58wkW0coE68n0Q==
 
 webidl-conversions@^3.0.0:
   version "3.0.1"