Gemini APIでCore Web Vitalsを自動診断・最適化する

取り組みの背景 — Core Web VitalsとGemini AIの組み合わせが強力な理由

Webサイトの表示速度や安定性を測る指標「Core Web Vitals」は、GoogleのSEO評価においてますます重要な位置を占めています。LCP（Largest Contentful Paint）・CLS（Cumulative Layout Shift）・INP（Interaction to Next Paint）の3指標が「Good」の範囲に入っているかどうかが、検索順位に直接影響します。

しかし多くの開発者にとって、PageSpeed InsightsやLighthouseのレポートを読み解き、「どこを、どう直せばよいのか」を判断するのは容易ではありません。そこで注目したいのが Gemini API との連携 です。測定データをGeminiに渡すことで、問題の根本原因の特定から具体的なコード修正案の提示まで、AIが一気通貫でサポートしてくれます。

Core Web Vitalsの3指標をおさらいする

まず基本から確認しておきましょう。

LCP（Largest Contentful Paint）: ページの最大コンテンツ要素が表示されるまでの時間。2.5秒以内が「Good」。ヒーロー画像や大きなテキストブロックが対象になることが多く、画像の最適化やサーバー応答速度が影響します。
CLS（Cumulative Layout Shift）: ページ読み込み中にレイアウトがどれだけずれるかを示すスコア。0.1以下が「Good」。フォントの遅延読み込みや動的コンテンツの挿入が原因になりがちです。
INP（Interaction to Next Paint）: ユーザーの操作（クリック・タップ等）に対してページが視覚的に応答するまでの時間。200ミリ秒以下が「Good」。重いJavaScriptやメインスレッドのブロッキングが主な原因です。

これら3つを一度に診断し、優先度付きで改善提案を出すのは、人手では時間がかかります。Gemini APIを使えば、この作業を大幅に自動化できます。

PageSpeed Insights APIでデータを取得する

Google PageSpeed Insights APIは無料で利用でき、指定URLのCore Web Vitals測定値とLighthouse監査結果を JSON形式で取得できます。APIキーはGoogle Cloud Consoleから発行します。

以下のTypeScriptスクリプトで、測定データを取得・整形します。

// pagespeed.ts — PageSpeed Insights APIでCore Web Vitalsを取得する
import fetch from "node-fetch";
 
const PSI_API_KEY = "YOUR_PAGESPEED_API_KEY"; // 実際のキーに置き換えてください
 
interface CoreWebVitals {
  lcp: number; // 秒
  cls: number;
  inp: number; // ミリ秒
  fcp: number; // First Contentful Paint（参考値）
  ttfb: number; // Time to First Byte（参考値）
}
 
export async function fetchCoreWebVitals(url: string): Promise<CoreWebVitals> {
  const endpoint = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(url)}&key=${PSI_API_KEY}&strategy=mobile`;
  const res = await fetch(endpoint);
  const data = (await res.json()) as any;
 
  const metrics = data.loadingExperience?.metrics ?? {};
 
  return {
    lcp: metrics.LARGEST_CONTENTFUL_PAINT_MS?.percentile / 1000 ?? 0,
    cls: metrics.CUMULATIVE_LAYOUT_SHIFT_SCORE?.percentile / 100 ?? 0,
    inp: metrics.INTERACTION_TO_NEXT_PAINT?.percentile ?? 0,
    fcp: metrics.FIRST_CONTENTFUL_PAINT_MS?.percentile / 1000 ?? 0,
    ttfb: metrics.EXPERIMENTAL_TIME_TO_FIRST_BYTE?.percentile ?? 0,
  };
}
 
// 使用例: fetchCoreWebVitals("https://example.com").then(console.log)
// 出力例: { lcp: 3.2, cls: 0.18, inp: 240, fcp: 1.8, ttfb: 820 }

このスクリプトで取得した数値データを、次のステップでGemini APIに渡します。

Gemini APIで自動診断・改善提案を生成する

取得したCore Web Vitalsのデータとサイトの基本情報をプロンプトに含め、Gemini APIに分析と改善提案を依頼します。gemini-2.5-flash モデルはコスト効率が高く、このような診断タスクに最適です。

// analyze.ts — Gemini APIでCore Web Vitalsを診断・最適化提案を生成する
import { GoogleGenAI } from "@google/genai";
import { fetchCoreWebVitals } from "./pagespeed";
 
const GEMINI_API_KEY = "YOUR_GEMINI_API_KEY";
const client = new GoogleGenAI({ apiKey: GEMINI_API_KEY });
 
async function analyzeCoreWebVitals(targetUrl: string) {
  // Step 1: PageSpeed InsightsからCore Web Vitalsを取得
  const metrics = await fetchCoreWebVitals(targetUrl);
 
  // Step 2: 診断プロンプトを構築する
  const prompt = `
