
- WordPressで構築したWebサイトを運営しているけど、ページの表示速度が遅いよ。
- WordPressをインストールしたばかりの頃は表示速度は速かったけど、最近はかなり遅いよ。
- 表示が遅いとユーザーがすぐに離脱するかもしれないから、表示速度を早くする方法を知りたいよ。
この記事では、こういった疑問にお答えします。
好きなところから読めます
Webページの表示速度が遅いことによる悪影響
Webページの表示速度が遅いと、ユーザーの離脱率は高くなり、検索順位が下がるという2つの悪影響を及ぼします。
ユーザーの離脱率が高くなる
インターネットユーザーは基本的にせっかちなので、Webサイトの表示速度が遅ければ、ユーザーはすぐに戻るボタンを押してしまいます。
この記事を読まれている方も、このページが表示されるのに10秒も20秒もかかっていたら、ページが開く前に離脱してしまうのでないでしょうか。
そのページにしかない情報を掲載しているということであれば、もしかしたら待ってくれると思いますが、そうでなければ殆どの方は離脱するのは間違いありません。
モバイルユーザーは3秒以上待てない
Googleはスマートフォン向けサイトを対象に、表示速度と離脱率の相関関係を調査したところ、ページの読み込みに3秒以上時間がかかった場合、ページの離脱率が32%増えるという調査結果が出ました。
参考リンク:New Industry Benchmarks for Mobile Page Speed – Think With Google
離脱率はページの読み込み完了時間が長くなればなるほど、増加することが調査結果で分かりました。
上図の日本語訳は下記のとおりです。
- 表示速度が1秒から3秒に落ちる → 離脱率が32%増える
- 表示速度が1秒から5秒に落ちる → 離脱率が90%増える
- 表示速度が1秒から6秒に落ちる → 離脱率が106%増える
- 表示速度が1秒から10秒に落ちる → 離脱率が123%増える
このように、表示速度の遅さはユーザーの離脱率に直結しますので、少しでも早く表示されるよう、最適した方が良いのは間違いありません。
検索順位が下がる
「【SEO】ページの表示速度が遅いのは致命的!測定方法や改善方法を解説」という記事でも解説しているとおり、Webページの表示速度が遅いと、検索順位は下がります。
Webページの検索順位は検索アルゴリズムによるランキング要因によって順位が決定しますが、ランキング要因の中には、ページの表示速度も関係しています。
ちなみに、パソコンの検索結果のランキング要因は2010年に導入され、モバイルの検索結果のランキング要因は2018年に導入されました。
- パソコンの検索結果のランキング要因に関する記事:Official Google Webmaster Central Blog: Using site speed in web search ranking
- モバイルの検索結果のランキング要因に関する記事:Official Google Webmaster Central Blog: Using page speed in mobile search ranking
どんなに良い記事を書いても、表示が遅いというだけでマイナス評価を受けてしまい、上位表示が難しくなります。
現状でWebサイトの表示が遅ければ、1秒でも早く表示されるよう改善しましょう。
Webページの表示速度の改善方法12選
それでは、Webページの表示速度の改善方法を12種類紹介します。
なかには難しい施策もあると思いますので、できそうなところから着手しましょう。
- 画像データを軽量化する
- Webフォントを使っていればやめる
- プラグインを減らす
- 外部Webツールを極力使わない
- キャッシュを使って表示速度を高速化する
- リビジョンを削除する
- テーマを変更する
- 画像ファイルを減らす
- レンタルサーバーを変える
- 画像の読み込みを遅らせる
- ソースコードを圧縮する
- CDNから画像を読み込む
上記のとおりです。
画像データを軽量化する
Webページに画像を掲載する際、画像を軽量化せずにそのままアップロードしていませんか?
最近のスマートフォンは高画質な写真が撮れますので、撮った写真を軽量化せずにそのまま掲載すると、データが重くなり、ページの表示速度は遅くなります。
表示速度を早くするために、大きな画像はリサイズしてから使ったり、大きなデータの画像はデータを軽量化してから掲載するようにしましょう。
- サイズの大きい画像 → 小さくリサイズしてから使用する
- データの大きい画像 → データを軽量化して使用する
なお、上記の施策はツールを使えば簡単にできます。
- 画像をリサイズするツール → PhotoScapeなど
- 画像データを軽量化するツール → TinyPNG(Webツール)
画像をリサイズするツール「PhotoScape」
PhotoScapeの入手方法や使い方は「【無料】画像編集ソフトPhotoScapeならリサイズ・文字入れも簡単」で解説していますので、是非どうぞ。
画像データを軽量化するWebツール「TinyPNG」
画像データを軽量化できるWebツール「TinyPNG」は、画像をアップロードするだけで簡単に軽量化できます。
公式サイト:TinyPNG
Webフォントを使っていればやめる
Webフォントは見た目がおしゃれなので使っている方も多いと思いますが、読み込みが遅くなる原因となります。
ちなみに、筆者も当ブログでWebフォントを使っていましたが、使うのを止めたところ、表示速度が改善しました。
今までWebフォント使ってましたが、使うのをやめたら、PageSpeed Insightsのスコアが10以上アップしました。
スコアを計測したサイトのテーマはCocoonですが、SWELLを使っているサイトでも同様の現象がみられました。
リンクをクリックした時のページの読み込みが少し早くなりました😃 pic.twitter.com/rER95Aj3Qw
— たかろぐ (@takashisema) September 1, 2021
当ブログとは違うテーマを使用している別のブログでも試しましたが、同様の現象が見られました。
ちなみに、別のブログではSWELLというテーマを使ってます。
プラグインを減らす
WordPressの機能を強化するプラグインは非常に便利なものばかりですが、便利だからといって多くのプラグインを使っているとページの表示速度は遅くなります。
実際に使っているプラグインなら良いですが、
「便利かもしれない」、「どんな機能なのかとりあえず入れてみたい」といって、余計なプラグインを入れていたりしてませんか?
プラグインの使用は必要最低限に留め、使用頻度が低い・使わないプラグインは削除しましょう。
ちなみに、筆者が実際にプラグインを削除して、体感的に早くなったと感じたプラグインは下記のとおりです。
- WordPress populer post
- Boxzilla・MailChimp for WordPress
- Instagram feed
上記のプラグインも便利ではありますが、使っていると表示が重くなるので削除しました。
ちなみに、上記のプラグインに興味をお持ちの方は、下記記事をどうぞ。
外部Webツールを極力使わない
外部Webツールはサイトの分析やアクセスを増やす上で非常に役に立つツールですが、多くのツールを使っていると表示速度に影響しますので、必要最低限に留めるようにしましょう。
ちなみに、実際に筆者が使ってみて、「表示速度が遅くなった」と感じた外部Webツールは下記のとおりです。
- Push通知ツール → Push7
- ヒートマップツール → User Heat
いずれも便利なツールでしたが、使っていると表示が遅くなるので使うのを止めました。
キャッシュを使って表示速度を高速化する
キャッシュとは、Webページのデータを一時的に保存する機能のことで、キャッシュを使うとWebページの表示速度を高速化できます。
ちなみに、キャッシュの詳しい解説はサルワカさんが運営されているサイトの「キャッシュとは?IT初心者でも分かるように解説」というページをご覧ください。図解入りなので理解しやすいと思います。
キャッシュを使って表示速度を高速化する方法は2つあります。
- キャッシュ系プラグインを使う
- サーバーのキャッシュ機能を使う
上記のとおりです。
キャッシュ系プラグインを使う
WordPressサイトはHTMLで作成されたページと違い、ユーザーがWebページに訪問するとページにコンテンツを表示するため、データベースに格納されたコンテンツにアクセスしてデータを取得します。
そのため、HTMLで作成されたページと比較すると表示に時間がかかります。
しかし、プラグインを使うことで、データベースやWebブラウザにコンテンツデータをキャッシュデータ(一時的に保存されたデータ)として保存できるようになり、表示速度を高速化できます。
ちなみに、キャッシュ系プラグインで有名なものは下記3つあります。
Webページの表示が遅いと感じるようであれば、上記いずれかのプラグインを試してみてください。
ちなみに、「【WordPress】データベース接続確立エラーの原因と対処法を解説」という記事でも解説しているとおり、キャッシュ系のプラグインは他プラグインとの相性があります。
相性が悪いとサイトの表示エラーが出る事がありますので、もし、相性が悪ければ使用を控えましょう。
サーバーのキャッシュ機能を使う
レンタルサーバーの多くは、キャッシュ機能があります。
例えば、現在、筆者が使っているエックスサーバーとConoHa WINGには、下記キャッシュ機能があります。
- エックスサーバー:ブラウザキャッシュ機能、サーバーキャッシュ機能
- ConoHa WING:コンテンツキャッシュ機能
サーバーのキャッシュ機能を設定することで、表示速度を高速化できます。
リビジョンを削除する
「【WordPress】リビジョン削除でデータベースを最適化【表示速度UP】」という記事でも解説しているとおり、WordPressには記事の下書き・上書きを保存する「リビジョン」という機能があります。
リビジョンがあることで、過去に保存した記事を復元することができる便利な機能ではあるのですが、リビジョンは記事を更新したり保存する度にどんどん蓄積されます。
データが蓄積されると、データベースのデータはどんどん肥大化し、データの読み込みが遅くなり、その結果、Webページの表示が遅くなります。
不要なリビジョンは小まめに削除して、データベースのデータを常に最適化しましょう。
テーマを変更する
WordPressテーマは、海外製・国産、有料・無料を合わせると、様々なテーマがあります。
なかには、「これがホントに無料なのか?」と思えるような、高機能でおしゃれなテーマも少なくありません。
しかし、テーマの中には見栄えを重視するあまり、データの重い画像を多用して表示が遅くなってしまったり、高機能過ぎて表示が遅くなってしまうテーマもあります(海外製のテーマに多い印象を受けます)。
もし、このようなテーマをお使いでしたら、テーマを変更するだけで表示速度を改善できますので、思い切ってテーマを変更するのも一つの方法です。
ちなみに、筆者おすすめは国産の有料テーマです。
国産の有料テーマの多くは見栄えが良いのはもちろん、表示速度の高速化に力を入れてますので、テーマを変更するだけで表示速度を改善できます。
下記記事でおすすめな国産テーマをまとめていますので、是非参考にして下さい。
画像ファイルを減らす
初期設定のまま、WordPressに画像をアップロードすると、1枚の画像に対して複数のサムネイル画像が自動生成されます。
例えば、以下のサイズの画像データをアップロードした場合、別サイズのサムネイル画像が他に3~5つも自動生成されます。
- 元の画像データ
- 758px × 500px (データサイズ:500KB)
- 自動生成された画像データ
- 320px × 180px (データサイズ:250KB)
- 160px × 90px (データサイズ:150KB)
- 120px × 68px (データサイズ:100KB)
- 150px × 150px (データサイズ:126KB)
- 100px × 100px (データサイズ:98KB)
上記のケースで言えば、元々の画像データは500KBしかありませんが、画像をアップロードしたとたん、画像データが1MB以上増えてしまうのです。
ちなみに、自動生成された画像は全て使用される訳でもなく、使用されることがない画像もあります。
使われることが無いのに、画像データはサーバーに残ってしまうため、こうした不要なデータが蓄積されると、処理速度は少しずつ遅くなります。
不要な画像データを削除することでサーバーの処理速度が速くなり、その結果、Webページの表示速度も速くなりますので、もし、不要な画像データが大量にあるなら削除しましょう。
詳しくは「【WordPress】自動生成されるサムネイルを一括削除するプラグイン「DNUI」」をどうぞ。
レンタルサーバーを変える
レンタルサーバーは色々ありますが、月額料金が安いレンタルサーバーは基本的に処理速度が遅いです。
もし、毎月の利用料が500円前後のレンタルサーバーをお使いであれば、毎月の利用料が1,000円前後のレンタルサーバーに乗り換えましょう。
わずか500円程度の差で、レンタルサーバーの処理速度は大きく変わります。
安いレンタルサーバーで一生懸命頑張って高速化しようとしても限界がありますので、乗り換えた方が早いです。
ちなみに、筆者おすすめのレンタルサーバーは下記の3つです。
- エックスサーバー
:10日間の無料お試し有り(月額990円~)
- ConoHa WING
:初期費用・最低利用期間なし(月額880円~)
- mixhost
:30日間返金保証(968円~)
上記の詳しい解説は「【決定版】SEO対策向けレンタルサーバー比較【おすすめ3選】」をどうぞ。
いずれも月額1,000円程度で利用できますので、もし、安いレンタルサーバーを使っていれば、1か月の負担は数百円ぐらいしか変わりませんので、サーバーを乗り換えて高速化しましょう。
画像の読み込みを遅らせる
Webページ内のテキストデータを先に読み込み、画像データはスクロールに応じてデータを取得する「Lazy Load」という技術があります。
この、Lazy Loadを実装することで、Webページの表示速度を高速化できます。
ちなみに、Lazy Loadの詳しい解説は、はにわまんさんが書かれている「スクロールのタイミングで画像を表示させる「Lazy Load」をWordPressに導入しよう!」というページに分かりやすい図解がありますので、こちらを参考にすると理解しやすいと思います。
Lazy Loadを実装できるプラグイン
Lazy Loadはプラグインを使えば簡単に実装できます。
- Native Lazyload(Google製)
- Lazy Loader
ソースコードを圧縮する
WordPressテーマのソースコード(HTML、CSS、JavaScriptなど)は、人が見やすくするために改行やスペースが入っています。
ちなみに、改行やスペースはファイルサイズに含まれるため、改行・スペースが多いと、Webページを読み込む時のデータが大きくなりますが、改行・スペースを除去することで、表示速度を高速化できます。
ソースコードの圧縮はプラグインでできます
以下のプラグインを使うと、不要なソースコードを圧縮してWebページのデータを読み込むことができるようになり、表示速度の高速化を期待できます。
CDNから画像を読み込む
CDNとは、コンテンツ・デリバリー・ネットワークの略で、ファイルサイズの大きい画像や動画などのデータ配信するためのネットワークです。
ユーザーとサーバーの間にCDNを置き、ファイルサイズの大きい画像や動画などのデータをCDNに置くことで、画像や動画データはCDNから読み込み、HTMLデータはサーバーから読み込むことで、サーバーの負荷を減らし、Webページの表示速度を高速化する方法です。
ちなみに、CDNを実装する方法については、遠藤聡さんが書かれた「WordPressで表示速度を改善するためにCDNを改めて導入した話。」という記事に実装方法の解説がありますので、詳しく知りたい方はこちらの記事を参考にすると良いかと思います。
まとめ
以上、WordPressサイトのWebページの表示速度を高速化する方法を12種類紹介しました。
Webページの表示速度が遅いとユーザーの離脱率は高くなり、検索順位も下がってしまいますので、表示速度は少しでも早くするよう、改善するようにしましょう。