サイト表示速度の改善方法 — 初心者向けガイド
サイト表示速度の改善方法 — 初心者向けガイド
> このページのURL: https://lite-word.com/manual/site-speed/
> こんな質問に答えます:
> - サイトの表示が遅いのを何とかしたい
> - ページの読み込みが重い原因は何？
> - サイトの速度を測る方法を知りたい
> - 画像が重くてサイトが遅くなってる気がする
なぜ表示速度が重要なのか
サイトの表示速度は、ユーザー体験・SEO・売上のすべてに直結する。「サイトが重い」と感じたら、放置せずに改善すべき最優先の課題のひとつ。
3つの理由
| 理由 | 影響 |
|---|---|
| ユーザー体験 | 表示に3秒以上かかると、訪問者の53%がページを離れるというデータがある（Google調査） |
| SEO（検索順位） | Googleは「Core Web Vitals」という表示速度の指標を検索順位の評価基準に組み込んでいる |
| コンバージョン率 | 表示速度が1秒遅くなるごとに、コンバージョン率（お問い合わせ・購入などの成約率）が約7%低下するとされている |
つまり: サイトが遅いだけで、検索順位が下がり、訪問者が逃げ、売上が減る。
表示速度の測定方法
改善の前に、まず現状を数字で把握する。以下の無料ツールで簡単に測定できる。
おすすめ測定ツール
| ツール | 特徴 | URL |
|---|---|---|
| PageSpeed Insights | Google公式。モバイル・PCの両方をスコアで評価。改善提案つき | https://pagespeed.web.dev/ |
| GTmetrix | より詳細な分析が可能。読み込み時間の内訳が見やすい | https://gtmetrix.com/ |
見るべき3つの指標（Core Web Vitals）
Googleが特に重視している3つの指標を、かみ砕いて説明する。
| 指標 | 正式名称 | ひと言でいうと | 良好の目安 |
|---|---|---|---|
| LCP | Largest Contentful Paint | ページのメインコンテンツ（一番大きい画像やテキスト）が表示されるまでの時間 | 2.5秒以内 |
| INP | Interaction to Next Paint（旧FID） | ボタンをクリックしてから画面が反応するまでの時間 | 200ミリ秒以内 |
| CLS | Cumulative Layout Shift | 読み込み中にレイアウトがガタガタとずれる度合い | 0.1以下 |
まずはPageSpeed Insightsで自分のサイトのURLを入力して、スコアを確認してみること。 90点以上なら優秀、50点以下なら早急な改善が必要。
画像の最適化（最も効果が大きい）
表示速度が遅い原因の大半は「画像が重すぎる」こと。画像の最適化だけでスコアが大幅に改善するケースが多い。
やるべき4つのこと
1. 適切なサイズにリサイズする
- 画像の横幅は1600px以下にする（ほとんどのサイトではこれで十分）
- スマホで使う画像は800px以下でもOK
- 一眼レフやスマホで撮った写真をそのままアップロードすると、4000px以上あることが多い。必ずリサイズしてからアップする
2. WebP形式を使う
- WebP（ウェッピー）はGoogleが開発した画像フォーマット。JPEGやPNGより30〜50%軽い
- 現在のブラウザはほぼすべてWebPに対応している
- WordPressは5.8以降、WebPのアップロードに標準対応
3. 遅延読み込み（Lazy Load）を有効にする
- ページを開いたときに、画面に見えていない画像は後から読み込む仕組み
- WordPress 5.5以降は標準で画像のLazy Loadが有効になっている
- 「最初に見える領域（ファーストビュー）」の画像にはLazy Loadをかけない方がLCPスコアは良くなる
4. 画像を圧縮する
アップロード前に圧縮するだけで、見た目の品質をほぼ変えずにファイルサイズを50〜80%削減できる。
| ツール | 特徴 |
|---|---|
| TinyPNG（https://tinypng.com/） | ブラウザ上で無料で使える。PNG・JPEG・WebP対応 |
| Squoosh（https://squoosh.app/） | Google製。圧縮率やフォーマット変換を細かく調整できる |
| EWWW Image Optimizer | WordPressプラグイン。アップロード時に自動で圧縮してくれる |
プラグインの見直し
プラグインが多すぎたり、重いプラグインを使っていると、サイト全体が遅くなる。
チェックポイント
- 使っていないプラグインは「削除」する — 無効化だけでは不十分。ファイルが残っているとセキュリティリスクにもなる
- 同じ機能のプラグインが重複していないか確認する — 例: SEOプラグインを2つ入れている、キャッシュプラグインを2つ入れている
- 重いプラグインを見分ける — 管理画面が遅い場合は、プラグインを1つずつ無効化して原因を特定する
重くなりがちなプラグインの例
| 種類 | 例 | 対策 |
|---|---|---|
| ページビルダー系 | Elementor, Divi, WPBakery | テーマの標準機能で代替できるなら不要 |
| ソーシャルシェア系 | AddToAny, ShareThis | 大量のスクリプトを読み込むものがある。軽量な代替を検討 |
| スライダー系 | Revolution Slider, Slider Revolution | 画像を大量に読み込むため重い。本当に必要か検討 |
| 統計・アクセス解析系 | サーバー側で処理するタイプ | Google Analyticsなど外部サービスに任せる方が軽い |
キャッシュの活用
ブラウザキャッシュとは
一度読み込んだ画像やCSS・JSファイルを、訪問者のブラウザ（PCやスマホ）に一時的に保存しておく仕組み。2回目以降のアクセスが高速になる。
サーバーキャッシュとは
サーバー側でページの生成結果を保存しておき、アクセスのたびにデータベースへ問い合わせなくても済むようにする仕組み。特にアクセスが多いサイトで効果が大きい。
キャッシュ系プラグインの基本
| プラグイン | 特徴 |
|---|---|
| WP Super Cache | シンプルで初心者向け。設定が少なく導入しやすい |
| W3 Total Cache | 高機能だが設定が複雑。上級者向け |
| LiteSpeed Cache | LiteSpeedサーバーを使っている場合に最も効果的 |
注意: キャッシュプラグインは1つだけ使うこと。複数入れると競合して逆に遅くなったり、表示が崩れる原因になる。
サーバーの選び方
画像やプラグインを最適化しても速度が改善しない場合、サーバー自体が原因の可能性がある。
共有サーバーの限界
格安の共有サーバー（月500円以下など）は、1台のサーバーを大勢で共有しているため、他のユーザーのアクセスが集中すると自分のサイトも遅くなることがある。
国内主要サーバーの速度傾向（一般論）
| サーバー | 速度の評判 | 備考 |
|---|---|---|
| エックスサーバー | 高速 | WordPress利用者に人気。安定性も高い |
| ConoHa WING | 高速 | 国内最速クラスを謳っている。管理画面も使いやすい |
| ロリポップ（ハイスピード以上） | 普通〜高速 | 下位プランは遅め。ハイスピード以上で改善 |
| さくらのレンタルサーバー | 普通 | 老舗で安定。速度は他社に比べると控えめ |
| mixhost | 高速 | LiteSpeedサーバー採用 |
ポイント: 月1,000円前後のプランであれば、上記のいずれも大きな問題はない。格安プランから乗り換えるだけで表示速度が劇的に改善するケースがある。
その他の改善策
不要なCSS/JSの削減
- 使っていないプラグインのCSS・JSファイルが全ページで読み込まれていることがある
- 「Asset CleanUp」や「Autoptimize」などのプラグインで、ページごとに不要なファイルの読み込みを止められる
フォントの最適化
- Webフォント（Google Fonts等）を多数使うと読み込みが遅くなる
- 使うフォントは2種類以下に抑える
- 日本語Webフォントは特にファイルサイズが大きい（1書体で数MB）ため、本当に必要か検討する
外部スクリプトの影響
以下のような外部サービスの埋め込みは、それぞれスクリプトを読み込むため表示速度に影響する。
- Google広告（AdSense）
- SNS埋め込み（Twitter/X、Instagram、YouTube）
- チャットウィジェット
- アクセス解析ツール
対策: 本当に必要なものだけに絞る。SNS埋め込みは、スクリーンショット画像＋リンクで代替できる場合もある。
やりがちな間違い
初心者がやってしまいがちな、逆効果になるパターンをまとめた。
| やりがちなこと | なぜダメなのか | 正しい対応 |
|---|---|---|
| キャッシュプラグインを2つ以上入れる | 競合して表示崩れや逆に遅くなる原因に | キャッシュプラグインは1つだけ |
| 画像を圧縮せずにアップロード | 1枚5MBの画像を10枚載せたら50MB。ページが激重に | アップロード前に必ず圧縮する |
| 「高速化プラグイン」を片っ端から入れる | プラグイン自体が負荷になる。設定ミスで表示崩れも | 1つずつ効果を確認しながら導入 |
| 画像をリサイズせずにCSSで小さく表示 | 元画像はフルサイズで読み込まれるため意味がない | アップロード前にリサイズする |
| モバイル表示を確認しない | モバイルの方がネットワークが遅く、影響が大きい | PageSpeed Insightsのモバイルスコアを必ず確認 |
改善の優先順位まとめ
何から手をつければいいか迷ったら、この順番で取り組む。
- 画像の最適化（圧縮・リサイズ・WebP化） — 最も効果が大きい
- 不要なプラグインの削除 — すぐにできて効果が出やすい
- キャッシュプラグインの導入（1つだけ） — 設定が簡単なものから
- 外部スクリプトの整理 — 不要な埋め込みを削除
- サーバーの見直し — 上記をすべて試しても改善しない場合
関連ページ
- SEO対策とは？ — 表示速度はSEOの重要な評価基準のひとつ
最終更新: 2026-03-17