Google은 Lighthouse를 사용하지 않는다

0 들어가며

0.1 페이지 경험이 왜 중요한가요?

0.2 왜 Google Search Console에서는 변화가 없을까요?

1 실제 필드 데이터 가져오기(CrUX API)

1.1 Official dataset을 찾자

- 최소한의 방문자 수를 충족하는 대중적인 페이지
- 사용자가 크롬에서 다음의 기능을 허용: 사용자 통계 보고, 브라우저 기록 동기화
- 지원되는 플랫폼
    - Windows, MacOS, ChromeOS, Linux 운영체제를 포함한 데스크톱 버전의 Chrome
    - 맞춤 탭과 웹APK를 사용하는 기본 앱을 포함한 Android 버전의 Chrome
- 지원되지 않는 플랫폼
    - iOS의 Chrome
    - WebView를 사용하는 네이티브 Android 앱
    - 기타 Chromium 브라우저(예: Microsoft Edge)

1.2 어떤 API를 사용해야 할까요?

1.3 Google Sheet에 CrUX API 데이터 저장하기

// Copyright 2020 Google LLC.
// SPDX-License-Identifier: Apache-
// Edit by: 서경님
// CrUX API을 사용하여 코어 웹 바이탈 지표(LCP, FID, CLS) 데이터 생성: 28일 평균값
// 트리거: 매일 자정 ~ 오전 1시에 1회
// 직접 트리거: monitor 함수 실행

const URLs = [
  // 'https://doctor-cha.com/', // 아직까지 수집 불가
];
const ORIGINS = [
  'https://doctor-cha.com',     // 수집할 origin url
];
const FORM_FACTORS = [          // 수집할 폼팩터
  'DESKTOP',
  'PHONE',
  'ALL_FORM_FACTORS'
];

const CrUXApiUtil = {};
// Get your CrUX API key at https://goo.gle/crux-api-key.
// Set your CrUX API key at File > Project properties > Script properties.
CrUXApiUtil.API_KEY = PropertiesService.getScriptProperties().getProperty('CRUX_API_KEY');
CrUXApiUtil.API_ENDPOINT = `https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=${CrUXApiUtil.API_KEY}`;
CrUXApiUtil.query = function (requestBody) {
  if (!CrUXApiUtil.API_KEY) {
    throw 'Script property `CRUX_API_KEY` not set. Get a key at https://goo.gle/crux-api-key.';
  }
  let response = UrlFetchApp.fetch(CrUXApiUtil.API_ENDPOINT, {
    method: 'POST',
    payload: requestBody,
    muteHttpExceptions: true
  })
  response = JSON.parse(response.getContentText());
  if (response.error) {
    throw `Error: ${response.error.message} ${JSON.stringify(requestBody, null, 2)}`;
  }
  return response;
};

function monitor() {
  FORM_FACTORS.forEach(function(formFactor) {
    URLs.forEach(function(url) {
      getCrUXData('url', url, formFactor);
    });
    ORIGINS.forEach(function(origin) {
      getCrUXData('origin', origin, formFactor);
    });
  });
}

function getCrUXData(key, value, formFactor) {
  const response = callAPI({
    [key]: value,
    formFactor
  });
  
  if (!response) {
    return;
  }
  
  const lcp = getMetricData(response.record.metrics.largest_contentful_paint);
  const fid = getMetricData(response.record.metrics.first_input_delay);
  const cls = getMetricData(response.record.metrics.cumulative_layout_shift);
  addRow(value, formFactor,
         lcp.good, lcp.ni, lcp.poor, lcp.p75,
         fid.good, fid.ni, fid.poor, fid.p75,
         cls.good, cls.ni, cls.poor, cls.p75);
}

function callAPI(request) {
  try {
    return CrUXApiUtil.query(request);
  } catch (error) {
    console.error(error);
  }
}

function getMetricData(metric) {
  if (!metric) {
    return {};
  }
  
  return {
    good: metric.histogram[0].density,
    ni: metric.histogram[1].density,
    poor: metric.histogram[2].density,
    p75: metric.percentiles.p75
  };
}

function addRow(...args) {
  const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = spreadsheet.getSheetByName("Daily");
  sheet.appendRow([
    Utilities.formatDate(new Date(), 'GMT', 'yyyy-MM-dd'),
    ...args
  ]);
}

프로젝트 설정에서 트리거될 시간대와 CRUX_API_KEY 환경 변수를 세팅합니다. CRUX_API_KEY는 https://goo.gle/crux-api-key 에서 가져올 수 있습니다.

