ホーム
Web開発
Core Web Vitalsを最適化して表示速度を劇的に改善！実践的なパフォーマンスチューニング手法

Core Web Vitalsを最適化して表示速度を劇的に改善！実践的なパフォーマンスチューニング手法

5 May, 2025

Core Web Vitalsを最適化して表示速度を劇的に改善！実践的なパフォーマンスチューニング手法

Core Web Vitalsとは？Webパフォーマンスの新基準を理解する

Core Web Vitalsを最適化して表示速度を劇的に改善！実践的なパフォーマンスチューニング手法
Core Web Vitalsとは？Webパフォーマンスの新基準を理解する
最も重要な指標LCP：読み込み速度を最適化する具体的手法
インタラクティブな体験を向上させるCLS・FIDの改善方法
Webフォント最適化：パフォーマンスと美しさを両立させるテクニック
画像とメディア最適化：表示速度とユーザー体験を向上させる方法
実践的なパフォーマンス診断と継続的な改善のためのツールと方法論

Tasuke Hub管理人

東証プライム市場上場企業エンジニア

情報系修士卒業後、大手IT企業にてフルスタックエンジニアとして活躍。 Webアプリケーション開発からクラウドインフラ構築まで幅広い技術に精通し、複数のプロジェクトでリードエンジニアを担当。技術ブログやオープンソースへの貢献を通じて、日本のIT技術コミュニティに積極的に関わっている。

🎓情報系修士🏢東証プライム上場企業💻フルスタックエンジニア📝技術ブログ執筆者

Webサイトのパフォーマンスは、ユーザー体験とSEO双方において非常に重要な要素です。Googleは「Core Web Vitals」という指標を導入し、Webサイトのパフォーマンスを評価する新たな基準を設けました。これはただのトレンドではなく、検索順位にも直接影響する重要な要素となっています。

Core Web Vitalsは主に3つの指標で構成されています：

LCP (Largest Contentful Paint): ページの主要コンテンツの読み込み速度を測定します。良好な体験のためには2.5秒以内が目標です。
FID (First Input Delay): ユーザーの最初の操作に対する応答時間を測定します。100ミリ秒以内が理想的です。
CLS (Cumulative Layout Shift): ページ読み込み中のレイアウトの安定性を測定します。0.1以下のスコアが目標です。

// Core Web Vitalsの測定例
// Performance APIを使用してLCPを測定
new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP:', lastEntry.startTime);
}).observe({type: 'largest-contentful-paint', buffered: true});

これらの指標を改善することは、単に検索順位を上げるだけでなく、ユーザーがサイトを使用する際のストレスを減らし、コンバージョン率の向上にもつながります。「速さは機能だ」というGoogleの言葉があるように、ページ速度は今や単なる技術的な要素ではなく、ビジネス成果に直結する重要な要素なのです。

最も重要な指標LCP：読み込み速度を最適化する具体的手法

LCP（Largest Contentful Paint）は、ページの主要コンテンツがどれだけ速く表示されるかを測定する指標で、多くの場合、ユーザーが「このサイトは速い/遅い」と感じる最も直感的な要素です。Googleが推奨するLCPの目標値は2.5秒以内ですが、実際にはもっと速いほうがユーザー体験は向上します。

LCPを改善するための具体的な手法をいくつか紹介します：

サーバーレスポンスタイムの最適化

// サーバーサイドのキャッシュ実装例（Node.js + Express）
const express = require('express');
const apicache = require('apicache');
const app = express();

// キャッシュミドルウェアを設定
let cache = apicache.middleware;

// 全てのGETリクエストに対して5分間のキャッシュを適用
app.get('/api/*', cache('5 minutes'), (req, res) => {
  // API処理
});

クリティカルリソースの先読み

<!-- プリロードを使用して重要なリソースを先読み -->
<link rel="preload" href="/fonts/main-font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/css/critical.css" as="style">
<link rel="preload" href="/js/main.js" as="script">

