ページ速度最適化

ページ速度とCore Web Vitals——LPOに直結する技術最適化

「ページが重い」という一言で、あなたのLPのCVRは大きく下がります。Googleの調査によれば、読み込み時間が1秒から3秒に増えるだけでモバイルでの直帰率は32%上昇し、5秒になると直帰率は90%上昇します。さらに2021年以降、GoogleはCore Web Vitals（CWV）を検索ランキング要素として正式採用しており、速度改善はSEOとLPOの両面で不可欠な施策です。このレッスンでは、CWVの3指標の意味と目標値、画像最適化・遅延読み込み・CDNの実践手法、そして速度とCVRの相関データを具体的な数字で解説します。

---

Core Web Vitals — 3指標と速度×CVR相関

Core Web Vitals + 速度最適化マップ — CVRへの影響

CWVの3指標は「LCP（読み込み速度）・INP（操作応答性）・CLS（視覚的安定性）」です。PageSpeed Insightsで現状を確認し、各指標の目標値を達成することがLPO最適化の土台になります。

---

Core Web Vitals 3指標の詳解

LCP — 最大コンテンツ描画

LCP（Largest Contentful Paint）は、ページ内で最も大きなコンテンツ要素（通常はヒーロー画像またはH1テキスト）が描画されるまでの時間です。ユーザーが「ページが読み込まれた」と感じるタイミングと最も相関が高く、CWVの中で最も重要な指標です。

LCP悪化の主な原因と対策

• ◆大きな画像ファイル: WebP形式への変換、適切な解像度設定（次世代フォーマット）
• ◆レンダリングブロッキングリソース: CSSとJSの非同期読み込み、Critical CSSのインライン化
• ◆サーバー応答時間（TTFB）が遅い: CDN導入、サーバーキャッシュの設定
• ◆クライアントサイドレンダリング: SSR（サーバーサイドレンダリング）への移行

INP — インタラクション応答性

INP（Interaction to Next Paint）は2024年3月にFIDを置き換えた指標で、ユーザーがページ上でボタンをクリック・フォームに入力・メニューを選択した際の応答速度を計測します。LPではCTAボタンのクリック応答やフォーム入力時の動作に影響します。目標値は200ミリ秒以下（良好）で、500ミリ秒を超えると「不良」と評価されます。

INP改善の実践ポイント

• ◆重いJavaScriptの実行をメインスレッドから分離（Web Workers活用）
• ◆サードパーティスクリプト（チャットツール・分析ツール）の遅延読み込み
• ◆イベントハンドラーの最適化（debounce・throttleの適用）

CLS — 累積レイアウトシフト

CLS（Cumulative Layout Shift）は、ページの読み込み中にコンテンツが予期せず移動する量の合計です。画像が突然ずれてCTAボタンのタップ位置が変わる——こうした現象はユーザーの操作ミスを引き起こし、CVRを直接下げます。目標値は0.1以下（良好）で、0.25を超えると「不良」と評価されます。

CLS悪化の典型パターンと対策

💡 PageSpeed Insightsの使い方: pagespeed.web.dev でLPのURLを入力すると、モバイル・デスクトップ両方のCWVスコアと具体的な改善提案が表示されます。「フィールドデータ」（実ユーザーデータ）と「ラボデータ」（シミュレーション）の両方を確認しましょう。

---

画像最適化の実践

LPの読み込み速度を最も大きく改善できる施策が画像最適化です。一般的なLPでは、ページ転送量の60〜80%が画像によるものです。

画像最適化の4ステップ

ステップ1: フォーマット変換

WebPはJPEGより25〜34%、PNGより26%ファイルサイズが小さくなります。AVIF形式はさらに50%削減できますが、対応ブラウザに注意が必要です。<picture>要素を使ってAVIF → WebP → JPEGの順にフォールバックを設定するのがベストプラクティスです。

ステップ2: 適切なサイズ指定

モバイルで表示する幅が375pxであれば、画像は750px（2倍解像度）あれば十分です。srcset属性を使って端末の画面密度に応じた画像を提供することで、不必要な大画像の転送を避けられます。

ステップ3: 圧縮

SquooshやSharpを使って画質を落とさずファイルサイズを削減します。ヒーロー画像は品質80〜85%、サムネイルは70〜75%が一般的な目安です。

ステップ4: 遅延読み込み（Lazy Loading）

ファーストビュー外の画像にはloading="lazy"属性を追加します。これにより、ユーザーがスクロールして画像が表示領域に近づいたときに初めて読み込むため、初期読み込み量を大幅に削減できます。ただし、FV内のヒーロー画像にlazyを設定するとLCPが悪化するため、絶対に使用しないでください。

---

CDN（コンテンツデリバリーネットワーク）の活用

CDNとは、世界中に分散したサーバーにコンテンツをキャッシュして、ユーザーに最も近いサーバーからコンテンツを配信する仕組みです。CDNを導入するだけで、TTFB（初回バイト受信時間）が50〜70%改善するケースも少なくありません。

主要CDNサービスの比較

⚠️ CDN導入時の注意点: キャッシュ設定が適切でないと、LP更新後も古いコンテンツが表示され続けます。A/Bテストや緊急の文言変更時にキャッシュをパージする手順をあらかじめ決めておきましょう。

---

速度とCVRの相関データ

Portentの調査では、「サイトの読み込み時間が1秒のECサイトのCVRは、5秒のサイトの約3倍」という結果が出ています。また、Deloitteの調査では「モバイルページ速度が0.1秒改善すると小売サイトのCVRが8.4%向上する」というデータも示されています。

LPに置き換えると、読み込みに3秒以上かかるLPは、競合が1秒で表示される場合と比べてCVRが30〜40%低下するリスクがあります。LPOの施策として、コピーを変更する前に速度改善を先行させることが合理的な場合も多いです。

速度改善の優先順位チェックリスト

1. ◆PageSpeed InsightsでモバイルスコアをまずLCP・CLS・INPで確認
2. ◆ヒーロー画像をWebPに変換（即効性が最も高い）
3. ◆FV外の画像にloading="lazy"を追加
4. ◆Cloudflare無料プランでCDN設定
5. ◆サードパーティスクリプトをdeferまたはasyncで読み込み
6. ◆Googleフォントを自己ホスティングに変更

---

🏋️実践ワーク

以下のワークを実施してください。

1. ◆速度計測: 担当LPのURLをPageSpeed Insightsに入力し、モバイル・デスクトップ両方のCWVスコアを記録する。LCP・INP・CLSの値と「改善できる項目」の上位3件をスプレッドシートにまとめる
2. ◆画像監査: LPで使用している全画像のフォーマット・ファイルサイズ・width/height属性の有無を一覧化し、WebP変換の優先順位をつける
3. ◆Lazy Loading実装: FV外の画像3枚以上にloading="lazy"属性を追加し、実装前後でPageSpeed Insightsのスコアを比較する
4. ◆CDN設定: Cloudflare無料プランを導入してキャッシュルールを設定し、TTFBの変化をWebPageTestで計測する

📝まとめ

ページ速度はLPOの「インフラ」です。コピーや訴求軸の改善は速度が担保されて初めて意味を持ちます。CWVの3指標（LCP 2.5秒以下・INP 200ms以下・CLS 0.1以下）を目標値として、画像最適化・CDN・遅延読み込みを組み合わせて改善を進めてください。読み込み1秒の短縮がCVR10〜20%向上につながることを、常にビジネスインパクトとして意識しながら技術改善に取り組んでください。