【WordPress】表示速度の改善方法11選【スピードは重要】

SEO
  • 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年に導入されました。

 

どんなに良い記事を書いても、表示が遅いというだけでマイナス評価を受けてしまい、上位表示が難しくなりますので、今現在、Webサイトの表示が遅ければ、1秒でも早く表示されるよう、改善するようにしましょう。

 

Webページの表示速度の改善方法11選

それでは、Webページの表示速度の改善方法を11とおり紹介します。

なかには難しい施策もあると思いますので、できそうなところから着手するようにしましょう。

  • 画像データを軽量化する
  • プラグインを減らす
  • 外部Webツールを極力使わない
  • キャッシュを使って表示速度を高速化する
  • リビジョンを削除する
  • テーマを変更する
  • 画像ファイルを減らす
  • レンタルサーバーを変える
  • 画像の読み込みを遅らせる
  • ソースコードを圧縮する
  • CDNから画像を読み込む

上記のとおりです。

画像データを軽量化する

Webページに画像を掲載する際、画像を軽量化せずにそのままアップロードしていませんか?

最近のスマートフォンは高画質な写真が撮れますので、撮った写真を軽量化せずにそのまま掲載すると、データが重くなり、ページの表示速度は遅くなります。

高画質モードで写真を撮ると、2MB~3MB程度の画像データとなるため

表示速度を早くするために、大きな画像はリサイズしてから使ったり、大きなデータの画像はデータを軽量化してから掲載するようにしましょう。

  • サイズの大きい画像 → 小さくリサイズしてから使用する
  • データの大きい画像 → データを軽量化して使用する

ちなみに、上記の施策はツールを使えば簡単にできます。

  • 画像をリサイズするツール → PhotoScapeなど
  • 画像データを軽量化するツール → TinyPNG(Webツール)

画像をリサイズツール「PhotoScape」

PhotoScapeの入手方法や使い方は「【無料】画像編集ソフトPhotoScapeならリサイズ・文字入れも簡単」で解説していますので、是非どうぞ。

画像データを軽量化するWebツール「TinyPNG」

画像データを軽量化できるWebツール「TinyPNG」は、画像をアップロードするだけで簡単に軽量化できます。

TinyPNG – Compress PNG images while preserving transparency
Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

プラグインを減らす

WordPressの機能を強化するプラグインは、非常に便利なものばかりですが、便利だからといって多くのプラグインを使っていると、ページの表示速度は遅くなります。

便利かもしれないから・なんとなく入れてみたいと思ったからといって、20も30もプラグインを入れていたりしませんか?

プラグインの使用は必要最低限に留め、使用頻度が低いプラグインは削除するようにしましょう。

 

ちなみに、筆者が実際にプラグインを削除して、体感的に早くなったと感じたプラグインは次のとおりです。

  • 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】リビジョン削除でデータベースを最適化!【サイトの表示が早くなる】」という記事でも解説しているとおり、WordPressには記事の下書き・上書きを保存する「リビジョン」という機能があります。

リビジョンがあることで、過去に保存した記事を復元することができる便利な機能ではあるのですが、リビジョンは記事を更新したり保存する度にどんどん蓄積されていきます。

データが蓄積されると、データベースのデータはどんどん肥大化し、データの読み込みが遅くなり、その結果、Webページの表示が遅くなってしまいます。

ですので、不要なリビジョンは小まめに削除して、データベースのデータを常に最適化するようにしましょう。

テーマを変更する

WordPressのテーマは、海外製・国産、有料・無料を合わせると、様々なテーマがあります。

なかには、「これがホントに無料なのか?」と思えるような、高機能でおしゃれなテーマも少なくありません。

しかし、テーマの中にはテーマの見栄えを重視するあまり、データの思い画像を多用して、表示が遅かったり、高機能過ぎて表示が遅くなってしまうテーマもあります(海外製のテーマに多い印象を受けます)。

もし、こういったテーマを使っていたら、テーマを変更するだけで表示速度が改善される事が少なくありません。

ちなみに、筆者おすすめは国産の有料テーマです。

国産の有料テーマの多くは、見栄えが良いのはもちろん、表示速度の高速化に力を入れているケースが多いため、テーマを変更するだけで表示速度を改善する事ができます。

画像ファイルを減らす

初期設定のまま、WordPressに画像をアップロードすると、1枚の画像に対して複数のサムネイル画像が自動生成されてしまいます。

1枚の画像をアップロードすると、別サイズのサムネイル画像が3枚~5枚程度自動生成されます。

 

例えば、以下のサイズの画像データをアップロードした場合、別サイズのサムネイル画像が他に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つです。

いずれも月額1,000円程度で利用できますので、安いレンタルサーバーを使っているのであれば、月の負担は数百円しか変わりませんので、コストをかけるようにしましょう。

 

画像の読み込みを遅らせる

Webページ内のテキストデータを先に読み込み、画像データはスクロールに応じてデータを取得する「Lazy Load」という技術があります。

この、Lazy Loadを実装することで、Webページの表示速度を高速化することができます。

ちなみに、Lazy Loadの詳しい解説は、はにわまんさんが書かれている「スクロールのタイミングで画像を表示させる「Lazy Load」をWordPressに導入しよう!」というページに分かりやすい図解がありますので、こちらを参考にすると理解しやすいと思います。

 

Lazy Loadを実装できるプラグイン

ソースコードを圧縮する

WordPressテーマのソースコード(HTML、CSS、JavaScriptなど)は、人が見やすくするために改行やスペースが入っています。

ちなみに、改行やスペースはファイルサイズに含まれてしまうため、改行が多かったりスペースが多いと、Webページを読み込む時のデータが大きくなってしまいます。

この、改行やスペースをWebページを表示する際に除去する事で、Webページの表示速度を高速化することができるようになります。

ソースコードの圧縮はプラグインでできます

以下のプラグインを使うと、不要なソースコードを圧縮してWebページのデータを読み込むことができるようになり、表示速度の高速化が期待できます。

CDNから画像を読み込む

CDNとは、コンテンツ・デリバリー・ネットワークの略で、ファイルサイズの大きい画像や動画などのデータ配信するためのネットワークです。

ユーザーとサーバーの間にCDNを置き、ファイルサイズの大きい画像や動画などのデータをCDNに置くことで、画像や動画データはCDNから読み込み、HTMLデータはサーバーから読み込むことで、サーバーの負荷を減らし、Webページの表示速度を高速化する方法です。

 

ちなみに、CDNを実装する方法については、遠藤聡さんが書かれた「WordPressで表示速度を改善するためにCDNを改めて導入した話。」という記事に実装方法の解説がありますので、詳しく知りたい方はこちらの記事を参考にすると良いかと思います。

 

まとめ

以上、WordPressサイトのWebページの表示速度を高速化する方法を11ケース紹介しました。

Webページの表示速度が遅いとユーザーの離脱率は高くなり、検索順位も下がってしまいますので、表示速度は少しでも早くするよう、改善するようにしましょう。

 

 

人気記事【無料あり】オンラインプログラミングスクールおすすめ3選【通学不要】

トップへ戻る
タイトルとURLをコピーしました