【Lighthouse 100/100/100/100】個人サイトで満点を取るためにやったこと全部

Posted at 2026-05-06

個人サイトでLighthouseスコア100点満点を取ったので、やったこと全部書く

はじめに

個人で運営しているサイト yopr.net で、Lighthouseのスコアを モバイル 100/100/100/100 に到達させることができました。

デスクトップも 97/91/100/100 とほぼ完璧。

モバイル:
  パフォーマンス: 100
  ユーザー補助: 100
  おすすめの方法: 100
  SEO: 100

デスクトップ:
  パフォーマンス: 97
  ユーザー補助: 91
  おすすめの方法: 100
  SEO: 100

「個人サイトでスコア100点ってどうやるの?」が気になる方向けに、実際にやったことを全部書いていきます。

対象読者

個人サイトを運営している方
Lighthouseのスコアを上げたい方
フロントエンドのパフォーマンス改善に興味がある方

結論(先に)

スコア100点に必要なのは、派手な技術ではなく地道な積み重ねでした。具体的には以下の4つ:

レンダリングをブロックしない
レイアウトシフト(CLS)を絶対起こさない
アクセシビリティを最初から意識する
メタタグと構造化データを丁寧に書く

順番に解説していきます。

1. パフォーマンス: 100点の取り方

1-1. CSSは最小限+インライン化

外部CSSファイルはレンダリングブロックします。クリティカルなスタイルはインライン化、それ以外は遅延読み込み。

<!-- BAD: 全部外部CSS -->
<link rel="stylesheet" href="style.css">

<!-- GOOD: クリティカルCSSはインライン -->
<style>
  /* First Viewに必要なスタイルだけ */
  body { margin: 0; font-family: sans-serif; }
  header { ... }
</style>
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">

1-2. 画像の最適化

これは絶対やる:

WebP形式を使う(JPG/PNGより30-50%軽い)
width, height 属性を必ず指定(CLSゼロのため)
loading="lazy" で遅延読み込み

<img 
  src="image.webp" 
  width="800" 
  height="600" 
  loading="lazy"
  alt="説明文"
>

1-3. JavaScriptは defer または async

<head> で同期読み込みすると、HTMLパースが止まります。

<!-- GOOD -->
<script src="app.js" defer></script>

<!-- 独立スクリプトなら -->
<script src="analytics.js" async></script>

1-4. Preconnect で接続を前倒し

外部リソース(API、フォント等)へのDNS解決を前倒しすると、体感速度が変わります。

<link rel="preconnect" href="https://api.example.com">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>

ただし、実際に使うオリジンだけ指定すること。使わないものを指定すると逆効果でLighthouseが警告してきます。

2. CLS=0 の取り方

CLS(Cumulative Layout Shift)は 絶対にゼロを目指す。これが一番の要点。

2-1. 画像・iframe には必ずサイズ指定

<!-- BAD: 読み込み完了でレイアウトがガタッ -->
<img src="hero.webp">

<!-- GOOD: 最初から領域確保 -->
<img src="hero.webp" width="1200" height="630">

2-2. Webフォントの読み込み戦略

フォント切り替えで起きるFOIT/FOUTを防ぐ:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* または optional */
}

2-3. 動的コンテンツ用のスペース確保

「あとから追加されるコンテンツ」のために、最初から min-height を確保。

.dynamic-section {
  min-height: 200px; /* 後から要素が入る分の領域 */
}

3. アクセシビリティ: 100点の取り方

3-1. すべての画像に alt 属性

<!-- 装飾画像 -->
<img src="decoration.webp" alt="">

<!-- 意味のある画像 -->
<img src="chart.webp" alt="2026年4月の売上推移グラフ">

3-2. 色のコントラスト比

WCAG AA基準: 4.5:1以上(通常テキスト)

僕がデスクトップで91点だったのは、これで一部減点されてました。よくある罠:

灰色文字 #999 を #fff 背景に → 比率2.85:1 でアウト
リンクの薄い色 → アウト

Chrome DevTools のコントラストチェッカーで全部確認するのがおすすめ。

3-3. キーボード操作対応

<!-- BAD: クリック専用 -->
<div onclick="doSomething()">ボタン</div>

<!-- GOOD: 適切な要素 -->
<button onclick="doSomething()">ボタン</button>

<button>、<a>、<input> 等を使えば、キーボード操作・スクリーンリーダー対応が自動でつく。

3-4. ランドマーク要素を使う

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

<div> だらけにせず、意味のある要素を使うだけで点数が上がります。

4. SEO: 100点の取り方

4-1. 必須メタタグ

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページタイトル | サイト名</title>
  <meta name="description" content="ページの説明(120文字程度)">
  <link rel="canonical" href="https://example.com/page">
</head>

4-2. OGP / Twitter Card

SNSシェア時の表示で、間接的にSEOに効きます:

<meta property="og:title" content="記事タイトル">
<meta property="og:description" content="説明">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/page">
<meta name="twitter:card" content="summary_large_image">

4-3. 構造化データ

JSON-LDで構造化データを書くと、Googleが内容を理解しやすくなります:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "サイト名",
  "url": "https://example.com"
}
</script>

5. おすすめの方法: 100点の取り方

5-1. HTTPS化

これは大前提。Let's Encrypt なら無料。

5-2. コンソールエラーゼロ

JavaScriptエラーが出てると減点対象。本番デプロイ前に DevTools のコンソールを必ず確認。

5-3. 古いライブラリを使わない

依存ライブラリは最新版に保つ。古いjQueryなど、既知の脆弱性があるものは即減点。

やらなくてよかったこと

意外なことに、やらなくても100点取れたものもあります:

❌ Service Worker(PWA化) → 不要
❌ HTTP/3対応 → HTTP/2で十分
❌ Critical CSS の自動抽出 → 手動でも余裕
❌ 画像のCDN配信 → 自前サーバーでOK

つまり、派手な技術より基本に忠実が正解でした。

参考: 計測環境

Moto G Power エミュレーション(モバイル)
低速 4G スロットリング
HeadlessChromium 146.0.7680.177
Lighthouse 13.0.1

まとめ

Lighthouseスコア100点は、派手な最適化より地道な基本の積み重ねで取れます。

特に意識したいのは:

CLS = 0 を絶対に守る
画像にサイズ指定 を必ず入れる
アクセシビリティを最初から設計する
メタタグを丁寧に書く

派手な施策は不要。基本に忠実にやれば、個人サイトでも100点は十分狙えます。

質問・指摘があればコメントでどうぞ。スコア改善で困っている部分も、わかる範囲で答えます。

それでは、よい個人サイトライフを! 🚀

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up