Webサイトを高速化する方法：本当に効果のある15の対策

遅いページは訪問者を失います。人は読み込みに時間のかかるページから離れていき、速度はコンバージョン、エンゲージメント、Core Web Vitals に影響します。よい知らせは、ほとんどのサイトがいくつかの変更で劇的に速くなるということです。

このリストは、一般的なサイトでの効果の大きさのおおよその順番に並んでいます。何が効いたかわかるよう、変更の前後で必ず測定しましょう。

1. よいホスティングを使う

すべてはサーバーから始まります。Time to First Byte が常に800ミリ秒前後を超えているなら、フロントエンドをいくら調整しても完全には補えません。混み合った格安の共用サーバーはよくあるボトルネックです。最新のハードウェア（NVMe ストレージ）、最新の PHP や Node のバージョン、HTTP/2 または HTTP/3、そして利用者に近いデータセンターを備えた事業者を選びましょう。

2. ページキャッシュを有効にする

訪問のたびにコードとデータベースクエリを実行してページを一から作るのは遅い処理です。ページキャッシュは完成した HTML を保存し、すぐに配信します。

• WordPress：キャッシュプラグイン（WP Rocket、LiteSpeed サーバーなら LiteSpeed Cache、W3 Total Cache、WP Super Cache）か、サーバー側のキャッシュを使う
• cPanel：多くのホスティング会社が LiteSpeed Cache などの組み込みオプションを提供しています
• 独自のアプリケーション：描画済みのページや重いクエリをメモリにキャッシュする

3. サイトの前に CDN を置く

CDN（コンテンツ配信ネットワーク）は、各訪問者に近いサーバーからファイルを配信し、アクセスの急増も吸収します。Cloudflare の無料プランなら手軽に始められます。ほとんどの CDN は HTML ページ全体もキャッシュでき、海外を含む幅広い利用者に対して応答時間を大幅に短縮できます。

4. 画像を最適化する

画像は通常、ページの中で最も重い部分です。

• 表示サイズにリサイズする
• WebP または AVIF に変換する
• 圧縮する（品質75〜85%程度）
• srcset を使ってスマートフォンには小さなファイルを配信する
• width と height を指定してレイアウトのずれを防ぐ

5. ファーストビューより下のメディアを遅延読み込みする

最初の読み込みで見えない画像や iframe には loading="lazy" を付けましょう。ただし、できるだけ早く読み込むべきメインのヒーロー画像には付けないでください。

6. 圧縮を有効にする

テキストファイル（HTML、CSS、JavaScript、SVG、JSON）は、Gzip で70〜80%、Brotli ならさらに少し小さくなります。多くの場合、サーバーの設定を1つ変えるだけです。cPanel では「Optimize Website」を探しましょう。

7. 静的ファイルのブラウザキャッシュ期間を長くする

再訪した人に、ページごとにロゴ、CSS、JavaScript を再ダウンロードさせる必要はありません。バージョン付きの静的ファイル（ファイル名にバージョンやハッシュを含むもの）には Cache-Control: max-age=31536000, immutable を設定し、新しいバージョンには新しいURLが付くようにしましょう。

8. 使っていない JavaScript を削除する

JavaScript は1バイトあたりで最も重いリソースです。ダウンロード、解析、コンパイル、実行が必要で、しかも遅いスマートフォンのプロセッサで処理されることがよくあります。各スクリプトが何をしているか見直しましょう。古い解析タグ、使っていないスライダー、放置された A/B テスト、1つの機能のために全ページで読み込まれるライブラリは、あっという間に積み重なります。

9. 重要でないスクリプトを遅らせる

<head> 内で async や defer のないスクリプトは、ダウンロードと実行が終わるまでページの描画をブロックします。最初の表示に不要なスクリプトには defer を付けるか、body の末尾に移動しましょう。

<script src="/js/app.js" defer></script>

10. サードパーティのスクリプトには厳しくする

チャットウィジェット、SNS の埋め込み、ヒートマップ、マーケティング用ピクセルだらけのタグマネージャー、広告スクリプトは、簡単にページの JavaScript の大部分を占めてしまいます。それぞれがコストに見合っているかを問いましょう。必須でないウィジェットは、ユーザーの操作の後で読み込みます（たとえば、チャットボタンがクリックされたときにチャットウィジェットを読み込む）。

11. Web フォントを最適化する

• フォントファミリーとウェイトの数を減らす
• WOFF2 ファイルを、できれば自分のサーバーから配信する
• 最も重要な1〜2個のフォントファイルをプリロードする
• font-display: swap を使い、テキストがすぐ表示されるようにする
• 本文にはシステムフォントの利用を検討する（日本語フォントは特にサイズが大きいため効果的です）

12. CSS と JavaScript を圧縮（minify）する

minify は空白やコメントを取り除きます。ビルドツール、キャッシュプラグイン、CDN が自動で行ってくれます。

13. 重要な CSS をインライン化する

最初の画面の描画に必要な CSS を <head> に直接書き、残りはブロックせずに読み込むことができます。多くのキャッシュプラグインが、重要な CSS を自動で生成してくれます。

14. リダイレクトを減らす

