Webパフォーマンス最適化とは？実践的なテクニックとツール

Core Web Vitals

Googleが定義する、ユーザー体験を評価する3つの指標：
1. LCP（Largest Contentful Paint）: 最大コンテンツの表示時間（2.5秒以内が良好）
2. FID（First Input Delay）: 初回入力までの遅延（100ミリ秒以内が良好）
3. CLS（Cumulative Layout Shift）: 累積レイアウトシフト（0.1以下が良好）

測定ツール

- Google Lighthouse: Chrome DevToolsに統合されたパフォーマンス測定ツール
- PageSpeed Insights: Googleが提供するWebパフォーマンス分析ツール
- WebPageTest: 詳細なパフォーマンス分析が可能
- Chrome DevTools: ネットワークタブ、パフォーマンスタブで分析

適切なフォーマットの選択

画像フォーマットの選択：

JPEG: 写真や複雑な画像に適している
- 可逆圧縮
- ファイルサイズが小さい
- 透明度をサポートしない

PNG: 透明度が必要な画像に適している
- 可逆圧縮
- 透明度をサポート
- ファイルサイズが大きい

WebP: モダンなブラウザで推奨
- JPEGやPNGより20-30%小さい
- 透明度をサポート
- すべてのブラウザでサポートされていない

AVIF: 最新のフォーマット
- WebPよりさらに小さい
- 高品質
- ブラウザサポートが限定的

SVG: ベクター画像
- スケーラブル
- ファイルサイズが小さい（シンプルな画像の場合）
- ロゴやアイコンに適している

レスポンシブ画像

レスポンシブ画像の実装：

srcset属性: 異なる解像度の画像を提供

<img srcset="image-320w.jpg 320w,
             image-640w.jpg 640w,
             image-1280w.jpg 1280w"
     sizes="(max-width: 640px) 320px,
            (max-width: 1280px) 640px,
            1280px"
     src="image-640w.jpg"
     alt="画像">

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="画像">
</picture>

遅延読み込み（Lazy Loading）

遅延読み込みの実装：

ネイティブのloading属性: ブラウザのネイティブ機能

<img src="image.jpg" loading="lazy" alt="画像">

画像圧縮

画像圧縮の方法：

ツール:
- ImageOptim: macOS用の画像最適化ツール
- TinyPNG: オンライン画像圧縮サービス
- Squoosh: Googleが提供する画像圧縮ツール
- Sharp: Node.js用の画像処理ライブラリ

圧縮のポイント:
- 品質とファイルサイズのバランス
- 用途に応じた最適な品質設定
- 自動化ツールの活用

ビルド時の最適化:
- Webpack、Viteなどのビルドツールで自動圧縮
- 画像最適化プラグインの使用

HTTPキャッシュヘッダー

HTTPキャッシュヘッダーの設定：

Cache-Control: キャッシュの制御

Cache-Control: public, max-age=31536000

ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

Last-Modified: Wed, 21 Oct 2024 07:28:00 GMT

Service Workerによるキャッシング

Service Workerによるキャッシング：

Service Worker: ブラウザとサーバーの間で動作するプロキシ
- オフライン対応
- キャッシュの完全な制御
- バックグラウンドでの処理

キャッシュ戦略:
- Cache First: キャッシュを優先
- Network First: ネットワークを優先
- Stale While Revalidate: キャッシュを返しつつ更新
- Network Only: ネットワークのみ
- Cache Only: キャッシュのみ

実装のポイント:
- キャッシュのバージョン管理
- キャッシュのクリーンアップ
- オフライン時のフォールバック

ブラウザキャッシュの種類

ブラウザキャッシュの種類：

メモリキャッシュ: ブラウザのメモリに保存
- 高速
- タブを閉じると削除
- 小さなリソースに適している

ディスクキャッシュ: ハードディスクに保存
- 永続的
- タブを閉じても残る
- 大きなリソースに適している

HTTPキャッシュ: HTTPヘッダーで制御
- Cache-Control、ETag、Last-Modifiedで制御
- ブラウザが自動的に管理

