feat: implement Core Web Vitals monitoring in MobilePerformanceMonitor

2026-03-05 15:12:33 +08:00
parent 478adb1986
commit 8194317a20
2 changed files with 53 additions and 0 deletions
@@ -15,4 +15,42 @@ export interface LighthouseResult {

 export class MobilePerformanceMonitor {
  constructor(private page: Page) {}
+  
+  async getCoreWebVitals(): Promise<CoreWebVitals> {
+    const vitals = await this.page.evaluate(() => {
+      return new Promise((resolve) => {
+        const metrics: any = {};
+        
+        const observer = new PerformanceObserver((list) => {
+          for (const entry of list.getEntries()) {
+            if (entry.entryType === 'paint') {
+              if (entry.name === 'first-contentful-paint') {
+                metrics.FCP = entry.startTime;
+              }
+            } else if (entry.entryType === 'largest-contentful-paint') {
+              metrics.LCP = entry.startTime;
+            } else if (entry.entryType === 'layout-shift') {
+              if (!metrics.CLS) metrics.CLS = 0;
+              metrics.CLS += (entry as any).value;
+            }
+          }
+        });
+        
+        observer.observe({ entryTypes: ['paint', 'largest-contentful-paint', 'layout-shift'] });
+        
+        setTimeout(() => {
+          observer.disconnect();
+          resolve(metrics);
+        }, 5000);
+      });
+    });
+    
+    return {
+      FCP: vitals.FCP || 0,
+      LCP: vitals.LCP || 0,
+      CLS: vitals.CLS || 0,
+      FID: 0,
+      TTI: 0,
+    };
+  }
 }