WordPressサイトを高速表示化する方法+おすすめプラグイン9選

WordPressサイトの高速表示化

あなたのWebサイトは何秒で表示されるか確認してみたことはありますか?Webサイトの表示速度によってはページを離れてしますユーザーも多いという調査結果が出ています。

参照:サイト表示が2秒遅いだけで直帰率は50%増加! DeNA事例から学ぶWebの自動最適化手法/日本ラドウェア

あなたも、ページの表示速度が遅いWEBサイトに対してイライラした経験はありませんか?

ということで今回はWordPressの高速表示方法と題しまして、WordPressで作成したWebサイトをユーザーにストレスなく表示して閲覧してもらうための方法をご紹介していこうと思います。

1.なぜ、WordPressサイトを高速表示させる事が重要か?

ではそもそも、なぜWordPressサイトを高速化する必要性はどんなところにあるのでしょうか?少し考えてみましょう。

例えばあなたが車を運転しているとします。目的地が決まっていてそこに向かっていると仮定して話を進めますが、その際に道路が渋滞していたとします。その時、あなたならどうしますか?

選択肢としては、

  1. 渋滞が解消するまで我慢する
  2. 渋滞を避けて別の道に進む
  3. 渋滞を我慢できず行き先に向かうことを諦める

大きく分けてこのような選択肢が考えられるかと思います。では、目的地を「Webサイトの閲覧」、渋滞を「Webサイトの表示速度」と考えた場合でこれらの選択肢を検証してみます。

1-1.渋滞が解消するまで我慢する

Webサイトの表示速度が遅くても表示されるまで待ってくれるという、素晴らしいユーザーと解釈することができますが、残念ながらそのようなユーザーばかりではなくむしろ稀と考えるべきでしょう。結果的に掲載しているコンテンツがユーザーの求めていたものだったとしても、アクセスの不便さから再訪してもらえる可能性は低くなると考えられます。

1-2.渋滞を避けて別の道に進む

ユーザーは何かキーワードを検索してWebサイトに到着することがほとんどです。この場合ですと、表示速度が遅いためこのページへのアクセスは諦め、他のページ(他Webサイト)から求めている情報にアクセスされるという解釈ができます。結果として「ユーザーがWebサイトから離れてしまう」と考えられます。

1-3.渋滞を我慢できず行き先に向かうことを諦める

せっかく情報を求めてアクセスしてきてくれているユーザーですが、表示速度が遅くストレスを与えてしまったため、アクセスすることを諦めてしまうという状況と仮定できます。その場合、表示されないブラウザを閉じてしまう、もしくは一つ戻って検索一覧から違うページへとアクセスするといった行動が予想されます。

このように例えで考えてみるとわかりやすいかと思いますが、Webサイトの表示速度において言えることは「早いにこしたことはない」と言えるでしょう。逆に考えると「遅いとデメリットしかない」と言えるかと思います。

2.表示速度の確認方法

ではまず、実際のページの表示速度をどうやって確認できるのかを説明していきます。

一番の指標になるのはGoogleが提供しているサービス「PageSpeed Insights」でしょう。こちらのページにアクセスして測定したいURLを入力することによって様々なスコアを測定することができます。また、改善しなくてはいけない場合には、その箇所や方法なども指摘してくれます。

参照:https://developers.google.com/speed/pagespeed/insights/?hl=ja

実際にこちらの検証サービスで検証してみるとわかるのですが、かなり手厳しい結果が出てくることが多いです。実際にGoogle自体が運営しているメディアでさえ素晴らしい結果が出るというものでもありませんので、あくまでも指標と考えるべきでしょう。

しかし、指摘される修正点などは合点いくものばかりですので参考にしながら修正していくことによって、Webサイトの高速化を図れることは間違いありません。

3.表示速度に影響する要素について

なぜ表示速度が低下してしまうのか。その原因は主にどのような点が考えられるのかを順を追いながら見ていこうと思います。

3-1.画像について

画像を多く使っているサイトでは原因の一つとして考えることができます。

WordPressで記事などを書く際に記事中に画像を挿入したり、アイキャッチ画像などを設定したりすることがよくありますが、それらの画像は記事の中に表示されたり記事のサムネイルに設定されたりするための1つのサイズの画像だけではなく、テーマで設定されているサイズの画像を利用用途の有無に関わらず画像をアップロードした際に自動的に作成されます。

記事のサムネイルなどの必ず表示される画像だけでなく、例えば人気記事ランキングウィジェットに利用されるサムネイル画像であったり、関連記事表示プラグインに利用されるためのサムネイルであったり用途は様々ですが、どうしても表示されていない画像も存在してしまいます。

