@openameba/cwv-logger

cwv-logger

web-vitalsから取得した Core Web Vitals のメトリクスをデータとして使いやすい形式に変換して出力するライブラリです。

Installation

yarn add -D cwv-logger

or

npm i --save-dev cwv-logger

Usage

const reportPerformance = () => {
  const startTime = Date.now();

  const handleReport: ReportCallback = useCallback(
    ({ metricsName, metricsValue, networkType, selectorName, rectDiff }) => {
      firebase
        .performance()
        .trace(metricsName)
        .record(startTime, metricsValue, {
          selectorName,
          networkType,
          rectDiff,
        });
    },
    [option]
  );

  import("@openameba/cwv-logger").then(
    ({ reportCLS, reportFID, reportLCP, reportTTFB }) => {
      reportCLS(handleReport);
      reportFID(handleReport);
      reportLCP(handleReport);
      reportTTFB(handleReport);
    }
  );
};

Supported Metrics

• Cumulative Layout Shift(CLS)
• Largest Contentful Paint(LCP)
• First Input Delay(FID)
• Time to First Byte(TTFB)

Report params

type ReportParams = {
  metricsName: "CLS" | "LCP" | "FID" | "TTFB";
  metricsValue: number;
  // Get value from https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/effectiveType.
  networkType: string;
  // Currently not supported
  country?: string;
  // Available with CLS, LCP and FID.
  selectorName?: string;
  // Available only with CLS.
  rectDiff?: string;
};