本記事では、Webサイトの表示速度の改善方法や計測ツール、表示速度の目安などを解説します。
ブログやホームページの表示速度を改善すれば、SEO評価の向上や直帰率改善、リピート率の増加などが期待できます。
その結果、PV数や成約率アップに繋がるでしょう。
表示速度が遅くなる理由はいくつかに分類できるため、現状把握を行い、最適な対策を講じてください。
目次
Webサイトの表示速度を改善する3つのメリット
サイトの表示速度の改善により、以下の3つのメリットを得られます。
- SEO評価が向上
- 直帰率の改善
- リピート率の増加
いずれも事業の収益性やCV率にかかわる重要な要素です。
ここでは、各メリットを詳しく解説します。
SEO評価が向上
サイトの表示速度の改善により、SEOの評価が上がります。
つまり、表示速度を改善すれば、検索結果の上位に自身のサイトが表示されやすくなり、アクセス数の増加が見込めます。
Googleは、SEOの評価基準としてコンテンツのユーザー体験を重要視しており、表示速度はユーザー体験を測る要素の一つとされています。
表示速度に関する具体的な指標は、以下の3つです。
| Largest Contentful Paint （LCP） | アクセスしてから最も大きなデータ（画像や動画、テキストブロックなど）が表示されるまでの速度 |
|---|---|
| Interaction to Next Paint （INP） | ユーザーのページ内でのすべての行動（クリックなど）に対する応答速度 |
| Cumulative Layout Shift （CLS） | ページのレイアウトが安定（データの読み込みなどで突然変化しない状態）するまでの速度 |
これらの3つの指標を「Core Web Vitals」と呼びます。
Core Web Vitalsの各指標を改善することにより、ユーザー体験に優れたサイトと判断され、検索順位の上位に表示されやすくなります。
なお、2024年2月以前はINPではなくFID（First Input Delay）の指標が採用されていました。
FIDはユーザーがページ内で行った最初の行動の応答速度を測る指標でしたが、ページ全体の応答時間を測るには不十分とされ、INPに変更されました。
参考：
・Core Web Vitals と Google 検索の検索結果について
・INP を Core Web Vitals に導入 | Google 検索セントラル ブログ | Google for Developers
直帰率が改善
サイトの表示速度を改善すると、「知りたい情報がなかなか表示されない」というユーザーのストレスが減り、直帰率が減少します。
つまり、表示速度が改善されれば、関連記事や内部リンク先にアクセスされる確率が高まります。
結果、Googleからユーザー体験に優れたサイトと判断されたり、成約ページにアクセスされやすくなります。
モバイルページの表示速度と直帰率の関係性を調査した結果は、以下の通りです。
| モバイルページの表示速度 | 直帰率 |
|---|---|
| 1秒から3秒に伸びる | 32％増加 |
| 1秒から5秒に伸びる | 90％増加 |
| 1秒から6秒に伸びる | 106％増加 |
| 1秒から10秒に伸びる | 123％増加 |
出典：New Industry Benchmarks for Mobile Page Speed – Think With Google
反対にいえば、モバイルページの表示速度を3秒から1秒に改善すると、約3割直帰率が減り、PV数が増加します。
コンバージョンを目的としたページに遷移されやすくなり、収益性や集客効果が高まるでしょう。
リピート率の増加
サイトの表示速度を改善すれば、ユーザーに快適で使いやすいサイトの印象を与え、リピート率が増加します。
リピート率が増加すれば、PV数が増えるだけでなく、Googleからユーザー体験に優れたサイトと判断され、SEO面で高評価を受けられます。
そして、ユーザーからは「ITリテラシーが高くユーザーファーストな企業」と見なされ、企業の印象が良くなる効果もあるでしょう。
ターゲット層から信頼性のある企業と評価されれば、商品の購入や資料請求などをされやすくなります。
Webサイトの理想の表示速度の目安
サイトの表示速度は、速ければ速いほど優れていると判断できます。
一つの目安ですが、Googleは優れたユーザー体験を実現できるCore Web Vitalsの表示速度として、以下の値を提示しています。
- Largest Contentful Paint （LCP）：2.5秒以内
- First Input Delay（FID）：100ミリ秒未満
- Cumulative Layout Shift （CLS）：CLSスコア0.1未満
これらの速度は「PageSpeed Insights」で測定できます。
また、よりシンプルな目安を紹介するのであれば、検索結果に表示されたタイトルをクリックしてから3秒以内に情報が表示される状態を目指しましょう。
先述した通り、モバイルページの表示速度が1秒から5秒に伸びると直帰率が90％増加、1秒から10秒に伸びると123％増加します。
3秒以内に表示される場合は直帰率を32％に留められるため、まずは3秒以内を目安として考えましょう。
参考：Core Web Vitals と Google 検索の検索結果について
Webサイトの表示速度が遅い4つの原因
サイトの表示速度が遅い原因は、大きく以下の4つに分類できます。
- 画像や動画の容量が大きい
- 外部ファイルが多い
- スクリプトの埋め込みが多い
- サーバーのスペックが低い
ここでは、それぞれの原因を詳しく解説します。
画像や動画の容量が大きい
画像や動画など、サイトを構成するファイル容量が大きいと、アクセス時に読み込むデータ量が増加して表示速度が遅くなります。
例えば、スマホやタブレットで撮影した画像をそのままアップロードすると、1枚で2〜3MB程度の容量になることがあります。
また、動画は短くても画像数百枚分の容量に相当し、ユーザーが読み込むデータ容量が大幅に増加します。
表示速度を改善するには、画像や動画など、コンテンツの構成要素の容量を減らすことが大切です。
特に、パソコンよりもスマホやタブレットの方がスペックが低いため、「どのデバイスでも快適に読み込めるか」を意識しましょう。
外部ファイルが多い
外部ファイルとは、以下のようなソースコードで外部のサーバーに保存されているファイルを指します。
- HTML（サイトの構造の定義や、テキストやリンクなどの配置を行うコード）
- CSS（サイトの装飾やレイアウトを指定するコード）
- JavaScript（Webサイトに動きを持たせるためのコード）
上記のようなソースコードを活用すれば、動的なコンテンツを掲載できたり、コードを管理しやすくなったりします。
しかし、外部ファイルが多いと、データをダウンロードするためにブラウザとサーバー間の通信回数が増え、読み込みに時間がかかってしまいます。
表示速度を改善するには、不要な外部ファイルを削除し、ブラウザとサーバー間の通信を最小限に抑えることがポイントです。
スクリプトの埋め込みが多い
スクリプトの埋め込みが多いと、ブラウザとサーバー間の通信量が増え、表示速度が遅くなる原因となります。
例えば、以下のような分析ツールをWordPressに導入する際は、HTML内にコードの埋め込みが必要です。
- Google Analytics（アナリティクス）
- Google Search Console（サーチコンソール）
- Google Ads
埋め込むコードは必要最小限に留めましょう。
また、「Google Tag Manager」などを活用し、コードを一元管理する手法もおすすめです。
コードを一元管理すれば、表示速度が低下する原因となるコードの重複や不要なコードの削除漏れを防止できます。
さらに、コードの読み込み条件を設定できるツールもあり、間接的に表示速度の改善が見込めます。
サーバーのスペックが低い
契約しているレンタルサーバーのスペック（CPUやメモリ、ストレージ）が低いと、表示速度が低下します。
スペックが低いと、処理能力が低く、ユーザーの要求を返すのに時間がかかります。
契約時は十分なスペックであっても、ブログやホームページの成長によりスペック不足となるケースがあります。
表示速度の低下を感じたら、「サーバーのスペックは十分か」を確認しましょう。
Webサイトの表示速度を改善する10の方法
サイトの表示速度を改善する代表的な方法は、以下の通りです。
- 契約しているサーバーを見直す
- CDNを導入
- 画像を最適化
- 動画を直接埋め込まない
- AMPを導入
- 遅延読み込み（Lazy load）を導入
- ブラウザキャッシュの利用
- 不要なWordPressプラグインを削除
- ソースコードを最適化
- Webフォントを使わない
それぞれの方法を詳しく解説します。
1. 契約しているサーバーを見直す
使用しているサーバーのスペックが不足している場合、契約内容を見直すことで表示速度の改善が期待できます。
利用中のサービスのアップグレード、または別のサービスへの乗り換えを検討しましょう。
サーバーやプランの選択時に特に着目すべきスペックは、以下の通りです。
| 容量 | ブログ・ホームページのデータを保存できる容量 （大きいほど大量のデータを保存できる） |
|---|---|
| CPU | 情報の処理を行う領域 （高性能なほど速く処理でき、レスポンスが高速になる） |
| メモリ | データを一時的に保存する領域 （大容量であるほど多くのデータをすばやく処理でき、レスポンスが高速になる） |
| 帯域幅 | 一定時間内に送信できる転送量 （帯域幅が広いほど多くのデータを高速に送受信します） |
| 転送量 | 一定時間内にサーバーが送受信できるデータの総量 （多いほどユーザーのアクセスやダウンロードに耐えます） |
また、サポート体制が充実しているか、自動バックアップ機能は搭載されているかなども確認しましょう。
ただし、オーバースペックなプランを契約してしまうと費用対効果が下がるため、徐々にアップグレードして最適なプランを見つけることをおすすめします。
▼おすすめのレンタルサーバーについて詳しくはこちら▼
レンタルサーバーのおすすめ24選をプロが徹底比較【WordPressブログ対応】
2. CDNを導入
CDNとは、大容量のデータを効率良くユーザーに届けるためのネットワーク技術です。
世界中に配置された「キャッシュサーバー」が大元のサーバー「オリジンサーバー」のデータをコピーして保存し、ユーザーに配信します。
CDNの導入がブログやホームページの表示速度の改善に繋がる理由は、以下の2つです。
- ユーザーから最も近距離にあるキャッシュサーバーからデータを送信できる
- 多数のキャッシュサーバーにユーザーからのリクエストが分散し、オリジンサーバーの負荷が減る
さらに、サーバーダウン防止やセキュリティ強化も実現できます。
サーバーへの負荷が大きい、またはサーバーとターゲットユーザーの物理的距離が遠いなどの場合に最適です。
レンタルサーバー「カラフルボックス」では、月額440円（税込）〜の低価格で利用できるColorfulbox CDNを提供しています。
キャッシュサーバーを100カ国以上、285を超える都市に配置しており、セキュリティ課題の解決にも貢献してくれるので、ぜひチェックしてみてください。
詳しくは「LiteSpeed CacheとCDNの組み合わせでWordPress高速化！」をご覧ください。
3. 画像を最適化
画像ファイルのサイズを最適化することで、ブログやホームページの表示速度の改善が期待できます。
画像ファイルの圧縮で、ユーザーが読み込むデータ量が減少し、サイトが素早く表示されるようになります。
ただし、画像を圧縮すると画質が劣化してしまう欠点があります。
画像がメインコンテンツの場合は、コンテンツの質を損なわないよう慎重に圧縮率を設定しましょう。
画像を最適化する方法はさまざまですが、WordPressでサイトを運営している方は「EWWW Image Optimizer」の活用がおすすめです。
EWWW Image Optimizerを導入すれば、アップロードした画像が自動圧縮され、既存の画像も一括で最適化できます。
EWWW Image Optimizerについて詳しくは「EWWW Image Optimizerの使い方をわかりやすく解説【WebP設定も紹介】」をご覧ください。
4. 動画を直接埋め込まない
動画コンテンツを直接サイトに埋め込まないことで、表示速度の改善に繋がります。
動画を直接埋め込むと、ユーザーが読み込むデータ量が増加し、表示速度の低下を招きます。
コンテンツに動画を載せる場合は、YouTubeなどのプラットフォームに投稿した動画のリンクを掲載する対策を図るべきです。
また、サムネイルがクリックされるまで動画が再生されないように設定しましょう。
5. AMPを導入
AMP（Accelerated Mobile Pages）の導入により、モバイルの表示速度の改善が見込めます。
具体的には、シンプルな構造である「AMP HTML」やキャッシュサーバー「GoogleAMPCache」、JavaScriptの実行の制限により、軽量化・高速化が実現されます。
ただし、表示速度の改善を実現するために、JavaScriptやHTMLなどに制限が課されます。
デザイン性を重視したいサイトには不向きでしょう。
WordPressを活用しているなら、AMPはプラグイン「AMP」などで導入できます。
6. 遅延読み込み（Lazy Load）を導入
表示速度の改善には、遅延読み込み（Lazy Load）の導入が有効です。
通常はユーザーが訪問したページの全データを上から順番にロードします。
しかし、遅延読み込みを導入すれば、ページの下部にある情報はスクロールするまで読み込まないので、不要な表示を減らせて、ユーザーのストレスが軽減されます。
遅延読み込みによる表示速度の改善は、Googleも推奨している手法です。
WordPressを活用している場合、先述したプラグイン「EWWW Image Optimizer」で遅延読み込みを設定できます。
7. ブラウザキャッシュの利用
ブラウザキャッシュは、リピーター層に対するサイトの表示速度を改善できます。
キャッシュがブラウザに残っていると、同じサイトに訪問した際にキャッシュのデータが読み出され、素早く情報が表示されます。
キャッシュはユーザーのブラウザに残るデータであるため、完全に制御はできませんが、保存期間はWebサイトの管理者側で指定できます。
ブラウザキャッシュの主な設定方法は、以下の通りです。
- 「LiteSpeed Cache」などのWordPressプラグインを導入
- レンタルサーバーのキャッシュ機能を活用
- サーバーの.htaccessファイルにコードを追記
ブラウザキャッシュの保存期間を適切に設定すれば、リピーターが快適にコンテンツを閲覧できるでしょう。
ただし、ブラウザキャッシュが残っていると古いデータが読み出され、更新後の最新情報が表示されない場合があります。
そのため、サイトの更新頻度が高い場合は短めの保存期間（1週間程度）、更新頻度が低い場合は長めの保存期間（1ヶ月〜1年程度）を設定しましょう。
▼関連記事▼
LiteSpeed CacheとCDNの組み合わせでWordPress高速化！
8. 不要なWordPressプラグインを削除
不要なWordPressプラグインの削除によって、表示速度が改善される場合があります。
サーバーに保存されているソースコードには、WordPressプラグインの情報も含まれます。
つまり、プラグインが多いとユーザーがサイトを訪れた際に読み込むデータ量が増加し、表示速度が遅くなる要因となるのです。
機能が重複している、または使っていないプラグインは削除し、必要最低限のプラグインのみにしましょう。
また、プラグインのインストール時は、目的の明確化や機能の把握を行い、本当に必要かどうかの判断もすべきです。
注意点として、プラグインの無効化だけでは表示速度は改善されません。
無効化してもサーバーのソースコードにはデータが残り続けるため、無効化したうえで必ず削除してください。
9. ソースコードを最適化
HTMLやCSS、JavaScriptなどのソースコードを最適化すれば、表示速度の改善が期待できます。
例えば、ソースコードに無駄な記述が含まれていたり、空行が入っていたりすると、データの総量が増えて読み込みに時間がかかります。
ソースコードを目視で確認するのは非常に労力がかかるので、「Autoptimize」などのWordPressプラグインの活用がおすすめです。
ただし、ソースコードの圧縮により予期せぬエラーが発生する危険性があるので、必ずバックアップしたうえで実行しましょう。
10. Webフォントを使わない
「Google Font」などのWebフォントの使用をやめると、表示速度の改善が見込めます。
Webフォントはサーバー内に保存、またはインターネット上のデータを読み込んで使用しますが、いずれにせよフォントデータを読み込む工程が発生します。
読み込むデータが増加し、表示速度が遅くなる恐れがあるので要注意です。
Webフォントの活用によりサイトのデザイン性は上がりますが、表示速度の改善が目的の場合は使わない方が賢明です。
フォントデータを使用したい場合は、HTMLに直接SVGを埋め込むなどの対策を施しましょう。
Webサイトの表示速度の測定ツール3選
ブログやホームページの表示速度を計測できる代表的なツールは、以下の3つです。
- PageSpeed Insights（ページスピードインサイト）
- Lighthouse（ライトハウス）
- Google Search Console（サーチコンソール）
各サービスを詳しく解説します。
PageSpeed Insights（ページスピードインサイト）
PageSpeed Insightsは、Googleが提供している表示速度計測ツールです。
URLの入力だけでGoogleが重要視しているCore Web Vitalsを含む5つの指標を測定できます。
さらに、具体的な診断結果や改善策を提案してもらえ、表示速度の改善に向けて何をすべきかも明確になります。
Lighthouse（ライトハウス）
Lighthouseは、GoogleChromeの開発者ツール（DevTools）や拡張機能として提供されている表示速度計測ツールです。
先述したPageSpeed Insightsと共通の評価項目が多いですが、計測したいページからPageSpeed Insightsに移動することなく、直接表示速度を計測できる使い勝手が魅力です。
URLのコピー&ペーストの手間が省け、複数ページの表示速度を効率的に計測したい方などにおすすめです。
Google Search Console（サーチコンソール）
インデックスに登録されると、検索結果に表示されるようになる。
Google Search Consoleの測定項目の一つには、サイトのパフォーマンスがあり、レポートとして表示速度に関する問題点を提示してもらえます。
表示速度に問題があるページを個別に指摘してもらえるので、一つひとつのページを細かく改善したい場合にも最適です。
Webサイトの表示速度を計測する際の注意点
サイトの表示速度の計測結果は、以下の要素で変動します。
- ネットワーク環境
- デバイス
- コンテンツ
例えば、ユーザーのインターネット環境が低速だったり、モバイルのスペックが著しく低かったりすると、測定結果も低速になりがちです。
測定結果は絶対的ではなく、個々の環境やサイトに合わせて相対的に評価することが大切です。
また、表示速度を改善してもリアルタイムで測定結果に反映されるわけではありません。
表示速度は過去のデータをもとに計測されるため、中・長期的な視点で徐々に改善しましょう。
Webサイトの表示速度の改善に関するよくある質問
サイトの表示速度の改善に関するよくある質問は、以下の通りです。
- AMPの導入はSEOに影響する？
- Webサイトの表示速度の改善に役立つおすすめサービスは？
- Webサイトの表示速度の改善におすすめのWordPressテーマは？
それぞれの質問に回答します。
AMPの導入はSEOに影響する？
AMPの導入は、SEOでの高評価を得られる要因になります。
Googleは、AMPを導入しているサイトを高く評価する優遇措置を2021年6月まで実施していました。
現在はこの優遇措置はとられておらず、SEOにも直接的な影響は与えません。
しかし、AMPでモバイルページの表示速度を改善すれば、ユーザー体験の向上に貢献し、間接的にSEOで評価される効果が期待できます。
Webサイトの表示速度の改善に役立つおすすめサービスは？
サイトの表示速度改善におすすめのツールは、以下の通りです。
表示速度の改善を目指す場合、まずは無料、または低コストで実施できる対策から試してください。
本記事で紹介した改善策で効果が出なかった場合、有料サービスの活用を検討してみるとよいでしょう。
Webサイトの表示速度の改善におすすめのWordPressテーマは？
サイトの表示速度に定評がある、代表的なWordPressテーマは以下の通りです。
詳しい特徴やメリットは、以下の各テーマ別記事をご覧ください。
▼関連記事▼
WordPressテーマ「SWELL」を徹底レビュー！メリット・デメリットや導入方法を解説
無料WordPressテーマ「Lightning」のメリット5選！デメリット・評判も紹介
WordPressテーマ「SANGO」のメリット7選！デメリットや口コミ評判も徹底解説
【必見】WordPressテーマ「賢威」を徹底レビュー！メリット6選とデメリット2選を紹介
まとめ：WordPressブログの高速化ならカラフルボックス！
本記事では、サイトの表示速度の改善方法や計測ツール、表示速度の目安などを解説しました。
サイトの表示速度が遅くなる原因は大きく4つに分類でき、それぞれ対処法が異なります。
ブログやホームページの表示速度が遅い原因を把握し、適切な対策を講じましょう。
また、WordPressで制作したブログやホームページの表示速度の改善を目指すなら、カラフルボックスがおすすめです。
カラフルボックスにはサイトを高速表示させる高機能・高スペックなWebサーバーを用意しており、データを効率的に配信できる仕組み「CDN」も格安にて提供しています。さらに、サイト規模に合わせて選択できる8つのプランをご用意、即時アップグレード・ダウングレードが可能です。
WordPress移行代行が無料になるキャンペーンを2025年4月30日まで実施していますので、ぜひチェックしてみてください。
▼関連記事▼
重いサイトを軽くする10個の解決法とは？原因やデメリット、測定方法も解説
【超初心者向け】WordPressブログの始め方を簡単にわかりやすく解説