Application Cache: HTML5のキャッシュ（非推奨）
- Service Workerに置き換えられた

JavaScriptのコード分割

JavaScriptのコード分割：

動的インポート: ES2020のimport()関数

// 動的にモジュールを読み込む
const module = await import('./module.js');

const LazyComponent = React.lazy(() => import('./LazyComponent'));

CSSのコード分割

CSSのコード分割：

コンポーネント単位: コンポーネントごとにCSSを分割
- CSS Modules
- Styled Components
- CSS-in-JS

ページ単位: ページごとにCSSを分割
- ルートベースの分割
- 必要なCSSのみを読み込む

クリティカルCSS: 初期表示に必要なCSSのみをインライン化
- フォールド（最初に見える部分）のCSS
- 残りのCSSは遅延読み込み

実装:
- Webpackのmini-css-extract-plugin
- PostCSSの最適化
- PurgeCSSで未使用のCSSを削除

ルートベースのコード分割

ルートベースのコード分割：

React Router:

const Home = React.lazy(() => import('./pages/Home'));
const About = React.lazy(() => import('./pages/About'));

const routes = [
  { path: '/', component: () => import('./pages/Home.vue') },
  { path: '/about', component: () => import('./pages/About.vue') }
];

リソースヒント

リソースヒントの種類：

preconnect: DNS解決とTCP接続を事前に行う

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

<link rel="dns-prefetch" href="https://api.example.com">

<link rel="prefetch" href="/next-page.html">

<link rel="preload" href="/critical.css" as="style">
<link rel="preload" href="/hero-image.jpg" as="image">

<link rel="prerender" href="/next-page.html">

フォントの最適化

フォントの最適化：

フォントの読み込み:
- font-display: swap: フォント読み込み中もテキストを表示
- preload: 重要なフォントを事前に読み込み
- preconnect: フォントサーバーへの接続を事前に確立

フォントのサブセット化:
- 必要な文字のみを含める
- 日本語フォントは特に重要
- unicode-rangeで範囲を指定

自己ホスト:
- フォントを自分のサーバーでホスト
- サードパーティの読み込みを避ける
- キャッシュの制御が可能

実装例:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" href="/fonts/custom.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
  font-family: 'Custom';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
}
</style>

クリティカルCSS

クリティカルCSSの実装：

クリティカルCSS: 初期表示に必要なCSSのみ
- フォールド（最初に見える部分）のスタイル
- インライン化してHTMLに埋め込む
- 残りのCSSは遅延読み込み

実装方法:
1. クリティカルCSSを抽出
2. HTMLの<head>にインライン化
3. 残りのCSSを<link>で読み込み（media="print"で遅延読み込み）

ツール:
- Critical: クリティカルCSSを自動抽出
- PurgeCSS: 未使用のCSSを削除
- PostCSS: CSSの最適化

メリット:
- 初期レンダリングの高速化
- FCP（First Contentful Paint）の改善
- レンダリングブロックの削減

Tree Shaking

Tree Shakingの実装：

Tree Shaking: 使用されていないコードを削除
- ES Modules（import/export）を使用
- 静的解析で未使用のコードを検出
- バンドルサイズの削減

実装:
- Webpack: 自動的にTree Shakingを実行
- Rollup: Tree Shakingに優れている
- Vite: RollupベースでTree Shakingを実行

注意点:
- CommonJS（require）はTree Shakingできない
- 副作用のあるコードは削除されない可能性
- package.jsonのsideEffectsフィールドで設定

例:

// 使用されていない関数は削除される
import { usedFunction } from './utils';
// unusedFunctionは削除される

ミニファイ

ミニファイの実装：

ミニファイ: コードを圧縮してサイズを削減
- 空白、改行、コメントの削除
- 変数名の短縮（オプション）
- コードの最適化

ツール:
- Terser: JavaScriptのミニファイ
- cssnano: CSSのミニファイ
- html-minifier: HTMLのミニファイ

