# 获取 API Key
# 访问 https://console.cloud.google.com/ → 启用 CrUX API → 创建 API Key
 
# 无需安装，直接使用 curl 或 HTTP 客户端

# 需要 Google Cloud 项目（免费额度 1TB/月）
# 访问 https://console.cloud.google.com/bigquery
 
# 或使用 Google Cloud CLI
npm install @google-cloud/bigquery  # Node.js 客户端
pip install google-cloud-bigquery    # Python 客户端

# GitHub 上的热门站点列表
git clone https://github.com/zakird/crux-top-lists.git
 
# Kaggle 镜像
# https://www.kaggle.com/datasets/bigquery/chrome-user-experience-report

# 查询 origin 级别数据
curl -X POST \
  "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "origin": "https://example.com"
  }'
 
# 查询 URL 级别数据（需要足够流量）
curl -X POST \
  "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/page",
    "formFactor": "PHONE"
  }'
 
# 查询历史时间序列
curl -X POST \
  "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "origin": "https://example.com",
    "collectionPeriodCount": 12
  }'

import fetch from 'node-fetch';
 
const CRUX_API = 'https://chromeuxreport.googleapis.com/v1/records:queryRecord';
const API_KEY = process.env.CRUX_API_KEY;
 
async function getCruxData(origin, formFactor = 'PHONE') {
  const response = await fetch(`${CRUX_API}?key=${API_KEY}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ origin, formFactor }),
  });
 
  const data = await response.json();
  const record = data.record;
 
  if (!record) {
    console.log(`No CrUX data for ${origin}`);
    return null;
  }
 
  // 提取 Core Web Vitals（p75 百分位）
  const metrics = {
    origin: record.key.origin,
    formFactor: formFactor,
    collectionPeriod: record.metrics.LARGEST_CONTENTFUL_PAINT?.collectionPeriod,
    lcp: {
      p75: record.metrics.LARGEST_CONTENTFUL_PAINT?.percentiles?.p75,
      good: record.metrics.LARGEST_CONTENTFUL_PAINT?.histogram?.[0]?.density,
      needsImprovement: record.metrics.LARGEST_CONTENTFUL_PAINT?.histogram?.[1]?.density,
      poor: record.metrics.LARGEST_CONTENTFUL_PAINT?.histogram?.[2]?.density,
    },
    inp: {
      p75: record.metrics.INTERACTION_TO_NEXT_PAINT?.percentiles?.p75,
    },
    cls: {
      p75: record.metrics.CUMULATIVE_LAYOUT_SHIFT?.percentiles?.p75,
    },
    fcp: {
      p75: record.metrics.FIRST_CONTENTFUL_PAINT?.percentiles?.p75,
    },
  };
 
  // 判断 CWV 是否通过
  const passesCWV =
    metrics.lcp.p75 <= 2500 &&
    metrics.inp.p75 <= 200 &&
    metrics.cls.p75 <= 0.1;
 
  return { ...metrics, passesCWV };
}
 
getCruxData('https://example.com').then(console.log);

-- 查询特定 origin 的 Core Web Vitals（使用 Materialized 表，推荐）
SELECT
  origin,
  form_factor,
  yyyymm,
  p75_largest_contentful_paint AS lcp_p75,
  p75_interaction_to_next_paint AS inp_p75,
  p75_cumulative_layout_shift AS cls_p75,
  p75_first_contentful_paint AS fcp_p75
FROM `chrome-ux-report.materialized.metrics_summary`
WHERE origin = 'https://example.com'
ORDER BY yyyymm DESC
LIMIT 12;
 
-- 查询唯一网站数量
SELECT COUNT(DISTINCT origin) AS total_origins
FROM `chrome-ux-report.all.202603`;
 
-- 计算 Good LCP 比例
SELECT
  origin,
  SUM(IF(bin.start <= 2500, bin.density, 0)) AS good_lcp_ratio
FROM `chrome-ux-report.all.202603`,
  UNNEST(largest_contentful_paint.histogram.bin) AS bin
WHERE origin = 'https://example.com'
  AND form_factor.name = 'phone'
GROUP BY origin;
 
-- 跨月份趋势分析
SELECT
  _TABLE_SUFFIX AS month,
  SUM(IF(bin.start <= 2500, bin.density, 0)) AS good_lcp_ratio,
  SUM(IF(bin.start <= 4000 AND bin.start > 2500, bin.density, 0)) AS ni_lcp_ratio
FROM `chrome-ux-report.all.*`,
  UNNEST(largest_contentful_paint.histogram.bin) AS bin
WHERE origin = 'https://example.com'
  AND form_factor.name = 'phone'
  AND _TABLE_SUFFIX BETWEEN '202501' AND '202603'
GROUP BY month
ORDER BY month;
 
-- 按国家对比
SELECT
  country_code,
  p75_largest_contentful_paint AS lcp_p75,
  p75_cumulative_layout_shift AS cls_p75
FROM `chrome-ux-report.materialized.country_summary`
WHERE origin = 'https://example.com'
  AND yyyymm = '202603'
ORDER BY lcp_p75 ASC;

// CrUX 定期监控
import fetch from 'node-fetch';
 
const CRUX_API = 'https://chromeuxreport.googleapis.com/v1/records:queryRecord';
const API_KEY = process.env.CRUX_API_KEY;
 
const monitoredOrigins = [
  'https://example.com',
  'https://example.com/blog',
  'https://example.com/shop',
];
 
async function monitorCrux() {
  const results = [];
 
  for (const origin of monitoredOrigins) {
    for (const formFactor of ['PHONE', 'DESKTOP']) {
      const data = await queryCrux(origin, formFactor);
      if (data) {
        results.push(data);
      }
    }
  }
 
  // 检查 CWV 通过情况
  const report = results.map(r => ({
    origin: r.origin,
    formFactor: r.formFactor,
    passesLCP: r.lcp?.p75 <= 2500,
    passesINP: r.inp?.p75 <= 200,
    passesCLS: r.cls?.p75 <= 0.1,
    passesCWV: r.passesCWV,
  }));
 
  return report;
}
 
async function queryCrux(origin, formFactor) {
  try {
    const response = await fetch(`${CRUX_API}?key=${API_KEY}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ origin, formFactor }),
    });
 
    const data = await response.json();
    if (!data.record) return null;
 
    const m = data.record.metrics;
    return {
      origin: data.record.key.origin,
      formFactor,
      lcp: { p75: m.LARGEST_CONTENTFUL_PAINT?.percentiles?.p75 },
      inp: { p75: m.INTERACTION_TO_NEXT_PAINT?.percentiles?.p75 },
      cls: { p75: m.CUMULATIVE_LAYOUT_SHIFT?.percentiles?.p75 },
      fcp: { p75: m.FIRST_CONTENTFUL_PAINT?.percentiles?.p75 },
      passesCWV:
        m.LARGEST_CONTENTFUL_PAINT?.percentiles?.p75 <= 2500 &&
        m.INTERACTION_TO_NEXT_PAINT?.percentiles?.p75 <= 200 &&
        m.CUMULATIVE_LAYOUT_SHIFT?.percentiles?.p75 <= 0.1,
    };
  } catch (error) {
    console.error(`Failed to query CrUX for ${origin}:`, error.message);
    return null;
  }
}