画像の最適化と遅延読み込み

<!-- 画像の遅延読み込み -->
<img src="placeholder.jpg" 
     data-src="actual-image.jpg" 
     loading="lazy" 
     alt="説明文" 
     width="800" 
     height="600">

<script>
  // Intersection Observerを使った遅延読み込みの実装
  document.addEventListener('DOMContentLoaded', function() {
    const lazyImages = document.querySelectorAll('img[data-src]');
    
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          observer.unobserve(img);
        }
      });
    });
    
    lazyImages.forEach(img => observer.observe(img));
  });
</script>

JavaScriptの最適化

JavaScriptはLCPに大きな影響を与えます。不要なJavaScriptを削除し、必要なものはバンドルサイズを減らすためにコード分割を使用しましょう。

// Webpackでのコード分割の例
module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      // 共通モジュールを別ファイルに分割
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

アイルランドの詩人ウィリアム・バトラー・イェイツは「完璧を求めるあまり、良いものを敵にしてはならない」と言いました。パフォーマンス最適化も同様です。全てを完璧にしようとするのではなく、最も効果的な部分から改善していくことが重要です。LCPの最適化は、多くの場合、ユーザー体験に最も大きな影響を与えるため、まずはここから始めるのが良いでしょう。

インタラクティブな体験を向上させるCLS・FIDの改善方法

ユーザー体験の品質は、単に読み込み速度だけではなく、ページの安定性とインタラクティブ性にも大きく依存します。ここでは、CLS（Cumulative Layout Shift）とFID（First Input Delay）を改善するための効果的な方法を紹介します。

CLSの改善方法

CLSは、ページの読み込み中に予期せぬレイアウトシフトが発生する量を測定します。これはユーザーが「あっ、ボタンが動いた！」と感じる瞬間のことです。良好なユーザー体験のためには、CLSを0.1以下に抑えることが推奨されています。

<!-- 画像やメディアには必ず幅と高さを指定 -->
<img src="image.jpg" width="640" height="360" alt="説明">

<!-- 動的コンテンツの領域を事前に確保 -->
<div style="min-height: 400px;">
  <!-- 動的に読み込まれるコンテンツ -->
</div>

/* フォントの事前読み込みとフォールバックの指定 */
@font-face {
  font-family: 'MainFont';
  src: url('/fonts/main-font.woff2') format('woff2');
  font-display: swap; /* 重要: フォント読み込み中にシステムフォントで表示 */
}

/* 広告やiframeのスペースを確保 */
.ad-container {
  width: 100%;
  height: 250px;
  /* 空のコンテナでもスペースを確保 */
}

FIDの改善方法

FIDは、ユーザーが最初にページとインタラクトしたときのレスポンス時間を測定します。特に重要なのは、ボタンクリックやリンクタップなどのアクションに対する反応速度です。良好なFIDは100ミリ秒以下です。

// メインスレッドのブロックを防ぐテクニック
// 重たい処理をWeb Workerに移動
const worker = new Worker('heavy-calculation.js');

// メインスレッドでの処理
document.querySelector('button').addEventListener('click', () => {
  // 処理をWorkerに委託
  worker.postMessage({data: 'some-data'});
});

// 結果を受け取る
worker.addEventListener('message', (event) => {
  console.log('結果を受け取りました:', event.data);
});

// コード分割でJavaScriptバンドルを軽量化
// React.lazyとSuspenseを使用した例
import React, { Suspense, lazy } from 'react';

// コンポーネントを遅延読み込み
const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

CLSとFIDを改善するときに大切なのは、ユーザーの期待と実際の動作をできるだけ一致させることです。デザイナーのジョナサン・アイブは「シンプルなものを作ることは単純ではない」と言いましたが、Webパフォーマンスの最適化も同じです。見えない部分での努力が、ユーザーにとってのシームレスな体験を生み出すのです。

