AsamiWorksAI検索最適化サイト制作
料金シミュレーション無料相談
技術解説

Webサイトの表示速度を改善する10の方法｜Core Web Vitals対応

Webサイトの表示速度を劇的に改善する10の実践的手法を解説。画像最適化、キャッシュ設定、CSS/JS圧縮、CDN導入など、Core Web Vitals対応のテクニックを紹介します。

#表示速度#Core Web Vitals#PageSpeed Insights#画像最適化#CDN#キャッシュ

なぜWebサイトの表示速度が重要なのか

Webサイトの表示速度は、ユーザー体験、SEO、コンバージョン率に直接影響します。

表示速度が遅いと起こること

  • 離脱率が上がる - ページの読み込みに3秒以上かかると、53%のユーザーが離脱します（Googleのデータ）
  • 検索順位が下がる - Googleは表示速度をランキング要因としています
  • 売上が減少する - Amazonの調査では、1秒遅くなるごとに売上が1%減少
  • ブランドイメージの低下 - 「遅いサイト」という印象が残ります

Core Web Vitalsとは

Googleが定めたWebサイトのユーザー体験を測る3つの指標です。

  • LCP（Largest Contentful Paint） - 最大コンテンツの表示速度（2.5秒以内が目標）
  • FID（First Input Delay） - 最初の入力までの遅延（100ミリ秒以内が目標）
  • CLS（Cumulative Layout Shift） - 視覚的な安定性（0.1以下が目標）

表示速度を改善する10の方法

1. 画像の最適化

画像はWebサイトの容量の大部分を占めます。適切に最適化することで、大幅な高速化が可能です。

画像最適化の5つのテクニック

  • 次世代フォーマット（WebP）を使用 - JPEGより30%程度軽量化できます
  • 適切なサイズにリサイズ - 表示サイズに合わせて縮小します
  • 圧縮ツールを活用 - TinyPNG、ImageOptim、Squooshなど
  • 遅延読み込み（Lazy Loading） - 画面外の画像は必要になるまで読み込まない
  • レスポンシブ画像 - デバイスに応じて最適なサイズを配信（srcset属性）

画像最適化の実装例（HTML）

<!-- WebP + Lazy Loading -->
<img src="image.webp"
     alt="説明文"
     loading="lazy"
     width="800"
     height="600">

<!-- レスポンシブ画像 -->
<img srcset="image-small.webp 400w,
             image-medium.webp 800w,
             image-large.webp 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1200px) 800px,
            1200px"
     src="image-medium.webp"
     alt="説明文">

2. CSS・JavaScriptの最適化

CSSとJavaScriptの最適化も、表示速度に大きく影響します。

CSS最適化のポイント

  • 不要なCSSを削除 - 使っていないスタイルを削除
  • CSSを圧縮（Minify） - 空白、改行、コメントを削除
  • クリティカルCSSをインライン化 - 初回表示に必要なCSSをHTMLに埋め込む
  • CSSを分割 - ページごとに必要なCSSのみ読み込む

JavaScript最適化のポイント

  • JavaScriptを圧縮（Minify） - UglifyJS、Terserなどのツールを使用
  • 非同期読み込み（async/defer） - レンダリングをブロックしない
  • 不要なライブラリを削除 - 使っていないjQueryなどを削除
  • Tree Shaking - Webpack等で未使用コードを削除

JavaScript非同期読み込みの例

<!-- defer: HTML解析後に実行 -->
<script src="script.js" defer></script>

<!-- async: ダウンロード完了次第実行 -->
<script src="analytics.js" async></script>

3. ブラウザキャッシュの活用

ブラウザキャッシュを設定すると、リピーターの表示速度が大幅に向上します。

.htaccessでのキャッシュ設定例（Apache）

<IfModule mod_expires.c>
  ExpiresActive On

  # 画像は1年間キャッシュ
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"

  # CSSとJavaScriptは1ヶ月
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # HTMLは1時間
  ExpiresByType text/html "access plus 1 hour"
</IfModule>

4. CDN（コンテンツデリバリーネットワーク）の導入

CDNを使用すると、世界中のサーバーからコンテンツを配信でき、表示速度が向上します。

主要なCDNサービス

サービス名 特徴 料金
Cloudflare 無料プランあり、DDoS対策も 無料〜
Amazon CloudFront AWSとの連携が強力 従量課金
Fastly リアルタイム更新に強い 従量課金
Akamai 大企業向け、高信頼性 高額

5. サーバーレスポンス時間の改善（TTFB）

