wordpress（ワードプレス）の高速化は、サイトの管理者であれば必須の要件です。
WordPressは、ページを表示する際に、データベースから動的にコンテンツを取ってくる仕組みになっています。
なので、静的なページと比べると、大幅に遅くなってしまいます。
ページの表示速度が遅いと、下記のような損失を招いてしまいます。
-
【ユーザービリティの低下】 ： ユーザーは、Webページの表示に待てるのは最大２秒で、３秒以上かかると４０％以上のユーザーは離脱してしまう。とされています。
参考元：海外SEO情報ブログ：最低2秒、目指すは1秒以内。ウェブサイトを高速化するためのTIPS
あなた自身も、表示の遅いサイトにイライラしてページを離れた経験があるでしょう。
このように、ページの表示速度が遅いと、最悪の場合「離脱」といった機会損失になってしまいます。
-
【SEOでの不利】 ： Googleは、サイトの表示速度が「検索順位」を決める重要な要素であることを明言しています。
なので、表示速度の低下は、SEO的にも悪い影響も与えます。
※SEOについては、こちらの記事で解説しています → SEO対策とは
上記の点からも、いかに、サイトの高速化が重要かが分かるでしょう。
では、Wordpressの表示速度を高速化させる対策ですが、大きく以下の６つになります。
- キャッシュの設定
- CDNサービスの利用
- 画像データの最適化
- 利用ウィジェットの見直し
- ページのソースの最適化
- サーバースペックの向上
今回の記事では、これら６つの高速化対策の手順を、順に解説していきます。
以下、目次になります。
- WordPressの高速化実績！遅い（重い）「表示・読み込み速度」の改善結果
- wordpress（ワードプレス）の高速化に必須の、「キャッシュ系プラグイン」（w3 Total Cache、wp Super Cacheなど）
- 「CDN」との連携
- 画像サイズの軽量化（圧縮）と、読み込みタイミングの最適化
- ワードプレス・ページのソース内容を最適化する
- WordPress（ワードプレス）の、利用ウィジェットの見直し
- WordPressの高速化に必須の「サーバー選定」：ロリポップと、Xserverの比較
WordPressの高速化実績！遅い（重い）「表示・読み込み速度」の改善結果
まずは、当ブログを例に、高速化対策を行った結果「これだけ、はやくなりました！」っていう実績を示したいと思います。
以下に、高速化対策をおこなう前と、おこなった後の「TOPページの表示速度」を挙げてみます。
※利用ツールは、下記の２つ。
これらのツールを利用して、表示速度を計測しました。
では、見てみましょう。
-
【高速化対策：前】
-
【高速化対策：後】
※表示速度を計測したページの要件
- 【サーバー】 ： ロリポップ ロリポプラン
- 【テーマ】 ： Twenty Twelve
- 【ページ（URL）】 ： https://viral-community.com
以上です。
wordpress（ワードプレス）の高速化に必須の、「キャッシュ系プラグイン」（w3 Total Cache、wp Super Cacheなど）
WordPressの高速化対策：一つ目は、「キャッシュ」の設定です。
そして、もっとも重要な項目となります。
WordPressでは、キャッシュの設定をしてくれる、無料かつ便利なプラグインが存在します（以下）
- w3 Total Cache
- wp Super Cache
- DB Cache Reloaded Fix
- WP File Cache
今回は、これらを利用して、設定していくのですが、その前に「キャッシュ」について理解しておきましょう。
キャッシュとは・・・「一時的に保持するデータ」という意味で、このデータ（キャッシュ）を、Wordpressページの表示時に利用することで、本来は「動的」に生成しなければいけないコンテンツを、「静的」なコンテンツとして表示することができます。
こうすることで、動的にページを生成する工程をカットすることができ、表示速度を格段にアップさせる事ができます。
Webサイトには、静的ページと動的ページの２種類があります。
静的ページとは、最初から、HTMLで記述されたページのことで、
動的ページとは、ユーザーからのアクセスの度に、HTMLを構成するところから始めるページのことです。
要は、最初から作られているファイルなのか、、、それとも、ユーザーからの要求の度に、生成されるファイルなのか、、、この違いです。
当然、最初から作られている「静的ページ」の方が表示速度がはやいのは、明白です。
キャッシュは、動的に作られたページを、１時的に保持することで、静的ページとして扱え、
結果、ユーザーからの要求ごとに発生する、プログラムの稼働やデータベースへのアクセスが不要となり、その分、Webページの表示速度が大幅にアップするんですね。
キャッシュの種類について
また、一口に「キャッシュ」といっても、様々な種類が存在します。
以下は、サイト閲覧者 ～ WordPressブログを管理するサーバー間の、主要なキャッシュの種類になります。
上図のとおり、WordPressで扱う主要なキャッシュは、４つになります。
では、順に解説していきましょう。
-
【ページキャッシュ】
ページキャッシュは、Wordpressにて、動的に生成された「HTMLページ」を丸ごとキャッシュして、サーバー側で保持します。
こうすることで、１度「ページキャッシュ」を作っておけば、次回以降のユーザーからのリクエスト時には、キャッシュされたHTML（静的ページ）を表示することができます。
これによって、動的にページ生成する工程が無くなるので、高速化になるわけですね。
※ページキャッシュが保持されるのは、指定された期間だけです（一般的には、１時間）
その期間を過ぎると、再度、動的にページが生成され → キャッシュが作られ・・・と繰り返すわけです。
-
【データベース・キャッシュ】
データベース・キャッシュとは・・・DBに対しての、クエリ要求による「出力結果（返答結果）」を、１時的に保持するキャッシュになります。
WordPressは、記事を表示するとき、MySQL（DB）からデータ（記事情報）を取り出すのですが、その取り出したデータを、キャッシュにするわけです。
こうすることで、次回以降、わざわざDBにクエリを投げて、データを取得する。といった工程を削減できるわけですね。
-
【オブジェクトキャッシュ】
オブジェクト・キャッシュとは・・・PHPなどのプログラミング言語で扱う「変数」の値を、１時的に保持するキャッシュになります。
WordPressでは、「PHP」を利用しているので、そこで扱う「変数」をキャッシュする事で、
「変数に値を設定する」といったプログラムによる処理を削減することができます。
また、「変数」に、DBから取得したデータを格納する場合もあるので、DBとのやりとりも削減対象となります。
-
【ブラウザキャッシュ】
ブラウザ・キャッシュとは・・・ユーザー側のブラウザに、ページの表示結果を１時的に保持するキャッシュになります。
そのユーザーの次回以降のアクセス時は、そのキャッシュが利用されるので、
サーバー側でページ情報を生成して表示する。といった工程が丸々無くなり、表示速度の高速化につながります。
以下、イメージ図
上図のように、２回目以降のユーザーからのリクエストは、「キャッシュ」が有効（最新）かどうかをサーバに問い合わせ、最新であれば、ブラウザに保存されたキャッシュが表示されます。
そして、もし最新データでなければ、サーバ側で再度「HTMLファイル」を生成して表示します。
キャッシュ・データが最新である場合、サーバ側は、コンテンツが更新されていないことを示す「304 Not Modified」というレスポンスを返します。
このレスポンスが返ることで、キャッシュの有効性が担保され、そのまま表示される。といった流れになるわけです。
ブラウザ・キャッシュは、このようにサーバー側で、HTMLファイルを生成したり、そのファイルを送信（レスポンス）するといった工程が無くなるので、サーバ・リソースの大幅な節約にもなります。
以上、Wordpressで扱われる、主要なキャッシュでした。
※参考元：T.I.D ： WordPressキャッシュ系プラグインの比較とサイトに適した選び方
では、お待たせしました。
次は、これらのキャッシュを設定・利用する「プラグイン」の紹介と、その設定手順を解説していきます。
w3 Total Cache ： Wordpressキャッシュ系プラグインの王道
W3 Total Cache とは・・・キャッシュによって「Wordpressブログ」の表示速度を上げる、超有名プラグインです。
「W3 Total Cache」は、上記で挙げている全てのキャッシュに対応していて、CDNとの連携機能など、多彩な機能が搭載されているプラグインになります（「CDN」については、後述します）
おそらく、全てのキャッシュに対応しているのは、この「W3 Total Cache」だけでしょう。
当ブログも、この「W3 Total Cache」を導入していますが、このプラグインを導入する前と後で、表示速度を比較してみたら、
なんと、「３秒」近くもはやくなりました（下図）
【導入後】
このプラグイン：「W3 Total Cache」のインストールや設定手順については、下記記事にてまとめているので、ぜひ参考にしてください。
・W3 Total Cache（Wordpress）のインストール・設定手順（使い方）と、スマホ対応によるエラーについて
以上です。
wp super cache、db cache reloaded fix など主要プラグインと、「.htaccess」の設定
WordPressのキャッシュ系プラグインでは、上述している「W3 Total Cache」が、最もおすすめですが、他にもいくつか主要なモノがあります。
特に、「WP Super Cache」は、Wordpressのインストール時に、デフォルトで付いていて、非常に有名かつ一般的なプラグインです。
また、サーバー環境によっては、「W3 Total Cache」を利用できない場合もあるでしょう（WordPressに特化したレンタルサーバーの「wpX」など）
このような場合は、以下のキャッシュ系プラグインを利用することをおすすめします。
- 「WP Super Cache」 ： ページ・キャッシュ用
- 「DB Cache Reloaded Fix」 ： データベース・キャッシュ用
- 「WP File Cache」 ： オブジェクト・キャッシュ用
※ブラウザキャッシュについては、手動にて「.htaccess」を設定する（設定手順については、後述しています）
上記を見たら分かるように、それぞれのプラグインが対象とするキャッシュ機構は、１つのみです。
「W3 Total Cache」みたいに、主要キャッシュ機構全てに対応していないので、複数のプラグインを利用する必要があります。
では、それぞれの使い方（設定手順）について、順に解説していきます。
-
【WP Super Cache】
WP Super Cache とは・・・「ページ・キャッシュ」の生成（設定）プラグインになります。
ページキャッシュなので、静的なHTML（キャッシュ・データ）がそのまま表示されることで、動的にページ生成している工程がカットされ、
その分の表示速度・高速化につながります。
また、
ファイルの圧縮・最適化機能（HTML/CSS/JavaScript）や、
CDN（コンテンツ・デリバリー・ネットワーク）との連携機能も搭載されています。
具体的はインストールや設定手順については、下記記事にて解説しています。
-
【db cache reloaded fix】
DB Cache Reloaded Fix とは・・・データベース・キャッシュを生成するプラグインになります。
データベースのクエリによる「取得結果」をキャッシュすることで、データベースとのやりとりがカットされるので、その分の高速化につながります。
このプラグインの使い方（設定手順）ですが、基本的には、「DB Cache Reloaded Fix」の設定画面にて、キャッシュの有効化を「ON」にするだけで使えます。
その他、詳細な設定手順については、下記記事にて解説されています。
・たかなblog：WordPressプラグイン、DB Cache Reloaded Fixの設定方法
-
【WP File Cache】
WP File Cache とは・・・オブジェクト・キャッシュを生成するプラグインになります。
WordPressで扱うPHPの変数（オブジェクト）に入る値をキャッシュとして保持することで、
次回以降、「その変数に値を設定する」といったプログラム処理をカットすることができるので、その分、表示速度の高速化につながります。
WP File Cache の設定手順は簡単で、
WordPressの管理画面メニュー：「設定」から「WP File Cache」を選択します。
すると、「WP File Cache」の設定画面が開くので、下図のとおりに設定してください。
上図から、キャッシュファイルの場所（パス）や、管理画面にログイン中のキャッシュ機能を「OFF」にする。などの設定ができるようになっています。
以上です。
-
【ブラウザ・キャッシュの設定】
キャッシュ機構において、「ブラウザ・キャッシュ」は、非常に重要な一つです。
なので、ちゃんと設定しておく必要があります。
ブラウザ・キャッシュの設定自体は、わざわざプラグインを利用しなくても、手動で「.htaccess」ファイルを設定することで実現できます。
※「.htaccess」については、こちら → .htaccessとは？.htaccessで、できる事と設定手順についてまとめてみた
ブラウザ・キャッシュの具体的な設定手順については、下記記事にてまとめられているので、参考にしてください。
以上、「W3 Total Cache」を利用しない場合の、インストールしておくべきプラグインと、その設定内容でした。
WordPressの高速化に必須！「CDN」との連携
CDNとは・・・コンテンツ・デリバリー・ネットワークの略で、ウェブコンテンツを配信するのに最適化されたネットワークのことを意味します。
具体的には、Webサイトにある画像や動画・CSSなどの静的コンテンツを、Webサイトが管理されている「サーバー」とは、別のサーバーにて管理し
そのサーバーが、代わりに配信することで、負荷が分散され、Webサイトの表示速度の向上にもなる仕組みになります。
ここでいう「別のサーバー」を、「CDNサーバー」といいます。
昨今では「Cloud Flare」のような、無料の「CDNサービス」が注目を集めていて、Wordpressプラグインにも、この「Cloud Flare」と連携するプラグインが、複数出てきています（上述している「W3 Total Cache」も、その一つです。）
なので、Wordpressブログの管理者は、サーバーの負荷対策、かつページ表示の高速化のために、「CDN：Cloud Flare」を利用すべきです。
具体的な「Cloud Flare」の登録・設定手順や、Wordpressプラグインを利用して「Cloud Flare」と連携する手順については、下記記事にてまとめているので、ぜひ参考にしてください。
・CDN：コンテンツデリバリーネットワークの仕組みとは？主要サービスの比較や無料CDN「cloud flare」の設定手順
以上です。
画像サイズの軽量化（圧縮）と、読み込みタイミングの最適化
一般的なWEBページのコンテンツは、大まかにいえば「テキスト」・「画像」で出来ています。
そこで、テキストと画像、それぞれのサイズを比較してみると、
- テキスト「１万文字」 ： 30KB（キロバイト）ほど
- 画像「500 × 500px」 ： JPG形式なら数十KB、PNG形式なら数百KB
上記から、テキストサイズと比べたとき、いかに「画像データ」の容量が大きいかが、分かるでしょう。
当然、サイズの大きい画像データは、それだけ表示速度にマイナスの影響を与えます。
そこで、Webサイトの管理者は、画像データを扱う際に、下記二点の対策をやっておくべきです。
- 画像サイズの軽量化（圧縮）
- 画像の、読み込みタイミングの最適化
当ブログでは、上記２点の対策をおこなった結果、
【対策前】
【対策後】
※「Google Page Speeds」「GT metrics」にて計測。
このように、スコア・読み込み速度、共にアップしました。
では、それぞれの手順について、順に解説していきます。
画像サイズの軽量化（圧縮）手順 ： Wordpressプラグイン「EWWW Image Optimizer」の利用
WordPressを利用していて、画像サイズを軽量化（圧縮）するには、「EWWW Image Optimizer」プラグインが便利です。
EWWW Image Optimizer プラグインは、Wordpressにアップする画像を自動で圧縮してくれるほか、
過去にアップロードした画像も、まとめて圧縮することができる、大変便利なプラグインになります。
この「EWWW Image Optimizer」を利用することで、JPGファイル：平均15％、PNGファイル：平均50％ほど、画像サイズを圧縮することができます。
具体的な設定手順や使い方については、下記記事にて解説されているので、参考にしてください。
・バズ部：EWWW Image Optimizer の設定方法と使い方
また、「EWWW Image Optimizer」は、
レンタルサーバーの環境によっては、利用できない場合があります。
現状確認されているのは、「wpXレンタルサーバー」では利用できない模様。
これは、画像の圧縮処理を実行する際に「exec関数」を利用しているのですが、この関数が、サーバー側で実行できない事が原因のようです。
ちなみに、当ブログは「ロリポップ」を採用していて、このプラグインを利用していますが、特に問題は起きていません。
以上です。
画像データの、読み込みタイミングの最適化 ： Wordpressプラグイン「Lazy Load」の利用
上述しているとおり、「画像データ」は、テキストに比べて大幅にサイズが大きいので、表示に時間が掛かってしまいます。
なので、画像データの読み込みタイミングを最適化する必要があります。
具体的には、Webページを表示する際、画面上の可視領域についてのみ画像を読み込み、画面外の画像の読み込みは行いません。
そして、下部にスクロールするたびに画像を、動的に読みこんでいきます。
こうすることで、何十枚写真が設定されていようが、可視領域のみの読み込みのため、ユーザーにストレスを与えることなく、ページを表示させることができます。
特に、ページ表示時のスピードが大幅に高速化されるでしょう。
これを実現するのが、「Lazy Load」というプラグインです。
設定手順については、非常に簡単で、まず「プラグイン」の「新規追加」から、「Lazy Load」を追加して（下図、参考）
プラグインを有効化したら、これで基本「OK」なのですが、一点変更しておくべき箇所があります。
変更箇所は、「Lazy-Load/js/Lazy-Load.js」の、distance : 200 を、「400」に変更してください（下図参考）
distance が、200 の状態だと、画面下部の「200px」を読み込み対象としますが、ちょっと余裕を持たせるために「400px」にしています。
以上、これで設定完了です。
※2017/8/2・・・参考にしているサイト：バズ部で「Lazy Load」が有効になっていないようなので、当ブログでも停止しました。（ググってみると、Lazy Loadがseoに不利という情報も）
ちなみに、「Lazy Load」の利用有無の確認は、ページのソースを見て、imgタグに「Lazy Load」の文字列があれば使われているということ。
ワードプレス・ページのソース内容を最適化する
Webページのソースは、大きく下記３つの要素で構成されています。
- 【テキストデータ】
- 【CSS（スタイルシート）】
- 【JavaScript】
このうち、読み込み時間に影響してくるのが、「CSS」と「JS」です（テキストデータに関しては、容量も微々たるもので、特に気にする必要は無い）
なので、Webページの表示速度：高速化のために、ソースを最適化する場合、「CSS」と「JS」が対象となります。
具体的には、
- CSS、JSの圧縮（軽量化）
- CSS、JSの読み込み順序の変更
この２点が必要になります。
１点目は、単に容量を削減することで、その分表示速度を高速化させます。
２点目は、CSS、JSファイルの読み込み順序ですが、
通常、CSS・JavaScriptは、共にソース上の「headタグ」内に記述されています。
ですが、これだと、ページを表示する際、「headタグ」内から読み込まれていくため、
CSSやJSの読み込みが終わるまで、ページ表示に関する処理は、一旦ストップしてしまいます。
これが、ページの表示において、非常にボトルネックとなるため、「headタグ」内でなく、「bodyタグ」の終了直前に、これらのファイルを配置してやります。
こうすることで、ボトルネックが無くなり、ユーザーの体感速度が大幅に改善します。
では、具体的な方法ですが、Wordpressでは「Head Cleaner」というプラグインを使うことで、これらの事を簡単に実現してくれます。
Head Cleaner は、CSSとJSを中心に、ページを構成するソースを最適化して、表示速度の高速化を目的としたプラグインになります。
Head Cleaner の具体的な設定手順については、下記記事にて解説しているので参考にしてください。
以上です。
WordPress（ワードプレス）の、利用ウィジェットの見直し
WordPressの高速化を考えるにあたって、利用しているウィジェットの見直しも必要になります。
画面上に表示されている「ウィジェット」は、当然ページの表示速度にも影響を及ぼしています。
特に、以下に該当する「ウィジェット」は、利用を再検討した方が良いでしょう。
- SNS連携のもの（各ソーシャルメディアとの通信処理で、時間が掛かる）
- 追尾式のもの
- 画面上部のもの
当ブログでも、上記要件を考慮したうえで、以下を施しました。
- 【Sharebar】 ： SNS連携かつ追尾式のモノ。ということで利用を停止しました
-
【LinkWithin】 ： 記事下部の「関連記事」表示部分ですが、こちらは「LinkWithin」を無効化して、手動にて、カテゴリごとの固定記事を表示させるようにした
※「LinkWithin」は、ページを読み込む度に、関連記事を動的に取得しているので、固定記事を表示させるのと比較して、時間が掛かってしまう。
- 【Wordpress Popular Posts】 ： サイドバーの「人気記事」表示部分ですが、こちらは「Wordpress Popular Posts」を無効化し、固定記事を表示させるようにした
-
【Twitter TimeLine】 ： サイドバーの「Twitter TimeLine」ウィジェットは、フォローボタンに変更した
※「Twitter TimeLine」は、１０以上のツイート・リツイート内容を動的に取得しているため、「フォローボタン」と比較して、読み込みに時間が掛かってしまう。
-
【Facebook Likebox】 ： サイドバーの「Facebook Likebox」ウィジェットは、「Like（イイね）ボタン」に変更した
※「Facebook Likebox」は、”イイね” してくれているユーザーの名前やアイコン・リンクを、動的に取得しているため、「Like（イイね）ボタン」と比較して、読み込みに時間が掛かってしまう。
以上です。
※Wordpressブログを運営する上で、SNS連携のウィジェットは、必ず必要なモノです。
ただ、ページの高速化を考えた場合、ユーザーが容易に分かるモノであれば良く、必要以上なモノは表示させない事を理解しておきましょう。
あなたのWordpressブログのウィジェットも、一度見直してみてください。
WordPress（ワードプレス）の高速化に必須の「サーバー選定」：ロリポップと、Xserverの比較
Webサイトの表示速度は、サーバーも当然関係してきます。
例えば、個人でWebサイトを運営している方は、ほとんどが「レンタルサーバー」を利用しているでしょう。
この「レンタルサーバー」ですが、月額数百円～数千円のモノは、ほとんどが「共有サーバー」となっています。
共有サーバーとは、名前のとおり、１台のサーバーを、複数人で共有して利用する形態のサーバーになります。
そして、”安ければ安い” ほど、共有している人数が多く、一人あたりの利用可能なリソースが少なくなります。
管理側からしたら、１台のサーバーに、詰め込めるだけ詰め込んだほうが、コストが掛からないですからね。
安いレンタルサーバーというのは、ほとんどが、このような状態になっているわけです。
また、同じサーバーに割り当てられた、他のユーザーのWebサイトにアクセスが殺到すると、サーバーに負荷がかかり、そのサーバーを使っている、すべてのユーザーに影響が出てしまいます。
表示スピードが大幅に遅くなってしまう、、、などですね。
なので、安易に「安いサーバー」を選んでしまうと、上記のようなリスクが存在し、自らの首を絞めてしまうのです。
あるサイトでは、月額約２００円といった格安のロリポップサーバーと、月額１０００円の中規模サイト用のエックスサーバー。
この二つのサーバーにて、まったく同じ内容のWordpressの「サーバーからの応答時間」を比較しています（以下）
- 【ロリポップ】 ： 1.406
- 【エックスサーバー】 ： 0.562
上記だと、応答時間に「３倍」近くの差が出ています。
また、応答時間だけではなく、レンタルサーバーを選定する上で、もう一つ重要な指標があります。
それが、「転送量の上限」です。
転送量とは、ユーザーからのリクエストに対する、「レスポンス（Webページの表示）の通信データ量」のことです。
各レンタルサーバー会社では、この「転送量の上限」が決められています。
例えば、ロリポップとXserverであれば、
- 「ロリポップ（ロリポプラン）」 ： 5GB／日
- 「Xserver（X10プラン）」 ： 50GB／日
上記のように、定められているそうです。
これを、１日のPV数に換算すると、、、
１ページあたりの転送量を、100KB（0.1MB）とした場合、100PV ： 10MB となります。
これを基に計算していくと、下記が、１日あたりのPV上限数になります。
- 「ロリポップ」 ： 50,000PV / 1日
- 「Xserver」 ： 500,000PV / 1日
上記から、ロリポップでも、５万ものPV数が上限となっているので、１日あたり数百や数千レベルのサイトの場合は、特に気にする必要はないでしょう。
当ブログも、ロリポップを採用していますが、
現在「約10000PV / 1日」ほどのアクセスで、特に問題なく運用されています（上限数を超えたら、５０３エラーが出ますが、滅多に出ないので）
※５０３エラーとは・・・転送量の上限数を超えているため、閲覧を制限している。といった旨のエラーです。
なので、上限数に達していなくても、このエラーが頻繁に出るようであれば、サーバーのグレードアップが必要でしょう。
※レンタルサーバーの選定については、下記記事にもまとめているので、ぜひ参考にしてください。
・レンタルサーバーを選定する際の９つの軸で、3つのおすすめサーバーを比較してみる
以上です。