좌측 시계모양을 클릭하여 트리거할 함수와 시간을 선택합니다. 저는 매일 자정~오전 1시 사이에 한 번 트리거되도록 하였습니다.

1.4 과거 데이터를 가져오기 위해 CrUX 히스토리 API 활용하기

// Copyright 2020 Google LLC.
// SPDX-License-Identifier: Apache-2.0
// Edit by: 서경님
// CrUX API을 사용하여 코어 웹 바이탈 지표(LCP, FID, CLS) 데이터 생성: 28일 평균값
// 트리거: 없음
// 직접 트리거: monitorHistory 함수 실행

const HISTORY_URLs = [
  // 'https://doctor-cha.com/',
];
const HISTORY_ORIGINS = [
  'https://doctor-cha.com',
];
const HISTORY_FORM_FACTORS = [
  'DESKTOP',
  'PHONE',
  'ALL_FORM_FACTORS'
];

const HISTORY_CrUXApiUtil = {};
// Get your CrUX API key at https://goo.gle/crux-api-key.
// Set your CrUX API key at File > Project properties > Script properties.
HISTORY_CrUXApiUtil.API_KEY = PropertiesService.getScriptProperties().getProperty('CRUX_API_KEY');
HISTORY_CrUXApiUtil.API_ENDPOINT = `https://chromeuxreport.googleapis.com/v1/records:queryHistoryRecord?key=${HISTORY_CrUXApiUtil.API_KEY}`;
HISTORY_CrUXApiUtil.query = function (requestBody) {
  if (!HISTORY_CrUXApiUtil.API_KEY) {
    throw 'Script property `CRUX_API_KEY` not set. Get a key at https://goo.gle/crux-api-key.';
  }
  let response = UrlFetchApp.fetch(HISTORY_CrUXApiUtil.API_ENDPOINT, {
    method: 'POST',
    payload: requestBody,
    muteHttpExceptions: true
  })
  response = JSON.parse(response.getContentText());
  if (response.error) {
    throw `Error: ${response.error.message} ${JSON.stringify(requestBody, null, 2)}`;
  }
  return response;
};

function monitorHistory() {
  FORM_FACTORS.forEach(function(formFactor) {
    HISTORY_URLs.forEach(function(url) {
      getCrUXHistoryData('url', url, formFactor);
    });
    HISTORY_ORIGINS.forEach(function(origin) {
      getCrUXHistoryData('origin', origin, formFactor);
    });
  });
}

function getCrUXHistoryData(key, value, formFactor) {
  const response = callHistoryAPI({
    [key]: value,
    formFactor,
  });
  
  if (!response) {
    return;
  }

  saveHistoryDatas(value, formFactor, response);
}

function saveHistoryDatas(value, formFactor, response){
  const collectionPeriods = response.record.collectionPeriods;
  collectionPeriods.forEach(function (collectionPeriod, index) {
    const firstDate = getFormattedDate(collectionPeriod.firstDate);
    const lastDate = getFormattedDate(collectionPeriod.lastDate);
    const lcp = getHistoryMetricData(response.record.metrics.largest_contentful_paint, index);
    const fid = getHistoryMetricData(response.record.metrics.first_input_delay, index);
    const cls = getHistoryMetricData(response.record.metrics.cumulative_layout_shift, index);

    addHistoryRow(firstDate, lastDate, value, formFactor,
        lcp.good, lcp.ni, lcp.poor, lcp.p75,
        fid.good, fid.ni, fid.poor, fid.p75,
        cls.good, cls.ni, cls.poor, cls.p75);

  });
}

function callHistoryAPI(request) {
  try {
    return HISTORY_CrUXApiUtil.query(request);
  } catch (error) {
    console.error(error);
  }
}

function getHistoryMetricData(metric, index) {
  if (!metric) {
    return {};
  }
  
  return {
    good: metric.histogramTimeseries[0].densities[index],
    ni: metric.histogramTimeseries[1].densities[index],
    poor: metric.histogramTimeseries[2].densities[index],
    p75: metric.percentilesTimeseries.p75s[index]
  };
}

function addHistoryRow(...args) {
  const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = spreadsheet.getSheetByName("Weekly");
  sheet.appendRow([
    ...args
  ]);
}

function getFormattedDate(dateObject){
  const month = dateObject.month <10 ? `0${dateObject.month}` : dateObject.month;
  const day = dateObject.day <10 ? `0${dateObject.day}` : dateObject.day;

  return `${dateObject.year}-${month}-${dateObject.day}`
}

2 실제 필드 데이터로 대시보드 생성하기

후기

References