リダイレクトのたびに、ページの読み込みが始まる前に通信の往復が1回増えます。最終URLに直接リンクし、優先するバージョン（https、www ありかなしか）に1回の転送でたどり着けるようにしましょう。

15. データベースとプラットフォームを身軽に保つ

WordPress では、不要なプラグインを無効化して削除し、投稿のリビジョンや期限切れの transient を整理し、PHP、WordPress、プラグインを最新に保ちましょう。プラグインはどれも、リクエストのたびに実行される可能性のあるコードを追加します。

どこから始めるか

3つだけ取り組むなら、次の3つにしましょう。

1. キャッシュ、CDN、よりよいホスティングでサーバーの応答を改善する
2. 画像を最適化し、最新の形式で配信する
3. 特にサードパーティのスクリプトを中心に、JavaScript を削減して遅らせる

ほとんどのサイトでは、この3つが改善の大部分を占めます。

正しいものを測る

診断と変更のテストにはラボのツール（Lighthouse、PageSpeed Insights）を使い、実際の訪問者の体験を見るにはフィールドデータ（Search Console の「ウェブに関する主な指標」レポート、Chrome UX Report）を使いましょう。テストはモバイルで行います。パフォーマンスの問題のほとんどはモバイルで表れます。

cPanel の共用サーバーでサイトを高速化する

多くのサイトは cPanel の共用サーバーで運用されています。役立つオプションはすでに用意されていることが多いです。

• PHP のバージョン（MultiPHP Manager または Select PHP Version）：サポート中の最新バージョンを使う（新しいバージョンほど大幅に速い）
• Optimize Website：テキストファイルの圧縮を有効にする
• LiteSpeed Cache：ホスティングが LiteSpeed を使っているなら、WordPress 用のキャッシュプラグインが非常に効果的
• Cloudflare：多くの cPanel ホスティングがワンクリックでの Cloudflare 連携を提供している
• リソース使用量：アカウントが CPU やメモリの上限に頻繁に達しているなら、負荷がかかったときにサーバーが遅くなります。上位プランや VPS を検討しましょう

30分でできる速度監査

30分あれば、この手順で大きな問題のほとんどを見つけられます。

1. トップページと最も訪問の多い流入ページで、モバイルの速度テストを実行する
2. Time to First Byte を記録する。800ミリ秒を超えているなら、キャッシュとホスティングから始める
3. LCP の要素を特定する。画像なら、サイズ、形式、遅延読み込みになっていないかを確認する
4. サードパーティのスクリプトの一覧を見て、実際に使っていないものはすべて削除する
5. ページの総容量と、最も大きな5つのファイルを確認する
6. 修正のたびに同じページを再テストする

パフォーマンス予算

サイトが速くなったら、パフォーマンス予算を設定して速さを保ちましょう。チームで超えないと合意する上限で、たとえば次のようなものです。

• 主要なテンプレートでページの総容量を1.5MB未満に
• JavaScript を圧縮後300KB未満に
• 中価格帯のスマートフォンで LCP を2.5秒未満に
• サードパーティのスクリプトは5つまで

新しい機能やマーケティングタグは、公開前に予算と照らし合わせて確認しましょう。速いサイトを保つほうが、遅くなったサイトを再び速くするよりずっと簡単です。

開発者に依頼すべきとき

コードの変更が必要な問題もあります。テーマ内の描画をブロックするスクリプト、非常に大きな JavaScript バンドル、動的コンテンツによるレイアウトのずれ、遅いデータベースクエリなどです。開発者と作業するときは、具体的な指標、影響を受けるテンプレート、速度テストの診断の詳細を共有しましょう。大幅に時間を節約できます。

重要なポイント

• まず、よいホスティング、ページキャッシュ、CDN でサーバーの応答時間を改善しましょう。
• リサイズ、圧縮、最新の形式で最適化した画像は、たいていフロントエンドで最大の効果をもたらします。
• JavaScript を削除して遅らせ、すべてのサードパーティのスクリプトを見直しましょう。
• 圧縮と、静的ファイルの長いブラウザキャッシュを有効にしましょう。
• モバイルでテストし、変更のたびに前後を測定し、パフォーマンス予算を設定しましょう。
• cPanel では、まず PHP のバージョン、圧縮の設定、キャッシュのオプションを確認しましょう。

よくある質問

よいページの読み込み時間とはどのくらいですか？

ほとんどの実際の訪問者に対して、メインコンテンツが2.5秒以内に表示され（良好な Largest Contentful Paint）、タップに200ミリ秒以内に反応することを目指しましょう。

速いサイトのほうが上位に表示されますか？

速度は多くのランキングシグナルの一つで、決め手になることはまれですが、似たページ同士では助けになることがあります。そして、ユーザー体験とコンバージョンは確実に向上します。

サイトを速くするには開発者が必要ですか？

キャッシュ、CDN、画像の最適化、プラグインの削除など、多くの改善はコードなしでできます。JavaScript やテンプレートの変更には開発者が必要になることがあります。

AMP はまだ必要ですか？

いいえ。Google はトップニュースに AMP を必須としなくなっており、よく最適化された通常のページで同じメリットが得られます。