diff --git a/packages/web-performance/src/constants/index.ts b/packages/web-performance/src/constants/index.ts
index 006146ba..5b367e06 100644
--- a/packages/web-performance/src/constants/index.ts
+++ b/packages/web-performance/src/constants/index.ts
@@ -1,7 +1,7 @@
-export const metricsName = {
-  NT: 'navigation-timing',
-  FP: 'first-paint',
-  FCP: 'first-contentful-paint',
-  LCP: 'largest-contentful-paint',
-  DI: 'device-information'
+export enum metricsName {
+  NT = 'navigation-timing',
+  FP = 'first-paint',
+  FCP = 'first-contentful-paint',
+  LCP = 'largest-contentful-paint',
+  DI = 'device-information'
 }
diff --git a/packages/web-performance/src/lib/store.ts b/packages/web-performance/src/lib/store.ts
index bbb96ea2..ecf03b2b 100644
--- a/packages/web-performance/src/lib/store.ts
+++ b/packages/web-performance/src/lib/store.ts
@@ -1,4 +1,5 @@
 import { IMetrics } from '../types'
+import { metricsName } from '../constants'
 
 /*
  * store metrics
@@ -6,21 +7,21 @@ import { IMetrics } from '../types'
  * @class
  * */
 class metricsStore {
-  state: Map<string, IMetrics>
+  state: Map<metricsName, IMetrics>
 
   constructor() {
-    this.state = new Map<string, IMetrics>()
+    this.state = new Map<metricsName, IMetrics>()
   }
 
-  set(key, value: IMetrics) {
+  set(key: metricsName, value: IMetrics) {
     this.state.set(key, value)
   }
 
-  get(key): IMetrics {
+  get(key: metricsName): IMetrics {
     return this.state.get(key)
   }
 
-  has(key) {
+  has(key: metricsName) {
     return this.state.has(key)
   }
 }
diff --git a/packages/web-performance/src/metrics/getDeviceInfo.ts b/packages/web-performance/src/metrics/getDeviceInfo.ts
index 24563c44..cbe064df 100644
--- a/packages/web-performance/src/metrics/getDeviceInfo.ts
+++ b/packages/web-performance/src/metrics/getDeviceInfo.ts
@@ -7,4 +7,15 @@
  * totalJSHeapSize,the total allocated heap size, in bytes.
  * usedJSHeapSize,the currently active segment of JS heap, in bytes.
  * fps,a frame rate is the speed at which the browser is able to recalculate, layout and paint content to the display.
+ * userAgent
  * */
+import { IDeviceInformation } from '../types'
+import { isPerformanceSupported } from '../utils/isSupported'
+import { metricsName } from '../constants'
+
+const getDeviceInfo = (): IDeviceInformation => {
+  if (!isPerformanceSupported) {
+    console.log('browser do not support performance')
+    return
+  }
+}
diff --git a/packages/web-performance/src/utils/calculateFps.ts b/packages/web-performance/src/utils/calculateFps.ts
new file mode 100644
index 00000000..e69de29b