Webサイトの表示速度を3秒以内にする技術
表示速度最適化により、弊社のクライアント様ではページ読み込み時間が7.2秒から2.1秒へ70%短縮、直帰率が58%から32%へ改善、CVRが12%向上、SEO順位が平均5.8位上昇しました。
表示速度はUXとCVRに直結する最も重要な要素の1つです。Googleの調査では、ページ読み込み時間が1秒から3秒に増えると、直帰率が32%増加することが判明しています。
施策1: 画像最適化
画像はページ容量の平均60-70%を占める最大のボトルネック。
A. 次世代フォーマット（WebP, AVIF）
❌ 悪い例
画像.jpg (500KB)
✅ 良い例
画像.webp (120KB)
→ 76%削減
B. レスポンシブ画像
<picture>
<source
srcset="/image-1200w.webp 1200w, /image-800w.webp 800w"
type="image/webp"
/>
<img
src="/image-800w.jpg"
alt="説明"
loading="lazy"
/>
</picture>C. 遅延読み込み（Lazy Loading）
<img src="/image.jpg" loading="lazy" alt="説明" />
→ 初回表示に不要な画像は遅延読み込み
施策2: コード分割とTree Shaking
不要なJavaScriptを削減し、初回読み込み量を最小化。
A. 動的インポート（Next.js）
❌ 悪い例
import HeavyChart from './HeavyChart'; // 常に全コードを読み込む（500KB）
✅ 良い例
import dynamic from 'next/dynamic';
const HeavyChart = dynamic(() => import('./HeavyChart'), {
loading: () => <p>Loading...</p>,
ssr: false
});
// 必要な時だけ読み込むB. Tree Shaking（不要コード削除）
// ❌ 悪い例: lodash全体をインポート（70KB） import _ from 'lodash'; // ✅ 良い例: 必要な関数のみインポート（3KB） import debounce from 'lodash/debounce';
施策3: CDN活用
CDN（Content Delivery Network）により、ユーザーから物理的に近いサーバーからコンテンツを配信。
❌ CDNなし
- • 東京から米国サーバー: 250ms
- • 大阪から米国サーバー: 260ms
- • ヨーロッパから米国: 150ms
✅ CDNあり
- • 東京から東京CDN: 12ms
- • 大阪から大阪CDN: 8ms
- • ヨーロッパからロンドンCDN: 15ms
→ 平均90%高速化
推奨CDN:
- • Cloudflare（無料プラン充実）
- • Amazon CloudFront（AWS統合）
- • Vercel（Next.js最適化）
施策4: キャッシュ戦略
適切なキャッシュ設定により、2回目以降の訪問で劇的に高速化。
Cache-Control ヘッダー設定例:
# 静的アセット（画像、CSS、JS）: 1年キャッシュ Cache-Control: public, max-age=31536000, immutable # HTML: キャッシュしない（常に最新） Cache-Control: no-cache, must-revalidate # API レスポンス: 5分キャッシュ Cache-Control: public, max-age=300
まとめ
表示速度はUXとCVRに直結する最も重要な要素の1つです。画像最適化（WebP、レスポンシブ、Lazy Loading）、コード分割、CDN活用、キャッシュ戦略。これら4つの施策を実践することで、ページ読み込み時間を大幅に短縮できます。
弊社のクライアント様では、これらの施策により、ページ読み込み時間が70%短縮され、CVRが12%向上しました。