README.md

cwv-logger

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

Installation

yarn add -D @openameba/cwv-logger

or

npm i --save-dev @openameba/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]
  );

  // Logging is not critical for most application,
  // so you can avoid loading this library in initial bundle by using dynamic import.
  import("@openameba/cwv-logger").then(
    ({ reportCLS, reportFID, reportLCP, reportTTFB, reportINP }) => {
      reportCLS(handleReport);
      reportFID(handleReport);
      reportLCP(handleReport);
      reportTTFB(handleReport);
      /**
       * reportINP has option in second argument.
       * @see https://github.com/GoogleChrome/web-vitals/tree/next
       */
      reportINP(handleReport, {
        reportAllChanges: false, // or true
        durationThreshold: 40, // or number
      });
    }
  );
};

Supported Metrics

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

Report params

type ReportParams = {
  metricsName: "CLS" | "LCP" | "FID" | "TTFB" | "INP";
  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;
};