「サイトが遅い」と悩んでいませんか？
現役WEBエンジニアとして、パフォーマンス最適化に取り組んでいます。
この記事では、Webパフォーマンス最適化の基本を解説します。
目次
Core Web Vitals
指標
| 指標 | 内容 | 目標値 |
|---|---|---|
| LCP | 最大コンテンツ表示 | 2.5秒以下 |
| INP | 次の入力までの遅延 | 200ms以下 |
| CLS | レイアウトシフト | 0.1以下 |
計測ツール
- Lighthouse
- PageSpeed Insights
- Chrome DevTools
画像最適化
フォーマット選択
| フォーマット | 用途 |
|---|---|
| WebP | 写真、一般画像 |
| AVIF | さらに高圧縮 |
| SVG | アイコン、ロゴ |
実装例
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="画像" loading="lazy">
</picture>
やるべきこと
- 適切なサイズにリサイズ
- 遅延読み込み（lazy loading）
- CDN活用
JavaScript最適化
バンドルサイズ削減
// 動的インポート
const module = await import('./heavy-module.js');
// Tree shaking対応
import { specificFunction } from 'library';
やるべきこと
- コード分割
- 不要なライブラリ削除
- ミニファイ・圧縮
CSS最適化
Critical CSS
<!-- インラインで重要なCSS -->
<style>
/* ファーストビューに必要なスタイル */
</style>
<!-- 残りは非同期読み込み -->
<link rel="preload" href="styles.css" as="style">
やるべきこと
- 不要なCSSの削除
- Critical CSSのインライン化
- CSS-in-JSの検討
キャッシュ戦略
HTTPヘッダー
Cache-Control: max-age=31536000, immutable
ETag: "abc123"
種類
| 種類 | 説明 |
|---|---|
| ブラウザキャッシュ | クライアント側 |
| CDNキャッシュ | エッジサーバー |
| アプリキャッシュ | Redis等 |
サーバー最適化
やるべきこと
- Gzip/Brotli圧縮
- HTTP/2対応
- CDN活用
- データベースクエリ最適化
圧縮設定例（nginx）
gzip on;
gzip_types text/css application/javascript;
brotli on;
フロントエンド最適化
React/Next.js
// コンポーネントの遅延読み込み
const HeavyComponent = dynamic(() => import('./Heavy'), {
loading: () => <Loading />
});
// メモ化
const MemoizedComponent = React.memo(Component);
まとめ
パフォーマンス最適化のポイント:
- Core Web Vitalsを計測
- 画像・JS・CSSを最適化
- キャッシュを活用
- 継続的に計測・改善