TTFB（Time To First Byte）は、サーバーが最初のバイトを返すまでの時間です。

TTFBを改善する方法

  • 高速なホスティングを選ぶ - 共用サーバーよりVPS、専用サーバーが高速
  • データベースを最適化 - インデックスの設定、不要なデータの削除
  • サーバーサイドキャッシュ - Redis、Memcachedなどを導入
  • HTTP/2を有効化 - 複数ファイルを並列で読み込める
  • Gzip圧縮を有効化 - テキストファイルを圧縮して転送

6. WordPressの高速化

WordPressサイト特有の高速化テクニックです。

WordPress高速化プラグイン

  • WP Rocket - 総合的なキャッシュプラグイン（有料）
  • W3 Total Cache - 詳細設定が可能な無料プラグイン
  • Autoptimize - CSS/JSの最適化
  • EWWW Image Optimizer - 画像の自動最適化
  • WP-Optimize - データベースのクリーンアップ

WordPressで避けるべきこと

  • プラグインを入れすぎない（20個以下が目安）
  • 重いテーマを使わない
  • リビジョンを溜めすぎない
  • 外部スクリプトを多用しない

7. フォントの最適化

Webフォントは美しいデザインを実現しますが、読み込みに時間がかかります。

フォント最適化のテクニック

  • WOFF2フォーマットを使用 - 最も軽量なフォント形式
  • サブセット化 - 必要な文字だけを含めたフォントを作成
  • font-displayを設定 - フォント読み込み中の表示を制御
  • システムフォントを優先 - デバイス標準のフォントを使う
/* フォントの最適化例 */
@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* フォント読み込み中も代替フォントで表示 */
}

8. リダイレクトの削減

不要なリダイレクト（転送）は、表示速度を遅くします。

チェックポイント

  • www有り/無しの統一
  • HTTPからHTTPSへのリダイレクト
  • 古いURLから新しいURLへのリダイレクト
  • リダイレクトチェーンの解消（A→B→Cではなく、A→C）

9. DNS解決時間の短縮

DNSルックアップの時間を短縮することで、初回アクセスが高速化します。

DNS最適化の方法

  • 高速なDNSサービスを使う - Cloudflare DNS、Google Public DNSなど
  • DNSプリフェッチ - 外部ドメインのDNS解決を事前に行う
<!-- DNSプリフェッチの例 -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">

10. 表示速度の計測と改善サイクル

定期的に計測し、改善を繰り返すことが重要です。

表示速度測定ツール

ツール名 特徴
PageSpeed Insights Googleの公式ツール、Core Web Vitalsを測定
GTmetrix 詳細なレポート、動画での読み込み過程確認
WebPageTest 詳細な分析、世界各地からテスト可能
Chrome DevTools Lighthouse監査、ネットワーク分析

表示速度改善の優先順位

すべてを一度に実施するのは大変です。優先順位をつけて取り組みましょう。

優先度：高（すぐに実施）

  1. 画像の最適化（WebP化、圧縮）
  2. ブラウザキャッシュの設定
  3. Gzip圧縮の有効化
  4. 不要なプラグイン・スクリプトの削除

優先度：中（余裕があれば実施）

  1. CSS・JavaScriptの最適化
  2. 遅延読み込み（Lazy Loading）
  3. CDNの導入
  4. フォントの最適化

優先度：低（上級者向け）

  1. サーバー環境の変更（VPS、専用サーバー）
  2. HTTP/2、HTTP/3への対応
  3. クリティカルCSSのインライン化
  4. Service Workerの導入（PWA）

まとめ：表示速度改善は継続的な取り組み

Webサイトの表示速度改善は、一度やれば終わりではありません。新しいコンテンツを追加するたびに、速度が低下していないかチェックしましょう。

表示速度改善チェックリスト

  • ✅ PageSpeed Insightsで90点以上を目指す
  • ✅ 画像をWebP形式に変換した
  • ✅ 遅延読み込み（Lazy Loading）を実装した
  • ✅ ブラウザキャッシュを設定した
  • ✅ CSS・JavaScriptを圧縮した
  • ✅ 不要なプラグインを削除した
  • ✅ Gzip圧縮を有効化した
  • ✅ CDNを導入した（任意）

AsamiWorksでは、表示速度の最適化を含めたホームページ制作を提供しています。「速くて快適なサイト」で、ユーザー満足度と検索順位を向上させましょう。

執筆者

AsamiWorks

← ブログ一覧に戻るお問い合わせ