「うちのホームページ、なんか表示が遅い気がする…」
もしそう感じているなら、今すぐ対策が必要です。
正直に言うと、表示速度の遅さは目に見えない売上損失を生み出しています。Googleの調査によると、ページの表示に3秒以上かかると53%のユーザーがサイトを離脱するというデータがあります。つまり、半分以上のお客様が、サイトの内容を見る前に帰ってしまうのです。
Web制作エンジニアとして、WordPress(Swell)やNext.jsで多くのサイトを制作してきました。その中で、表示速度の改善だけで問い合わせ数が増えたケースを何度も経験しています。
この記事では、表示速度が遅くなる原因と具体的な改善方法を、データを交えてわかりやすく解説します。
表示速度が売上に与える影響 ── データで見る
遅いサイトはお客様を逃している
表示速度と売上の関係を、データで確認しましょう。
| データソース | 調査結果 |
|---|---|
| Google(2018年) | 表示に3秒以上かかると、53%のモバイルユーザーが離脱 |
| Amazon | 表示が0.1秒遅くなると、売上が1%減少 |
| Walmart | 表示が1秒速くなると、コンバージョン率が2%向上 |
| Akamai | 表示が2秒遅くなると、直帰率が103%増加 |
これらは大企業のデータですが、中小企業のサイトでも同じ傾向が見られます。制作者の本音として、「表示速度が遅い」というだけで、何割かのお客様を確実に取りこぼしているのです。
Google検索の順位にも影響する
Googleは2021年から、ページの表示速度をSEO(検索順位)の評価要素に正式採用しています。これは「Core Web Vitals(コアウェブバイタルズ)」と呼ばれる指標で、以下の3つで構成されています。
| 指標 | 意味 | 良好な基準 |
|---|---|---|
| LCP(Largest Contentful Paint) | 最大コンテンツが表示されるまでの時間 | 2.5秒以内 |
| INP(Interaction to Next Paint) | ユーザーの操作に対する応答速度 | 200ms以内 |
| CLS(Cumulative Layout Shift) | ページの視覚的な安定性(ガタつき) | 0.1以下 |
つまり、表示速度が遅いとSEOでも不利になり、検索からのアクセスも減るという二重の損失が発生します。
表示速度を測定する方法 ── PageSpeed Insights の使い方
PageSpeed Insights とは
表示速度を改善するには、まず現状を正確に測定する必要があります。
Googleが無料で提供している「PageSpeed Insights(ページスピードインサイツ)」を使いましょう。URLを入力するだけで、表示速度のスコアと改善提案が表示されます。
URL: https://pagespeed.web.dev/
使い方
- 上記URLにアクセス
- 自社のホームページのURLを入力
- 「分析」ボタンをクリック
- 数十秒後に結果が表示される
スコアの見方
スコアは0〜100点で表示されます。
| スコア | 評価 | 目安 |
|---|---|---|
| 90〜100 | 良好(緑) | 問題なし |
| 50〜89 | 改善が必要(オレンジ) | 対策推奨 |
| 0〜49 | 悪い(赤) | 早急な対策が必要 |
正直に言うと、中小企業のWordPressサイトで90点以上を取るのは簡単ではありません。まずはモバイルで50点以上、PCで70点以上を目標にしましょう。
よくある質問:「モバイルのスコアが低すぎるんですが…」
PageSpeed Insightsではモバイルとデスクトップの2つのスコアが出ますが、モバイルのスコアの方が低くなるのが普通です。
これは、モバイルのテストが低速な回線(4G相当)を想定しているためです。モバイルで40〜60点台であっても、体感で問題なく表示されている場合は、過度に心配する必要はありません。
原因①:画像の最適化不足
最も多い原因
表示速度が遅い原因のダントツ1位が、画像の最適化不足です。
デジカメやスマートフォンで撮影した写真をそのままアップロードすると、1枚あたり3〜10MB(メガバイト)にもなります。ホームページに使う画像は100〜300KB(キロバイト)程度が適正です。
つまり、最適化していない画像は適正サイズの10〜100倍の重さになっている可能性があります。
改善方法
| 対策 | 説明 | 効果 |
|---|---|---|
| 画像のリサイズ | 横幅1920px以下にリサイズ(通常は1200px程度で十分) | 大 |
| WebP形式への変換 | 従来のJPEG/PNGより30〜50%軽い次世代フォーマット | 大 |
| 圧縮ツールの使用 | TinyPNG、Squooshなどで画質を維持しつつファイルサイズを削減 | 中〜大 |
| 遅延読み込み(Lazy Load) | 画面に表示される時点で画像を読み込む仕組み | 中 |
WordPressでの具体的な対応
WordPressの場合、以下のプラグインで画像の最適化を自動化できます。
- EWWW Image Optimizer:アップロード時に自動で画像を圧縮・WebP変換
- ShortPixel:高品質な圧縮に定評あり(月50枚まで無料)
- Imagify:使いやすいインターフェースが特徴
SWELLテーマを使っている場合は、遅延読み込み機能が標準で搭載されているため、プラグインなしで対応可能です。
手元の画像を数枚だけ変換したい場合は、当社が公開している無料のWebP変換ツール(First CH Tools)が便利です。ブラウザ上で処理が完結するため、画像を外部のサーバーにアップロードすることなく変換できます。
Web制作・システム開発は
First CHにお任せください
「こんなWebサイトが欲しい」「このシステムは実現できる?」——
現役エンジニアが直接お話を伺い、最適な進め方をご提案します。
「まだ構想段階」「費用感だけ知りたい」というご相談も歓迎です。
原因②:プラグインの入れすぎ
プラグインは「薬」と同じ
WordPressの魅力は、プラグイン(拡張機能)を追加することで様々な機能を実現できることです。しかし、プラグインを入れすぎると、サイトが重くなります。
制作者の本音として、プラグインは「薬」と同じです。必要な薬は効果的ですが、飲みすぎると副作用が出ます。
プラグインが速度に影響する理由
- プラグインごとに独自のCSS・JavaScriptファイルを読み込むため、ページの読み込み量が増える
- データベースへの問い合わせ(クエリ)が増える
- プラグイン同士の競合が発生する場合がある
改善方法
ステップ1:不要なプラグインを削除する
「有効化」しているだけで使っていないプラグイン、試しに入れたまま放置しているプラグインはありませんか?使っていないプラグインは「無効化」ではなく「削除」しましょう。無効化しただけではファイルが残り、セキュリティリスクにもなります。
ステップ2:機能が重複しているプラグインを統合する
例えば、SEO系のプラグインが2つ入っている、キャッシュ系のプラグインが2つ入っている、といった重複は意外と多いです。
ステップ3:プラグインの目安数を知る
| プラグイン数 | 評価 |
|---|---|
| 10個以下 | 良好 |
| 11〜20個 | 許容範囲。内容次第 |
| 21個以上 | 多すぎる可能性大。見直し推奨 |
ただし、プラグインの数だけで判断するのは正確ではありません。軽量なプラグインなら20個入っていても問題ないこともあれば、重いプラグインが1つあるだけで速度が大幅に低下することもあります。
原因③:サーバーの性能不足
安いサーバーには理由がある
ホームページのデータを保管する「サーバー」の性能も、表示速度に大きく影響します。
正直に言うと、月額数百円の格安サーバーでは、ビジネスサイトに必要な速度を確保できないケースが多いです。
サーバーが遅いときのサイン
- 画像も少なく、プラグインも整理しているのに遅い
- アクセスが増える時間帯(昼休み、夕方)に特に遅くなる
- 管理画面の操作もモタつく
- エラー(503エラーなど)が時々出る
おすすめのレンタルサーバー
中小企業のWordPressサイトにおすすめのサーバーを、制作者の視点でまとめました。
| サーバー | 月額(税込) | 特徴 |
|---|---|---|
| 国内シェアNo.1の高速サーバー | 990円〜 | 安定性・速度・サポートのバランスが最も良い。迷ったらこれ |
| 国内最速クラスの高速サーバー | 1,452円〜 | 国内最速クラス。管理画面が使いやすい |
| コスパ重視のレンタルサーバー | 550円〜 | コスパ重視。中小規模サイトなら十分 |
| 老舗レンタルサーバー | 500円〜 | 老舗の安心感。やや管理画面が古い |
制作者の本音として、国内シェア上位の高速レンタルサーバーを選んでおけば、速度面で後悔することはほぼありません。
サーバー移行は意外と効果が大きい
「サーバーの変更って大変そう…」と思われるかもしれませんが、サーバーを変えるだけで表示速度が2〜3倍速くなったというケースは珍しくありません。
サーバー移行は専門的な作業が必要なので、制作者やエンジニアに依頼することをおすすめします。
原因④:キャッシュ(一時保存)の未設定
キャッシュとは
キャッシュとは、一度読み込んだデータを一時的に保存して、次回のアクセス時に再利用する仕組みです。
わかりやすく例えると、毎回同じ料理を一から作るのではなく、作り置きしておいて温めるだけで提供するようなものです。キャッシュを使うことで、2回目以降の表示が格段に速くなります。
キャッシュの種類
| 種類 | 説明 | 設定方法 |
|---|---|---|
| ブラウザキャッシュ | ユーザーのブラウザに画像やCSSを保存 | .htaccessまたはプラグインで設定 |
| サーバーキャッシュ | サーバー側でページのHTMLを保存 | サーバーの設定またはプラグイン |
| ページキャッシュ | WordPressが動的に生成するページを静的HTMLとして保存 | プラグインで設定 |
WordPressでのキャッシュ設定
WordPressでキャッシュを設定するには、プラグインを使うのが最も簡単です。
- WP Super Cache:設定がシンプルで初心者向け
- W3 Total Cache:詳細な設定が可能。中〜上級者向け
- WP Fastest Cache:日本語対応で使いやすい
SWELLテーマの場合は、テーマ自体に高速化機能が内蔵されているため、キャッシュプラグインなしでもある程度の速度が確保できます。ただし、キャッシュプラグインを併用するとさらに高速化できます。
キャッシュ設定の注意点
キャッシュ設定には注意点もあります。
- サイトを更新してもキャッシュが古いままで、変更が反映されないことがある
- キャッシュプラグインの設定を間違えるとサイトが表示されなくなることがある
- 複数のキャッシュプラグインを同時に使わない(競合の原因)
キャッシュの設定に不安がある場合は、制作者に依頼するのが安全です。
今すぐできる表示速度改善チェックリスト
ここまでの内容を、すぐに実践できるチェックリストにまとめました。
効果が大きい順
- PageSpeed Insightsで現在のスコアを測定した
- アップロード済みの画像が適切なサイズ(300KB以下)になっている
- 画像がWebP形式に変換されている
- 使っていないプラグインを削除した
- プラグインの数が20個以下になっている
- キャッシュプラグインを導入し、設定を有効化した
- レンタルサーバーのプランが適切か確認した
- WordPressとプラグインが最新バージョンに更新されている
- SWELLテーマの高速化設定を有効にした(SWELLユーザーの場合)
- 改善後にPageSpeed Insightsで再度スコアを測定した
まとめ:表示速度の改善は「最もコスパの良い投資」
表示速度の改善は、デザインのリニューアルや広告出稿と比べて、圧倒的に低コストで効果が出やすい施策です。
今回ご紹介した4つの原因と改善方法をまとめます。
| 原因 | 改善方法 | 難易度 | 効果 |
|---|---|---|---|
| 画像の最適化不足 | リサイズ・WebP変換・圧縮 | 低 | 大 |
| プラグインの入れすぎ | 不要なプラグインの削除・統合 | 低 | 中〜大 |
| サーバーの性能不足 | 高性能サーバーへの移行 | 中(要専門知識) | 大 |
| キャッシュの未設定 | キャッシュプラグインの導入 | 低〜中 | 中〜大 |
まずは画像の最適化から始めてみてください。これだけでスコアが10〜30点改善するケースも珍しくありません。
「自分のサイトの表示速度を改善したい」「PageSpeed Insightsの結果の見方がわからない」という方は、お気軽にご相談ください。現状のサイトを診断し、優先度の高い改善策をご提案いたします。
Web制作・システム開発は
First CHにお任せください
「こんなWebサイトが欲しい」「このシステムは実現できる?」——
現役エンジニアが直接お話を伺い、最適な進め方をご提案します。
「まだ構想段階」「費用感だけ知りたい」というご相談も歓迎です。
