diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 4385d499de..7a7709c662 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -5,8 +5,13 @@ import AppRoutes from 'AppRoutes';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
+import reportWebVitals from 'reportWebVitals';
 import store from 'store';
 
+if (process.env.NODE_ENV === 'development') {
+	reportWebVitals(console.log);
+}
+
 ReactDOM.render(
 	<Provider store={store}>
 		<React.StrictMode>
diff --git a/frontend/src/reportWebVitals.ts b/frontend/src/reportWebVitals.ts
new file mode 100644
index 0000000000..6272529d21
--- /dev/null
+++ b/frontend/src/reportWebVitals.ts
@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler): 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);
+		});
+	}
+};
+
+export default reportWebVitals;