あなたはWebパフォーマンス最適化の専門家です。
以下のCore Web Vitals測定結果を分析し、各指標の問題点と具体的な改善策をステップ形式で提案してください。
コード修正例も含めること。
 
## 測定対象URL
${targetUrl}
 
## Core Web Vitals測定値
- LCP（Largest Contentful Paint）: ${metrics.lcp.toFixed(2)}秒（目標: 2.5秒以下）
- CLS（Cumulative Layout Shift）: ${metrics.cls.toFixed(3)}（目標: 0.1以下）
- INP（Interaction to Next Paint）: ${metrics.inp}ms（目標: 200ms以下）
- FCP（First Contentful Paint）: ${metrics.fcp.toFixed(2)}秒
- TTFB（Time to First Byte）: ${metrics.ttfb}ms
 
## 要求事項
1. 各指標を「Good / Needs Improvement / Poor」に分類する
2. 最も優先度が高い問題を3つ特定し、改善方法をコード例付きで説明する
3. 改善後の期待値（目安）も示すこと
`;
 
  // Step 3: Gemini APIを呼び出す
  const response = await client.models.generateContent({
    model: "gemini-2.5-flash",
    contents: [{ role: "user", parts: [{ text: prompt }] }],
  });
 
  return response.candidates?.[0]?.content?.parts?.[0]?.text ?? "";
}
 
// 実行
analyzeCoreWebVitals("https://example.com").then((result) => {
  console.log("=== Core Web Vitals 診断レポート ===");
  console.log(result);
});
 
// 出力例（抜粋）:
// ## 診断結果
// - LCP: 3.20秒 → Poor（目標の2.5秒を超過）
// - CLS: 0.180 → Poor（目標の0.1を超過）
// - INP: 240ms → Needs Improvement
//
// ## 優先度高: LCP改善
// ヒーロー画像に fetchpriority="high" を追加し、next/image の priority プロパティを有効化することで
// LCPを約0.8〜1.2秒改善できる見込みです。

このスクリプトを実行すると、Geminiが各指標を評価し、具体的なHTMLやCSS、JavaScriptの修正例を含む診断レポートを生成します。

LCP・CLS・INPそれぞれの改善でGeminiを活用するコツ

Gemini APIとCore Web Vitalsを組み合わせる際に、より精度の高い提案を得るためのポイントを紹介します。

LCPの改善: プロンプトにHTMLのheadセクションやCSSのヒーローセクションのコードを貼り付けると、画像の遅延読み込み設定の誤りやプリロードの欠落をピンポイントで指摘してもらえます。

CLSの改善: CLSはフォントのスワップやダイナミックコンテンツが原因になるため、<link rel="preload"> タグの有無や font-display: swap の設定をGeminiに確認してもらうと効果的です。

INPの改善: Chromeのパフォーマンスプロファイリング結果（JSONエクスポート）をGeminiに渡すと、メインスレッドをブロックしている処理を特定してもらえます。ReactやVue.jsのコンポーネントコードを含めれば、useEffect の最適化や不要な再レンダリングの削減提案まで得られます。

また、Gemini APIとGemini × Next.js 開発ガイドの手法を組み合わせれば、診断レポートをWebダッシュボードとして可視化することも可能です。

なお、より複雑なパフォーマンス分析（Lighthouse CI × GitHub Actions連携など）については、Gemini API Function Calling 本番環境対応実装ガイドで解説している構造化出力パターンが参考になります。

まとめ

Core Web Vitalsの改善は、SEO評価とユーザー体験の両面から重要な取り組みです。PageSpeed Insights APIでデータを取得し、Gemini APIに渡すことで、問題の特定から具体的なコード修正案の提示まで自動化できます。

本記事で紹介したフローをベースに、定期的な監視スクリプトやダッシュボードへ発展させることで、Webサイトのパフォーマンス管理をより効率的に進めることができます。

Google検索でのSEO改善や日々のWebコンテンツ制作についてはGeminiの活用法が広がっています。GeminiでSEOとコンテンツ制作を効率化する実践ガイドもあわせてご覧ください。