こういった場合にでも、それぞれの画像に対して最適な圧縮処理などを施しデータ容量を削減することにより、WordPress高速化をするにあたって大きな成果を上げることが可能となります。

そういった場合にお勧めしているのがこちらのプラグインです。

ewww
EWWW Image Optimizer

こちらのプラグインは新しく追加された画像を自動的に圧縮してくれるだけでなく、既存の画像に対しても一括して圧縮処理を施すことができます。画像の利用が多目なサイトでは、処理に若干時間がかかることがありますが、間違いなく画像データ容量を可能な限り削減してくれます。

3-2.CSS・JavaScriptの設置場所と圧縮

ほとんどのWebサイトではCSSとJavaScriptを利用して構築されていると思います。その際にページのどの部分からそれらのソースを読み込んでいるかということも原因の一つとして考えられます。

例外は数多くありますが、基本的にはCSSは内に記述し、JavaScriptはタグの上に記述することをお勧めします。

3-3.ブラウザのキャッシュについて

ブラウザのキャッシュ機能を利用することによって、Webサイトの表示速度を早めることができます。キャッシュというのは簡単に説明すると「一度アクセスしたWebサイトのデータをブラウザで一時的に保管し、次回アクセスした際の表示速度を速くする」という仕組みのことを言います。

ただし、キャッシュというものがサイトを更新されても保持しているキャッシュを優先的に表示する仕組みとなっているため、キャッシュを保存しておく期間の指定が適切な長さである必要があります。

設定方法についてはこちらがわかりやすくまとまっていますので、参考の一つとしてください。

参照:http://syncer.jp/page-cache-setting

3-4.サーバーの応答時間について

どれだけ内部の構造を修正しても、アクセスの多いWebサイトではこの「サーバーの応答時間」というものがWordPressの表示高速表示化にとって絶対的な割合を占めてきます。Webサイトはユーザー側のブラウザからサーバーにどんな情報がほしい(どのページの情報がほしい)かをリクエストし、それに対してサーバーがブラウザに返事を送るという作業の結果、インターネットでページが見られています。これら一連の動作にしても、サーバーの返事や反応が遅いだけで表示速度は結果的に大きな影響を受けます

4.WordPressの具体的な高速表示方法

WordPressを用いたWebサイトの高速化方法を考えた際に、大きく2つの方法に分けることができます。

まず1つ目は、手作業で内部を修正する。WordPressはPHPというプログラミング言語をベースに作られています。ですので、プログラミングの面からWebサイトの高速化対応を行っていく方法です。

2つ目は、プラグインを利用する方法。WordPressはプラグインという機能を使って利用しているテーマが搭載していない機能を手軽に使えるようにすることができます。

今回は、WordPressの高速化を行うために利用できるプラグインを紹介してみようと思います。プラグインのインストールなどの方法についてはこちらの記事を参照ください。

※プラグインを導入する際にもバックアップは確実に取ってから作業を進めてください。

4-1.キャッシュによる高速化のためのプラグイン

4-1-1.W3 Total Cache

W3_Total_Cache

こちらのプラグインではWebサイトの高速表示のために必要なキャッシュやサーバー側の設定を簡単に行うことができます。ただし、あまりにもスペックの低いサーバー環境でこちらのプラグインを利用した場合、動作が逆に遅くなったり多くの問題が発生することがあります。利用を検討する際には、プラグイン名とサーバー名で検索して実例を参考にしてみることをお勧めします。

参照:https://wordpress.org/plugins/w3-total-cache/

4-1-2.SNS Count Cache

SNS_Count_Cache

こちらのプラグインはTwitterやFacebookなどのつぶやき数やいいね!数などをキャッシュとして保存してくれるプラグインとなります。

公式のTweetボタンやいいね!ボタンはユーザーからの認知も高く押してもらいやすいことは譲れない事実なのですが、表示速度の面においてはアクセスするたびに毎回それぞれのサービスとの通信が発生するために時間がかかってしまいます。そういった部分をキャッシュで補ってくれるのがこちらのプラグインになります。しかし、キャッシュで補ってくれる分、リアルタイムの数値とならなくなることは了承の上、利用することが必要です。

参照:https://wordpress.org/plugins/sns-count-cache/

4-1-3.WP Widget Cache

WP_Widget_Cache

こちらはWordPressで活用されることが多いウィジェット部分をキャッシュに保存してくれるプラグインになります。主にサイドバーなどで使われるウィジェットですが、人気記事やランキング記事など多くの便利なウィジェットを効果的に活用していくと、どうしても数が増えてしまうことがネックになります。そして、数が増えるごとに表示速度にも影響を及ぼす可能性が高くなってきます。