実装:
- Webpack: TerserPluginで自動ミニファイ
- Vite: 本番ビルドで自動ミニファイ
- Rollup: rollup-plugin-terserを使用

注意点:
- ソースマップの生成
- デバッグのしやすさとのバランス
- 圧縮率と読み込み時間の改善

不要なコードの削除

不要なコードの削除：

依存関係の見直し:
- 使用していないライブラリを削除
- 軽量な代替ライブラリを検討
- package.jsonを定期的に確認

Polyfillの削除:
- モダンなブラウザのみをサポートする場合
- 必要なPolyfillのみを追加
- core-jsの使用範囲を限定

未使用のCSS:
- PurgeCSSで未使用のCSSを削除
- CSS Modulesでスコープを限定
- 動的に生成されるクラス名に注意

分析ツール:
- webpack-bundle-analyzer: バンドルの可視化
- source-map-explorer: バンドルサイズの分析
- Lighthouse: バンドルサイズの警告

Gzip/Brotli圧縮

レスポンスの圧縮：

Gzip圧縮: 広くサポートされている圧縮形式
- テキストベースのファイルを50-90%圧縮
- ほとんどのサーバーでサポート
- Content-Encoding: gzipヘッダー

Brotli圧縮: より効率的な圧縮形式
- Gzipより10-20%高い圧縮率
- モダンなブラウザでサポート
- Content-Encoding: brヘッダー

実装:
- Nginx: gzip、brotliモジュール
- Apache: mod_deflate、mod_brotli
- Node.js: compressionミドルウェア
- Express: compressionパッケージ

設定例:
- HTML、CSS、JavaScript: 圧縮
- 画像、動画: すでに圧縮されているため不要

HTTP/2とHTTP/3

HTTP/2とHTTP/3の活用：

HTTP/2:
- マルチプレクシング: 複数のリクエストを1つの接続で処理
- サーバープッシュ: サーバーがリソースを事前に送信
- ヘッダー圧縮: HPACKでヘッダーを圧縮
- バイナリプロトコル: テキストベースより効率的

HTTP/3:
- QUICプロトコル: UDPベースのトランスポート
- より高速: 接続確立が高速
- マルチパス: 複数のネットワークパスを使用
- パケットロスへの耐性: より堅牢

実装:
- HTTPSが必要（HTTP/2、HTTP/3）
- サーバーの設定で有効化
- CDNで自動的にサポート

CDNの活用

CDN（Content Delivery Network）の活用：

CDNのメリット:
- 地理的な分散: ユーザーに近いサーバーから配信
- キャッシング: 静的リソースをキャッシュ
- 負荷分散: サーバーの負荷を分散
- DDoS対策: 攻撃からの保護

CDNプロバイダー:
- Cloudflare: 無料プランあり、高速
- AWS CloudFront: AWS統合
- Fastly: エッジコンピューティング
- Vercel: フロントエンドに最適化

実装:
- 静的リソースをCDNに配置
- カスタムドメインの設定
- キャッシュポリシーの設定
- オリジンサーバーの設定

クエリの最適化

クエリの最適化：

SELECTの最適化:
- 必要なカラムのみを選択（SELECT *を避ける）
- カウントクエリの最適化
- サブクエリの最適化

JOINの最適化:
- 適切なJOINタイプの選択
- インデックスの活用
- N+1問題の回避

WHERE句の最適化:
- インデックスを使用できる条件を記述
- 関数の使用を避ける
- 範囲検索の最適化

LIMITとOFFSET:
- ページネーションの最適化
- カーソルベースのページネーションを検討
- オフセットが大きい場合のパフォーマンス問題に注意

インデックスの活用

インデックスの活用：

インデックスの種類:
- B-treeインデックス: 一般的なインデックス
- ハッシュインデックス: 等価検索に最適
- 全文検索インデックス: テキスト検索に最適

インデックスを作成すべきカラム:
- WHERE句で頻繁に使用されるカラム
- JOINで使用されるカラム
- ORDER BYで使用されるカラム
- 外部キー

複合インデックス:
- 複数のカラムにインデックスを作成
- カラムの順序が重要
- 左端一致の原則

