Performance API：瀏覽器原生的量測工具箱

// 方式一：同步查詢（拉取）。只拿得到「現在已經在緩衝區內」的資料。
performance.getEntries();                               // 全部
performance.getEntriesByType('resource');               // 依類型
performance.getEntriesByName('first-contentful-paint'); // 依名稱

// 方式二：觀察者（推送）。新 entry 產生時呼叫回呼；buffered: true 可補拿註冊前已發生的資料。
const po = new PerformanceObserver((list, observer) => {
  for (const entry of list.getEntries()) console.log(entry.entryType, entry);
});
po.observe({ type: 'largest-contentful-paint', buffered: true });
// 一個 observer 可對多個 type 各呼叫一次 observe()；舊寫法 entryTypes: [...] 不支援 buffered。

// 檢查瀏覽器支援哪些類型
console.log(PerformanceObserver.supportedEntryTypes);
// 例：["element", "event", "first-input", "largest-contentful-paint", "layout-shift",
//      "long-animation-frame", "longtask", "mark", "measure", "navigation", "paint",
//      "resource", "visibility-state"]

po.takeRecords();   // 立即取出尚未交付的 entry（送資料前 flush 用）
po.disconnect();    // 停止觀察

const t = performance.getEntriesByType('navigation')[0];
const d = (a, b) => +(b - a).toFixed(1);

const timings = {
  redirect:        d(t.redirectStart, t.redirectEnd),
  serviceWorker:   t.workerStart > 0 ? d(t.workerStart, t.fetchStart) : 0,
  dns:             d(t.domainLookupStart, t.domainLookupEnd),
  tcp:             d(t.connectStart, t.secureConnectionStart || t.connectEnd),
  tls:             t.secureConnectionStart > 0 ? d(t.secureConnectionStart, t.connectEnd) : 0,
  request:         d(t.requestStart, t.responseStart),   // 送出請求 → 首位元組：主要是伺服器處理 + 1 RTT
  ttfb:            d(0, t.responseStart),                 // 導覽開始 → 首位元組
  response:        d(t.responseStart, t.responseEnd),     // 下載 HTML 本體
  domParsing:      d(t.responseEnd, t.domInteractive),
  dclHandlers:     d(t.domContentLoadedEventStart, t.domContentLoadedEventEnd),
  subresources:    d(t.domContentLoadedEventEnd, t.domComplete),
  loadHandlers:    d(t.loadEventStart, t.loadEventEnd),
  total:           d(0, t.loadEventEnd),
  // 品質檢查
  protocol:        t.nextHopProtocol,                     // 'h2' / 'h3' / 'http/1.1'
  navigationType:  t.type,                                // 'navigate' | 'reload' | 'back_forward' | 'prerender'
  redirects:       t.redirectCount,
  fromCache:       t.transferSize === 0 && t.decodedBodySize > 0,
  compressed:      t.encodedBodySize < t.decodedBodySize,
  earlyHints:      t.firstInterimResponseStart > 0,       // 有收到 103 Early Hints
  prerendered:     t.activationStart > 0,                 // 頁面是由 prerender 啟用
};
console.table(timings);

// 找出所有 render-blocking 且沒有壓縮、或走 HTTP/1.1 的資源
new PerformanceObserver((list) => {
  for (const r of list.getEntries()) {
    const issues = [];
    if (r.renderBlockingStatus === 'blocking') issues.push('render-blocking');
    if (r.encodedBodySize > 0 && r.encodedBodySize === r.decodedBodySize) issues.push('uncompressed');
    if (r.nextHopProtocol === 'http/1.1') issues.push('http/1.1');
    if (r.transferSize === 0 && r.decodedBodySize > 0) issues.push('cache-hit');
    if (issues.length) console.log(r.name, issues.join(', '), Math.round(r.duration) + 'ms');
  }
}).observe({ type: 'resource', buffered: true });

if (PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')) {
  new PerformanceObserver((list) => {
    for (const loaf of list.getEntries()) {
      if (!loaf.firstUIEventTimestamp) continue;          // 只關心有使用者輸入的畫格
      const worst = [...loaf.scripts].sort((a, b) => b.duration - a.duration)[0];
      console.log(`LoAF ${Math.round(loaf.duration)}ms blocking ${Math.round(loaf.blockingDuration)}ms`,
        worst && `${worst.invoker} @ ${worst.sourceURL}:${worst.sourceFunctionName} ${Math.round(worst.duration)}ms`);
    }
  }).observe({ type: 'long-animation-frame', buffered: true });
}

performance.mark('search:start');
const results = await fetchResults(query);
performance.mark('search:fetched', { detail: { count: results.length } });
renderResults(results);
performance.mark('search:rendered');

performance.measure('search:network', 'search:start', 'search:fetched');
performance.measure('search:render',  'search:fetched', 'search:rendered');
performance.measure('search:total',   { start: 'search:start', end: 'search:rendered',
                                        detail: { query } });

new PerformanceObserver((list) => {
  for (const m of list.getEntries()) console.log(m.name, Math.round(m.duration), 'ms', m.detail);
}).observe({ type: 'measure', buffered: true });

const nav = performance.getEntriesByType('navigation')[0];
for (const { name, duration, description } of nav.serverTiming) {
  console.log(name, description, duration);   // cache HIT 0 / db  53 / render  47.2 ...
}

npm install web-vitals

// 標準版：只要數值
import { onLCP, onINP, onCLS, onFCP, onTTFB } from 'web-vitals';

function sendToAnalytics(metric) {
  // metric: { name, value, rating: 'good'|'needs-improvement'|'poor', delta, id,
  //           navigationType: 'navigate'|'reload'|'back-forward'|'back-forward-cache'|'prerender'|'restore',
  //           entries: PerformanceEntry[] }
  const body = JSON.stringify({ [metric.name]: metric.value, rating: metric.rating,
                                id: metric.id, nav: metric.navigationType, url: location.pathname });
  // sendBeacon 在頁面卸載時也能可靠送出
  (navigator.sendBeacon && navigator.sendBeacon('/rum', body)) ||
    fetch('/rum', { body, method: 'POST', keepalive: true });
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
onFCP(sendToAnalytics);
onTTFB(sendToAnalytics);

import { onLCP, onINP, onCLS } from 'web-vitals/attribution';

onLCP(({ value, attribution: a }) => {
  console.log('LCP', Math.round(value), {
    element: a.target,                    // CSS selector（v5 由 element 改名為 target）
    url: a.url,
    ttfb: a.timeToFirstByte,
    loadDelay: a.resourceLoadDelay,
    loadDuration: a.resourceLoadDuration,
    renderDelay: a.elementRenderDelay,
  });
});

onINP(({ value, attribution: a }) => {
  console.log('INP', Math.round(value), {
    target: a.interactionTarget,          // 例如 'button#add-to-cart'
    type: a.interactionType,              // 'pointer' | 'keyboard'
    inputDelay: a.inputDelay,
    processing: a.processingDuration,
    presentation: a.presentationDelay,
    loadState: a.loadState,               // 互動發生在載入的哪個階段
    longestScript: a.longestScript?.entry?.sourceURL,   // 來自 LoAF
  });
});

onCLS(({ value, attribution: a }) => {
  console.log('CLS', value.toFixed(3), {
    largestShiftTarget: a.largestShiftTarget,
    largestShiftValue: a.largestShiftValue,
    largestShiftTime: a.largestShiftTime,
    loadState: a.loadState,
  });
});