適切な改善策を実施することで、ユーザーはページのガタつきを感じることなく、スムーズにサイトとインタラクトできるようになります。これは、特にモバイルデバイスでの体験を大幅に向上させ、直接的なビジネス指標の改善にもつながります。

Webフォント最適化：パフォーマンスと美しさを両立させるテクニック

Webフォントはサイトのブランディングと可読性に大きく貢献しますが、最適化しないとパフォーマンスに悪影響を与える可能性があります。特に問題となるのは「FOIT（Flash of Invisible Text）」と「FOUT（Flash of Unstyled Text）」と呼ばれる現象で、カスタムフォントの読み込み中にテキストが一時的に表示されなかったり、デフォルトフォントで表示されたりする状態です。

Webフォントの最適化戦略

<!-- フォントの先読み -->
<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>

<!-- Google Fontsを使用する場合の最適化 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

/* font-displayプロパティでフォント読み込みの動作を制御 */
@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/my-font.woff2') format('woff2'),
       url('/fonts/my-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* フォント読み込み中はシステムフォントを表示し、準備でき次第切り替え */
}

/* フォールバックフォントと似た特性を持つシステムフォントを指定 */
body {
  font-family: 'MyCustomFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

サブセット化と最適なフォーマットの選択

Webフォントのサイズを削減する最も効果的な方法の一つは、使用する文字だけを含むサブセットフォントを作成することです。例えば、日本語のサイトで英数字だけを別フォントにしたい場合、全ての漢字を含むフォントをロードする必要はありません。

# フォントのサブセット化（pyftsubset使用例）
pyftsubset my-font.ttf --unicodes="U+0020-007F" --output-file=my-font-latin.woff2 --flavor=woff2

/* 言語ごとに最適化されたフォントの適用 */
/* ラテン文字（英数字）用 */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/my-font-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF; /* ラテン文字の範囲を指定 */
  font-display: swap;
}

/* 日本語用 */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/my-font-japanese.woff2') format('woff2');
  unicode-range: U+3000-30FF, U+FF00-FFEF, U+4E00-9FAF; /* 日本語の文字範囲 */
  font-display: swap;
}

可変フォントの活用

近年、複数のウェイトやスタイルを一つのファイルに統合した「可変フォント」が注目されています。これにより、複数のフォントファイルを読み込む必要がなくなり、帯域幅を節約できます。

/* 可変フォントの使用例 */
@font-face {
  font-family: 'MyVariableFont';
  src: url('/fonts/my-variable-font.woff2') format('woff2-variations');
  font-weight: 100 900; /* 100から900までのウェイトをサポート */
  font-display: swap;
}

/* ウェイトを自由に指定できる */
.light-text {
  font-weight: 300;
}

.bold-text {
  font-weight: 700;
}

映画監督のフランシス・フォード・コッポラは「芸術とは選択の問題である」と語りましたが、Webパフォーマンスの最適化も同じです。美しさと速度の両方を追求するためには、賢明な選択とトレードオフが必要です。適切なWebフォント最適化戦略を実装することで、サイトの個性を損なうことなく、パフォーマンスを向上させることができます。

画像とメディア最適化：表示速度とユーザー体験を向上させる方法

Webサイトにおいて、画像やメディアファイルは多くの場合、ページサイズの大部分を占めます。そのため、これらのアセットを最適化することは、パフォーマンスを向上させる上で最も効果的な方法の一つです。画像やメディアを最適化することで、特にLCPの改善に大きく貢献します。

画像の最適化テクニック

<!-- 画像の遅延読み込み -->
<img src="placeholder.jpg" 
     data-src="actual-image.jpg" 
     loading="lazy" 
     alt="説明文" 
     width="800" 
     height="600">

// 画像の読み込み優先度を設定
// 画面上部の重要な画像は優先度を高く
const img = new Image();
img.src = 'hero-image.jpg';
img.fetchPriority = 'high'; // 'high', 'low', 'auto'
document.body.appendChild(img);