注意点:
- インデックスは書き込みを遅くする
- 過剰なインデックスは避ける
- 定期的にインデックスの使用状況を確認

キャッシング

リアルユーザーモニタリング（RUM）

リアルユーザーモニタリング（RUM）：

RUMとは: 実際のユーザーの体験を測定
- 実際のデバイス、ネットワーク、ブラウザで測定
- ラボ環境では再現できない問題を発見
- ユーザー体験の実際の状況を把握

測定指標:
- Core Web Vitals（LCP、FID、CLS）
- ページ読み込み時間
- エラー率
- ユーザーエージェント情報

ツール:
- Google Analytics: 無料で使用可能
- New Relic: 包括的なモニタリング
- Datadog: インフラとアプリケーションの監視
- Sentry: エラー追跡とパフォーマンス監視

実装:
- Performance APIを使用
- カスタムメトリクスの収集
- 定期的なレポートの作成

パフォーマンスバジェット

パフォーマンスバジェット：

パフォーマンスバジェット: 許容できるパフォーマンスの上限
- バンドルサイズの上限
- リソース数の上限
- 読み込み時間の上限

設定例:
- JavaScript: 200KB以下
- CSS: 50KB以下
- 画像: 500KB以下
- 総リソースサイズ: 1MB以下
- LCP: 2.5秒以内

実装:
- Lighthouse CIで自動チェック
- Webpackのperformanceオプション
- Bundle Analyzerで監視

メリット:
- パフォーマンスの劣化を早期に発見
- チーム全体でパフォーマンスを意識
- CI/CDパイプラインで自動チェック

最適化の優先順位

最適化の優先順位：

1. 測定: まず現状を測定
2. 画像最適化: 最も効果が大きい
3. キャッシング: 繰り返し訪問の改善
4. コード分割: 初期読み込みの改善
5. リソース優先順位: 重要なリソースの優先読み込み
6. サーバー最適化: レスポンス時間の短縮
7. データベース最適化: APIの高速化

継続的な改善

継続的な改善：

- 定期的な監査: 月1回のパフォーマンス監査
- モニタリング: リアルタイムでのモニタリング
- バジェット: パフォーマンスバジェットの設定
- チーム教育: パフォーマンス意識の向上
- ツールの活用: 自動化ツールの活用

初期読み込み

初期読み込みのチェックリスト：

- [ ] 画像を最適化（WebP、AVIFの使用）
- [ ] 画像の遅延読み込みを実装
- [ ] レスポンシブ画像を実装
- [ ] JavaScriptのコード分割を実装
- [ ] CSSのコード分割を実装
- [ ] クリティカルCSSをインライン化
- [ ] フォントの最適化（font-display: swap）
- [ ] リソースヒント（preload、preconnect）を使用
- [ ] バンドルサイズを監視
- [ ] Tree Shakingを有効化

キャッシング

キャッシングのチェックリスト：

- [ ] HTTPキャッシュヘッダーを設定
- [ ] 静的リソースに長いキャッシュ期間を設定
- [ ] ETagとLast-Modifiedを設定
- [ ] Service Workerを実装（オプション）
- [ ] CDNを活用
- [ ] データベースクエリのキャッシング
- [ ] アプリケーションレベルのキャッシング

サーバーサイド

サーバーサイドのチェックリスト：

- [ ] Gzip/Brotli圧縮を有効化
- [ ] HTTP/2またはHTTP/3を使用
- [ ] CDNを設定
- [ ] データベースクエリを最適化
- [ ] インデックスを適切に設定
- [ ] データベース接続プールを設定
- [ ] サーバーのレスポンス時間を監視

モニタリング

モニタリングのチェックリスト：

- [ ] Core Web Vitalsを測定
- [ ] Lighthouseで定期的に監査
- [ ] リアルユーザーモニタリング（RUM）を設定
- [ ] パフォーマンスバジェットを設定
- [ ] エラー率を監視
- [ ] バンドルサイズを監視
- [ ] パフォーマンスレポートを定期的に確認