PageSpeed Insights パフォーマンス100点を取るためのサイト構築術

2026年3月21日

はじめに

Google PageSpeed Insights で全項目100点を取ることは、正しい技術選定と設計をすれば決して難しくありません。

本記事では、このサイト自体が実際に達成したパフォーマンス・ユーザー補助・おすすめの方法・SEO 全て100点の構成を、具体的な実装とともに解説します。

PageSpeed Insights 全項目100点の計測結果

技術スタック

要素	選定	理由
フレームワーク	Astro	ゼロ JS デフォルト出力。静的 HTML で最速
CSS	Pico.css + カスタム CSS	クラスレスで軽量。セマンティック HTML にスタイル自動適用
ホスティング	Cloudflare Pages	グローバル CDN 標準。無料枠で十分

この3つの組み合わせが、100点達成の土台になります。

パフォーマンス100点のための5原則

1. JavaScript をクライアントに送らない

Astro はデフォルトでクライアント JavaScript を一切出力しません。ページは純粋な HTML + CSS として配信されるため、パースやハイドレーションのコストがゼロです。

---
// この部分はビルド時にのみ実行される
const posts = await getCollection('posts');
---

<!-- 出力は純粋な HTML のみ -->
<ul>
  {posts.map(post => <li>{post.data.title}</li>)}
</ul>

インタラクティブな機能が必要な場合でも、Astro の「アイランドアーキテクチャ」により、必要なコンポーネントだけを部分的にハイドレーションできます。

2. 外部フォントを使わない

Google Fonts は手軽ですが、パフォーマンスの大敵です。実際にこのサイトで計測した結果がこちらです。

状態	パフォーマンススコア	レンダリングブロック時間
Google Fonts あり	71点	4,510ms
システムフォントのみ	100点	0ms

Noto Sans JP を Google Fonts で読み込むと、CSS ファイル（89KB）+ woff2 フォントファイル15本以上がクリティカルパスに追加され、LCP が大幅に遅延しました。

解決策はシンプルです。システムフォントを使いましょう。

:root {
  --pico-font-family: system-ui, -apple-system, "Hiragino Sans",
    "Yu Gothic UI", "Segoe UI", Meiryo, sans-serif;
}

macOS ならヒラギノ角ゴ、Windows なら游ゴシック、iOS / Android も標準で美しい日本語フォントを搭載しています。ダウンロード時間はゼロです。

どうしても Web フォントを使いたい場合は、セルフホスティング + font-display: swap + サブセット化（使用する文字だけ抽出）の3点セットが必須です。

3. CSS を最小限に保つ

Pico.css はフルビルドで約80KB ありますが、Astro がバンドル時に使用される CSS だけを出力してくれます。さらに、カスタム CSS をデザイントークンベースで書くことで、重複や冗長なスタイルを防ぎます。

:root {
  /* 8px グリッドベースのスペーシング */
  --s-2: 0.5rem;    /* 8px */
  --s-4: 1rem;      /* 16px */
  --s-6: 2rem;      /* 32px */
  --s-8: 3rem;      /* 48px */

  /* タイポグラフィスケール */
  --fs-sm: 0.875rem;  /* 14px */
  --fs-base: 1rem;    /* 16px */
  --fs-lg: 1.25rem;   /* 20px */
  --fs-xl: 1.75rem;   /* 28px */
  --fs-2xl: 2.75rem;  /* 44px */
}

変数を使い回すことで、CSS 全体を500行以内に収めています。

4. 画像を最適化する

画像はパフォーマンスに最も影響を与える要素です。以下のルールを守りましょう。

loading="lazy": ファーストビュー外の画像は遅延読み込み
decoding="async": メインスレッドをブロックしない
width / height 属性: CLS（レイアウトシフト）を防止
WebP / AVIF 形式: JPEG / PNG より30〜50%軽量

Astro では rehype プラグインで Markdown 画像に自動で属性を付与できます。

// rehype-img-attrs.mjs
export function rehypeImgAttrs() {
  return (tree) => {
    visit(tree, 'element', (node) => {
      if (node.tagName === 'img') {
        node.properties.loading ??= 'lazy';
        node.properties.decoding ??= 'async';
      }
    });
  };
}

5. CDN でホスティングする

Cloudflare Pages は無料でグローバル CDN を提供します。デプロイも簡単です。

npm install -D wrangler
npx wrangler pages project create my-site --production-branch=main
npm run build
npx wrangler pages deploy dist --project-name=my-site

4コマンドで世界中のエッジサーバーから配信されます。

SEO 100点のための構成

パフォーマンスだけでなく、SEO スコアも100点を取るために実装した項目です。

メタデータ

Title: ページ固有のタイトル + サイト名（記事タイトル | Media）
Meta Description: 各ページに120〜160文字の固有説明文
Canonical URL: 全ページに設定
OGP / Twitter Card: og:title, og:description, og:image を全ページに

構造化データ（JSON-LD）

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "記事タイトル",
  "datePublished": "2026-03-21",
  "author": { "@type": "Organization", "name": "Media" },
  "publisher": { "@type": "Organization", "name": "Media" },
  "image": ["https://example.com/images/og.png"]
}

トップページには WebSite スキーマ、記事ページには BlogPosting + BreadcrumbList スキーマを配置しています。

その他

sitemap-index.xml: @astrojs/sitemap で自動生成
robots.txt: クローラー制御 + Sitemap URL 記載
404 ページ: <meta name="robots" content="noindex"> で検索対象外

ユーザー補助（アクセシビリティ）100点

<html lang="ja">: 言語属性
見出し階層: h1 → h2 → h3 をスキップなしで構成
aria-label: ナビゲーションを区別（「グローバルナビゲーション」「フッターナビゲーション」）
aria-current="page": 現在のページをナビゲーション上で明示
:focus-visible: キーボードユーザー向けフォーカスインジケータ
コントラスト比: 全テキストで WCAG AA 基準（4.5:1 以上）をクリア
role="list": Safari の list-style: none によるロール除去を防止

まとめ

パフォーマンス100点は特別な最適化テクニックではなく、「余計なものを入れない」設計の結果です。

JavaScript を送らない → Astro
外部フォントを使わない → システムフォント
CSS を最小限に → Pico.css + デザイントークン
画像を最適化する → lazy loading + WebP
CDN でホスティング → Cloudflare Pages

この5つを守るだけで、パフォーマンス・SEO・アクセシビリティ・ベストプラクティスの全項目100点は達成できます。

← 記事一覧に戻る