-- 月度 CWV 趋势报表（Materialized 表）
WITH monthly_cwv AS (
  SELECT
    origin,
    yyyymm,
    p75_largest_contentful_paint AS lcp,
    p75_interaction_to_next_paint AS inp,
    p75_cumulative_layout_shift AS cls,
    CASE
      WHEN p75_largest_contentful_paint <= 2500
        AND p75_interaction_to_next_paint <= 200
        AND p75_cumulative_layout_shift <= 0.1
      THEN TRUE ELSE FALSE
    END AS passes_cwv
  FROM `chrome-ux-report.materialized.metrics_summary`
  WHERE origin IN ('https://example.com', 'https://competitor.com')
    AND yyyymm >= '202501'
)
SELECT
  origin,
  yyyymm,
  lcp,
  inp,
  cls,
  passes_cwv,
  CASE
    WHEN lcp <= 2500 THEN 'Good'
    WHEN lcp <= 4000 THEN 'NI'
    ELSE 'Poor'
  END AS lcp_rating
FROM monthly_cwv
ORDER BY origin, yyyymm;

# 每周监控 CrUX 数据
name: CrUX Weekly Check
on:
  schedule:
    - cron: '0 9 * * 1'  # 每周一 9:00
 
jobs:
  crux-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - name: Query CrUX Data
        env:
          CRUX_API_KEY: ${{ secrets.CRUX_API_KEY }}
        run: |
          curl -X POST \
            "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=$CRUX_API_KEY" \
            -H "Content-Type: application/json" \
            -d '{"origin": "https://example.com", "formFactor": "PHONE"}' \
            -o crux-result.json
 
          LCP=$(jq '.record.metrics.LARGEST_CONTENTFUL_PAINT.percentiles.p75' crux-result.json)
          echo "LCP p75: ${LCP}ms"
 
          if [ "$LCP" -gt 2500 ]; then
            echo "::warning::LCP exceeds 2500ms threshold"
          fi