次世代フォーマットの活用

WebPやAVIFなどの最新の画像フォーマットは、従来のJPEGやPNGと比較して、同じ視覚的品質でファイルサイズを大幅に削減できます。

<!-- picture要素を使った最適な画像フォーマットの提供 -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="説明文" width="800" height="600">
</picture>

レスポンシブ画像

様々な画面サイズに対応するレスポンシブ画像を提供することで、特にモバイルデバイスでのパフォーマンスを向上させることができます。

<!-- srcset属性を使用して様々な解像度の画像を提供 -->
<img src="image-800w.jpg"
     srcset="image-400w.jpg 400w,
             image-800w.jpg 800w,
             image-1200w.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1200px) 800px,
            1200px"
     alt="説明文">

動画の最適化

動画も重いコンテンツの一つですが、適切に最適化することで読み込み時間を短縮できます。

<!-- 動画の遅延読み込みとプリロード設定 -->
<video controls preload="metadata" poster="video-thumbnail.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  お使いのブラウザは動画タグをサポートしていません。
</video>

// IntersectionObserverを使用した動画の遅延読み込み
document.addEventListener('DOMContentLoaded', function() {
  const videos = document.querySelectorAll('video[data-src]');
  
  const videoObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const video = entry.target;
        const sources = video.querySelectorAll('source');
        
        sources.forEach(source => {
          source.src = source.dataset.src;
        });
        
        video.load();
        observer.unobserve(video);
      }
    });
  });
  
  videos.forEach(video => videoObserver.observe(video));
});

写真家のアンセル・アダムスは「12枚の素晴らしい写真を1年間で撮ることは大きな成果だ」と言いました。同様に、Webパフォーマンスの最適化も完璧を目指すのではなく、ユーザー体験に最も大きな影響を与える部分から改善していくことが重要です。

質の高い画像やメディアはユーザー体験を向上させる重要な要素ですが、それが速度の妨げとなっては本末転倒です。適切な最適化を行うことで、視覚的な品質を保ちながらパフォーマンスを向上させることが可能です。画像とメディアの最適化は、ページの総ダウンロードサイズを削減し、ユーザーのデータ使用量も節約するという副次的な利点もあります。

実践的なパフォーマンス診断と継続的な改善のためのツールと方法論

パフォーマンスの最適化は一度きりの作業ではなく、継続的なプロセスです。ユーザー体験を維持・向上させるためには、定期的な診断と改善が必要です。ここでは、実践的なパフォーマンス診断と改善のためのツールと方法論を紹介します。

パフォーマンス計測ツール

// Performance APIを使用した計測例
// 特定のタスクの実行時間を計測
const start = performance.now();
// 計測したい処理
doSomething();
const end = performance.now();
console.log(`処理時間: ${end - start}ms`);

// ナビゲーションタイミングの計測
window.addEventListener('load', () => {
  setTimeout(() => {
    const timing = performance.getEntriesByType('navigation')[0];
    console.log(`DOMContentLoaded: ${timing.domContentLoadedEventEnd}ms`);
    console.log(`Load: ${timing.loadEventEnd}ms`);
  }, 0);
});

主要なパフォーマンス診断ツール：

Lighthouse - Googleが提供する総合的なウェブページ品質診断ツール
WebPageTest - 様々な環境でのパフォーマンステスト
Chrome DevTools - パフォーマンスプロファイリングとメモリ分析
PageSpeed Insights - Core Web Vitalsを含む総合的な診断

継続的インテグレーションへの組み込み

パフォーマンスメトリクスを継続的インテグレーションプロセスに組み込むことで、品質を維持できます。

