Webサイトのパフォーマンスは、ユーザー体験とSEOの両方に大きな影響を与えます。今回は実践的な最適化テクニックを紹介します。
## Core Web Vitalsとは
- **LCP (Largest Contentful Paint)**: 最大コンテンツの描画時間
- **FID (First Input Delay)**: 初回入力遅延
- **CLS (Cumulative Layout Shift)**: 累積レイアウトシフト
## 画像の最適化
### 1. 次世代フォーマットを使用
```html
```
### 2. 遅延読み込み
```html
```
## JavaScriptの最適化
### コード分割
```javascript
// 動的インポート
const module = await import('./heavy-module.js');
```
### バンドルサイズの削減
```javascript
// Tree shaking可能な書き方
export { specificFunction } from './utils';
// ❌ 全体をインポート
import * as utils from './utils';
```
## CSSの最適化
### Critical CSS
```html
```
## キャッシュ戦略
```javascript
// Service Worker
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});
```
## 測定とモニタリング
```javascript
// Web Vitals
import {getCLS, getFID, getLCP} from 'web-vitals';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
```
## まとめ
パフォーマンス最適化は継続的な取り組みです。定期的に測定し、改善を続けることが重要です。
```
## JavaScriptの最適化
### コード分割
```javascript
// 動的インポート
const module = await import('./heavy-module.js');
```
### バンドルサイズの削減
```javascript
// Tree shaking可能な書き方
export { specificFunction } from './utils';
// ❌ 全体をインポート
import * as utils from './utils';
```
## CSSの最適化
### Critical CSS
```html
```
## キャッシュ戦略
```javascript
// Service Worker
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});
```
## 測定とモニタリング
```javascript
// Web Vitals
import {getCLS, getFID, getLCP} from 'web-vitals';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
```
## まとめ
パフォーマンス最適化は継続的な取り組みです。定期的に測定し、改善を続けることが重要です。