パフォーマンス最適化 - Webアプリケーション高速化

パフォーマンス指標

Core Web Vitals

バックエンド指標

フロントエンド最適化

画像最適化

// Next.js Image最適化
import Image from 'next/image';

<Image
 src="/hero.jpg"
 alt="Hero"
 width={1200}
 height={600}
 priority // LCP画像は優先読み込み
 placeholder="blur"
 blurDataURL="data:image/jpeg;base64,..."
/>

// サイズ別画像（srcset）
<picture>
 <source
 srcSet="/image-small.webp 480w, /image-medium.webp 768w, /image-large.webp 1200w"
 type="image/webp"
 />
 <img src="/image-fallback.jpg" alt="..." loading="lazy" />
</picture>

コード分割

// 動的インポート
import dynamic from 'next/dynamic';

const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
 loading: () => <ChartSkeleton />,
 ssr: false, // クライアントのみ
});

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

<Suspense fallback={<Loading />}>
 <LazyComponent />
</Suspense>

バンドル最適化

// vite.config.js
export default defineConfig({
 build: {
 rollupOptions: {
 output: {
 manualChunks: {
 vendor: ['react', 'react-dom'],
 charts: ['recharts', 'd3'],
 },
 },
 },
 },
});

レンダリング最適化

// メモ化
const ExpensiveComponent = React.memo(({ data }) => {
 return <div>{/* 重い計算 */}</div>;
});

// useMemo
const sortedData = useMemo(() => {
 return data.sort((a, b) => a.price - b.price);
}, [data]);

// 仮想スクロール
import { FixedSizeList } from 'react-window';

<FixedSizeList
 height={400}
 itemCount={10000}
 itemSize={50}
>
 {({ index, style }) => (
 <div style={style}>{items[index].name}</div>
 )}
</FixedSizeList>

バックエンド最適化

N+1問題の解決

// 悪い例（N+1）
const posts = await prisma.post.findMany();
for (const post of posts) {
 post.author = await prisma.user.findUnique({
 where: { id: post.authorId },
 });
}

// 良い例（Eager Loading）
const posts = await prisma.post.findMany({
 include: { author: true },
});

// DataLoaderパターン
const userLoader = new DataLoader(async (ids: string[]) => {
 const users = await prisma.user.findMany({
 where: { id: { in: ids } },
 });
 return ids.map(id => users.find(u => u.id === id));
});

コネクションプール

// Prismaの設定
const prisma = new PrismaClient({
 datasources: {
 db: {
 url: process.env.DATABASE_URL,
 },
 },
});

// 接続プールサイズ（URL内で設定）
// postgresql://user:YOUR_DB_PASSWORD@host/db?connection_limit=10&pool_timeout=20

レスポンス圧縮

import compression from 'compression';

app.use(compression({
 filter: (req, res) => {
 if (req.headers['x-no-compression']) return false;
 return compression.filter(req, res);
 },
 level: 6, // 圧縮レベル（1-9）
}));

データベース最適化

インデックス戦略

-- 複合インデックス（頻繁なクエリパターンに基づく）
CREATE INDEX idx_orders_user_status ON orders(user_id, status);

-- 部分インデックス（特定条件のみ）
CREATE INDEX idx_active_users ON users(email) WHERE status = 'active';

-- カバリングインデックス
CREATE INDEX idx_products_search ON products(name, price, category_id);

-- インデックス使用状況の確認
EXPLAIN ANALYZE SELECT * FROM orders WHERE user_id = 123 AND status = 'pending';

クエリ最適化

-- 必要なカラムのみ取得
SELECT id, name, email FROM users WHERE id = 1;
-- NG: SELECT * FROM users WHERE id = 1;

-- ページネーション（Cursor）
SELECT * FROM posts
WHERE id > :last_id
ORDER BY id
LIMIT 20;

-- バッチ処理
UPDATE products SET price = price * 1.1
WHERE category_id = 5
LIMIT 1000; -- 小分けに実行

キャッシュ戦略

// マルチレイヤーキャッシュ
async function getProduct(id: string): Promise<Product> {
 // L1: メモリキャッシュ
 const memCached = memoryCache.get(`product:${id}`);
 if (memCached) return memCached;

 // L2: Redisキャッシュ
 const redisCached = await redis.get(`product:${id}`);
 if (redisCached) {
 memoryCache.set(`product:${id}`, JSON.parse(redisCached), 60);
 return JSON.parse(redisCached);
 }

 // L3: データベース
 const product = await db.product.findUnique({ where: { id } });

 // キャッシュに保存
 await redis.setex(`product:${id}`, 3600, JSON.stringify(product));
 memoryCache.set(`product:${id}`, product, 60);

 return product;
}

計測とモニタリング

// Server Timing API
app.use((req, res, next) => {
 const start = process.hrtime();

 res.on('finish', () => {
 const [seconds, nanoseconds] = process.hrtime(start);
 const duration = seconds * 1000 + nanoseconds / 1000000;

 res.setHeader('Server-Timing', `total;dur=${duration}`);
 });

 next();
});

関連記事

• キャッシュ戦略 - キャッシュの詳細
• CDN - コンテンツ配信
• データベースインデックス最適化 - DB高速化
• 監視・可観測性 - パフォーマンス監視

まとめ

パフォーマンス最適化は、フロントエンド（画像、コード分割）、バックエンド（N+1解決、圧縮）、データベース（インデックス、クエリ）の3層で取り組みます。計測→分析→改善のサイクルを回しましょう。

参考リソース

• web.dev - Web Vitals
• web.dev - Learn Performance
• MDN - Performance API
• Google - PageSpeed Insights
• Chrome DevTools - Lighthouse

×

PR

×

PR