| 48 | } |
| 49 | |
| 50 | export function observeWebVitals(): void { |
| 51 | if (typeof window === "undefined" || !("PerformanceObserver" in window)) return; |
| 52 | |
| 53 | // LCP |
| 54 | try { |
| 55 | const lcpObs = new PerformanceObserver((list) => { |
| 56 | const entries = list.getEntries(); |
| 57 | const last = entries[entries.length - 1] as PerformancePaintTiming; |
| 58 | const value = last.startTime; |
| 59 | report({ name: "LCP", value, rating: rateVital("LCP", value) }); |
| 60 | }); |
| 61 | lcpObs.observe({ type: "largest-contentful-paint", buffered: true }); |
| 62 | } catch {} |
| 63 | |
| 64 | // FID / INP |
| 65 | try { |
| 66 | const fidObs = new PerformanceObserver((list) => { |
| 67 | for (const entry of list.getEntries()) { |
| 68 | const e = entry as PerformanceEventTiming; |
| 69 | const value = e.processingStart - e.startTime; |
| 70 | report({ name: "FID", value, rating: rateVital("FID", value) }); |
| 71 | } |
| 72 | }); |
| 73 | fidObs.observe({ type: "first-input", buffered: true }); |
| 74 | } catch {} |
| 75 | |
| 76 | // CLS |
| 77 | try { |
| 78 | let clsValue = 0; |
| 79 | let clsSessionGap = 0; |
| 80 | let clsSessionValue = 0; |
| 81 | const clsObs = new PerformanceObserver((list) => { |
| 82 | for (const entry of list.getEntries()) { |
| 83 | const e = entry as LayoutShift; |
| 84 | if (!e.hadRecentInput) { |
| 85 | const now = e.startTime; |
| 86 | if (now - clsSessionGap > 1000 || clsValue === 0) { |
| 87 | clsSessionValue = e.value; |
| 88 | } else { |
| 89 | clsSessionValue += e.value; |
| 90 | } |
| 91 | clsSessionGap = now; |
| 92 | clsValue = Math.max(clsValue, clsSessionValue); |
| 93 | report({ name: "CLS", value: clsValue, rating: rateVital("CLS", clsValue) }); |
| 94 | } |
| 95 | } |
| 96 | }); |
| 97 | clsObs.observe({ type: "layout-shift", buffered: true }); |
| 98 | } catch {} |
| 99 | |
| 100 | // TTFB |
| 101 | try { |
| 102 | const navObs = new PerformanceObserver((list) => { |
| 103 | for (const entry of list.getEntries()) { |
| 104 | const nav = entry as PerformanceNavigationTiming; |
| 105 | const value = nav.responseStart - nav.requestStart; |
| 106 | report({ name: "TTFB", value, rating: rateVital("TTFB", value) }); |
| 107 | } |