そういった場合に、ウィジェット部分をキャッシュしておいてもらえば表示速度を改善することが可能となります。便利ですね。

参照:https://wordpress.org/plugins/wp-widget-cache/

4-2.画像による高速化のためのプラグイン

4-2-1.EWWW Image Optimizer

ewww

先ほど上でも紹介したプラグインになります。こちらはアップロードする画像(既存の画像を一括最適化も可能)を圧縮しファイルサイズを縮小してくれるプラグインになります。記事を投稿するたびに画像を利用することがほとんどかと思いますが、その画像1つに対してテーマによっては数サイズの画像を複製して保存しています。それは、記事を一覧表示した際のサムネイル用であったり、人気記事ランキング用の小さな画像であったりします。

このように小さな画像でも数が少しずつでも増えていけばサーバー容量を圧迫することに繋がりますし、結果的にサーバーの反応にも影響してくるかもしれません。また、表示される場合にも不必要に大きな画像を表示するのではなく、そのサイズの最適な圧縮を施した画像を表示することによって、高速表示化に直結することになります。

参照:https://wordpress.org/plugins/ewww-image-optimizer/

4-2-2.Unveil Lazy Load

Unveil_Lazy_Load

こちらのプラグインは画像の表示タイミングを変えてくれるプラグインとなります。通常、何も処理を施さなければWebページを読み込む際にすべての情報を読み込みますので、当然画像も表示されるすべての画像が読み込まれます。しかし、縦に少し長いページなどではページの下の方の画像を見ることになるのは最後の方になるでしょう。そう考えると、最初に見えない部分の画像を読み込む必要はないのではないかという考えに行き着きます。

それを実現してくれるのがこちらのプラグインとなります。こちらのプラグインではページを読み込む際に表示される部分の画像だけを読み込み、それ以下の画像についてはスクロールに合わせて順次読み込んでいってくれます。

そうすることによって、最初に読み込む画像数が削減できるので、ページの表示を早くすることができるという仕組みです。

参照:https://wordpress.org/plugins/unveil-lazy-load/

4-2-3.Image Lazy Load

Image_Lazy_Load (Unveil.js)

こちらのプラグインはunveil.jsを利用した画像読み込みを遅延してくれるプラグインになります。上のUnveil Lazy Loadとやってくれることはほとんど同じと考えて大丈夫でしょう。あとは認知度やプラグインの更新頻度などを参考にして判断して、自分が良いと思ったものを使ってみましょう。

参照:https://wordpress.org/plugins/image-lazy-load/

4-3.ソースコードによる高速化のためのプラグイン

4-3-1.Autopitimize

Autoptimize

こちらのプラグインは、HTML・CSS・JavaScriptを圧縮してくれるプラグインです。日本語でこのプラグインを検索すると評判は二分化されますが、特に専門的な知識を持っていない方は利用してみる価値はあるかなと考えます。プラグイン自体もアップデート頻度が低いわけでもありませんし、海外での評判は悪くありません。検討してみる価値のあるプラグインだと考えています。

参照:https://wordpress.org/plugins/autoptimize/

4-3-2.Head Cleaner

Head_Cleaner

こちらのプラグインは、ページを構成するソースコードを最適化してくれるプラグインとなります。読み込まれるソースコードを読み込みやすい形にすることによって、読み込みストレスを無くして表示速度を高速表示化してくれます。設定も詳細に行うことができるので是非トライしてみてはいかがでしょうか。

参照:http://bazubu.com/head-cleaner-23851.html

参照:https://wordpress.org/plugins/head-cleaner/

4-3-3.WP-HTML-Compression

WP-HTML-Compression

こちらはHTML部分を圧縮してくれるプラグインになります。設定も簡単でインストールして有効化するだけで動作します。機能としては申し分ないのですが、最近更新が滞っているので少し心配していますが、お勧めできるプラグインということには変わりありません。

参照:https://wordpress.org/plugins/wp-html-compression/

まとめ

WordPressを利用したWebサイトの高速表示化について、確認方法とプラグインを利用した高速表示化の方法を説明してきました。

冒頭にもお伝えしまいたが、多くのユーザーにWebサイトにアクセスしてもらいたいと考えた場合、高速表示から逃げることはできないでしょう。そして、手探りであろうとも色々な方法を施していくことによって改善できるところは改善していくべきです。

せっかくユーザーにとって素晴らしく役に立つコンテンツを提供していたとしても、ページを見るまでにストレスを与えてしまいみてもらえないのであれば全く意味がありません。そのような悲惨な状態にならないためにも最低限の施工をしてストレスなくページを見てもらえるように頑張ってみましょう。