// パフォーマンスバジェットの設定例（lighthouserc.js）
module.exports = {
  ci: {
    collect: {
      url: ['https://example.com/', 'https://example.com/about'],
      numberOfRuns: 3,
    },
    assert: {
      // パフォーマンスのしきい値を設定
      assertions: {
        'categories:performance': ['error', {minScore: 0.9}],
        'largest-contentful-paint': ['error', {maxNumericValue: 2500}],
        'cumulative-layout-shift': ['error', {maxNumericValue: 0.1}],
        'first-input-delay': ['error', {maxNumericValue: 100}],
      },
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

ユーザー中心のパフォーマンス最適化

実際のユーザーが使用する環境でのパフォーマンスを計測するリアルユーザーモニタリング（RUM）を導入することも重要です。

// Web Vitalsライブラリを使用したRUMの実装例
import {getLCP, getFID, getCLS} from 'web-vitals';

function sendToAnalytics({name, delta, id}) {
  // アナリティクスにデータを送信
  const body = JSON.stringify({name, delta, id});
  navigator.sendBeacon('/analytics', body);
}

// 各メトリクスをモニタリング
getLCP(sendToAnalytics);
getFID(sendToAnalytics);
getCLS(sendToAnalytics);

最適化戦略の優先順位付け

全てを一度に最適化することは現実的ではありません。最大の効果を得るためには、優先順位付けが重要です：

ユーザー影響の大きさ - 最もユーザーに影響を与える問題から取り組む
実装の難易度 - 比較的簡単に実装できる最適化から始める
ビジネス価値 - コンバージョンに直結する部分を優先する

アインシュタインが「知識とは行動なしには無意味であり、行動とは知識なしには危険である」と語ったように、パフォーマンス最適化においても、計測と行動の両方が重要です。データに基づいて改善点を特定し、優先順位を付けて実装し、その効果を再び計測するという循環を作ることで、継続的な改善が可能になります。

最後に、パフォーマンス最適化はチーム全体の責任であることを認識しましょう。デザイナー、開発者、コンテンツ制作者など、全ての関係者がパフォーマンスの重要性を理解し、それぞれの役割で貢献することが重要です。持続可能なパフォーマンス文化を構築することが、長期的な成功への鍵となります。

Core Web Vitalsを最適化して表示速度を劇的に改善！実践的なパフォーマンスチューニング手法

Core Web Vitalsを最適化して表示速度を劇的に改善！実践的なパフォーマンスチューニング手法

Core Web Vitalsとは？Webパフォーマンスの新基準を理解する

目次

Tasuke Hub管理人

最も重要な指標LCP：読み込み速度を最適化する具体的手法

サーバーレスポンスタイムの最適化

クリティカルリソースの先読み

画像の最適化と遅延読み込み

JavaScriptの最適化

インタラクティブな体験を向上させるCLS・FIDの改善方法

CLSの改善方法

FIDの改善方法

Webフォント最適化：パフォーマンスと美しさを両立させるテクニック

Webフォントの最適化戦略

サブセット化と最適なフォーマットの選択

可変フォントの活用

画像とメディア最適化：表示速度とユーザー体験を向上させる方法

画像の最適化テクニック

次世代フォーマットの活用

レスポンシブ画像

動画の最適化

実践的なパフォーマンス診断と継続的な改善のためのツールと方法論

パフォーマンス計測ツール

継続的インテグレーションへの組み込み

ユーザー中心のパフォーマンス最適化

最適化戦略の優先順位付け

おすすめコンテンツ

初心者でもわかるWebSockets入門：リアルタイムアプリケーション開発の基礎と実践例

画像の遅延読み込み完全ガイド：ウェブサイトの表示速度を劇的に改善する実践テクニック

【2025年最新】マイクロフロントエンド入門：モダンWebアプリケーションのための実践的アーキテクチャ設計

Node.jsとWebSocketで作る！初心者でも実装できるリアルタイムWebアプリケーション開発チュートリアル

【2025年最新】PWAで変わるWeb体験：初心者でも実装できるProgressive Web Appsの完全ガイド

Core Web Vitalsを最適化して表示速度を劇的に改善！実践的なパフォーマンスチューニング手法