PageSpeed Insights API 자동화 — 전체 사이트 성능을 한 눈에

lib/pagespeed.ts — API 호출 함수

interface PageSpeedResult {
  url: string;
  strategy: "mobile" | "desktop";
  scores: {
    performance: number;
    accessibility: number;
    bestPractices: number;
    seo: number;
  };
  metrics: {
    fcp: string;    // First Contentful Paint
    lcp: string;    // Largest Contentful Paint
    cls: string;    // Cumulative Layout Shift
    tbt: string;    // Total Blocking Time
  };
}

export async function measurePageSpeed(
  url: string,
  strategy: "mobile" | "desktop" = "mobile"
): Promise<PageSpeedResult> {
  const apiKey = process.env.PAGESPEED_API_KEY;
  const apiUrl = "https://www.googleapis.com/pagespeedonline/v5/runPagespeed"
    + `?url=${encodeURIComponent(url)}`
    + `&strategy=${strategy}`
    + `&key=${apiKey}`
    + "&category=performance&category=accessibility"
    + "&category=best-practices&category=seo";

  const res = await fetch(apiUrl);
  const data = await res.json();

  const categories = data.lighthouseResult.categories;
  const audits = data.lighthouseResult.audits;

  return {
    url,
    strategy,
    scores: {
      performance: Math.round(categories.performance.score * 100),
      accessibility: Math.round(categories.accessibility.score * 100),
      bestPractices: Math.round(categories["best-practices"].score * 100),
      seo: Math.round(categories.seo.score * 100),
    },
    metrics: {
      fcp: audits["first-contentful-paint"].displayValue,
      lcp: audits["largest-contentful-paint"].displayValue,
      cls: audits["cumulative-layout-shift"].displayValue,
      tbt: audits["total-blocking-time"].displayValue,
    },
  };
}

전체 페이지 순차 측정

const pages = [
  { url: "https://example.com/", name: "홈" },
  { url: "https://example.com/blog", name: "블로그" },
  { url: "https://example.com/services", name: "서비스" },
  { url: "https://example.com/support", name: "고객지원" },
  // ... 전체 페이지 목록
];

async function measureAll() {
  const results: PageSpeedResult[] = [];

  for (const page of pages) {
    console.log(`측정 중: ${page.name} (${page.url})`);

    try {
      const result = await measurePageSpeed(page.url, "mobile");
      results.push(result);
      console.log(`  성능: ${result.scores.performance}점`);
    } catch (error) {
      console.error(`  측정 실패: ${page.name}`);
    }

    // API 쿼터 보호를 위한 딜레이 (3초)
    await new Promise(resolve => setTimeout(resolve, 3000));
  }

  return results;
}

마크다운 리포트 생성

function generateMarkdownReport(
  results: PageSpeedResult[]
): string {
  const date = new Date().toISOString().split("T")[0];

  let md = `# PageSpeed 측정 리포트\n`;
  md += `측정일: ${date}\n\n`;

  md += `| 페이지 | 성능 | 접근성 | BP | SEO | LCP |\n`;
  md += `|--------|------|--------|-----|-----|-----|\n`;

  for (const r of results) {
    const path = new URL(r.url).pathname || "/";
    md += `| ${path} `;
    md += `| ${r.scores.performance} `;
    md += `| ${r.scores.accessibility} `;
    md += `| ${r.scores.bestPractices} `;
    md += `| ${r.scores.seo} `;
    md += `| ${r.metrics.lcp} |\n`;
  }

  // 평균 점수
  const avg = results.reduce(
    (sum, r) => sum + r.scores.performance, 0
  ) / results.length;
  md += `\n**평균 성능 점수: ${Math.round(avg)}점**\n`;

  return md;
}

어드민 PageSpeed 페이지 (간소화)

"use client";
import { useState } from "react";

export default function PageSpeedAdmin() {
  const [results, setResults] = useState([]);
  const [measuring, setMeasuring] = useState(false);
  const [progress, setProgress] = useState("");

  const handleMeasure = async () => {
    setMeasuring(true);
    setProgress("측정 시작...");

    const res = await fetch("/api/admin/pagespeed", {
      method: "POST",
    });

    // Server-Sent Events로 진행 상황 수신
    const reader = res.body?.getReader();
    // ... 결과 처리 ...

    setMeasuring(false);
  };

  return (
    <div>
      <h1>PageSpeed 측정</h1>
      <button
        onClick={handleMeasure}
        disabled={measuring}
      >
        {measuring ? progress : "전체 페이지 측정"}
      </button>
      {/* 결과 테이블 */}
    </div>
  );
}

# 쿼터 초과 방지 팁

// 1. 요청 간 딜레이 (최소 3초)
await new Promise(r => setTimeout(r, 3000));

// 2. 일일 측정 횟수 제한
const MAX_DAILY_MEASUREMENTS = 100;
const todayCount = await getTodayMeasurementCount();
if (todayCount >= MAX_DAILY_MEASUREMENTS) {
  throw new Error("일일 측정 한도 초과");
}

// 3. 결과 캐싱 (같은 URL을 중복 측정 방지)
const cached = await getCachedResult(url);
if (cached && isRecent(cached, 24)) {  // 24시간 이내
  return cached;
}