【ブログレスポンスの改善手法 】 ブログを高速化する

なんとかして自分のブログのレスポンスを改善=高速化したい場合、ここで紹介する手法とプラグインを使用するとかなり高速化できます。

ブログのレスポンスを改善する場合、いったいどこから手をつけていいのか迷ってませんか？
一番大きな要因は、サーバーかもしれません。レンタルサーバーを使っているとどうしてもそこそこのスピードしか出ません。ただサーバーのせいばかりにもしていられないので、このブログの高速化に取り組みました。結果は、ページの読み込み完了（Page load　time)が1.57秒、Page Speed　Gradeは両方とも評価Aを得る事が出来ました。

ただ単にコンテンツをキャッシュするだけではだめです。やみくもにプラグインを導入するだけでもだめです。なぜ今までだめだったのか？　目からウロコのとっておきの手法を紹介します。

どうしたら高速化できるか

私が実践する高速化するための方法は、以下のような決まり切ったものです。やっぱり基本はやるべき事は誰でもやらなければなりません。ただ、せっかく導入したプラグインがバッティングしてうまく機能しなかったりブログの設定で効果が発揮できていないのかも知れません。CloudFlareサービスは利用してますか？　これはとっても有効ですよ。これらのプラグインやサービスの効果を最大限に発揮させ、ブログをシンプルかつコンパクトな構造にするのがブログ高速化です。

重要なテンプレート選び

ブログの基本的な構造を決めてしまうブログテンプレート。このテンプレートを変えるだけでレスポンスが劇的に改善することも少なくはありません。テンプレートの中にはもともと高速化に不向きなものがあります。テンプレートのファイルの数が多いもの、構造が複雑なもの、レイアウトの切り替えが可能なもの等は、これだけでブログは巨大化しこの時点でアウトです。ブログには必須のパンくずやページャーなど基本的に装備されていてシンプルなテンプレートを選ぶ事が重要です。途中でテンプレートを変えるのは結構大変です。テンプレート選びは慎重におこないましょう。

もしテンプレート選びで迷っているのなら、当ブログでも採用しているENJLOGさんのstinger3がいいかもしれません。

インストールするプラグインは最低限にする

プラグインを多くいれるとスピードは確実に遅くなります。プラグインは必要最低限に絞りこみましょう。一旦ここで紹介するプラグインだけにしてみてどのくらい高速化するか確認して見てください。驚く結果になるかも知れません。
少なくとも似たようなプラグインが複数インストールされる状況は避けてください。

CSS,JSファイルはgzip形式で圧縮する

高速化するにあたって結構効果があるのが、このgzipによる圧縮です。当初私もやっていなかったっていうかあまり効果ないだろうと放っておいたのですが、試してびっくり。実に以外でした。gzipによるファイル圧縮ですが、これは、サーバー上にあるファイルをあらかじめ圧縮してコンパクトにしておき、要求があった場合にユーザーのブラウザ側で元に戻して使用します。それだけでネットワーク上のトラフィック（データ量）が小さくなり高速化できるわけです。圧縮可能なファイルは、CSS、JS、HTML等のファイルです。他にphpファイルもやり方によっては圧縮できるようですが、とりあえず、CSSファイルだけでもgzipで圧縮しましょう。拡張子がgzに変わってしまいますが、.htaccessファイルに記述を追加することで無修正で使えます。

gzipによる圧縮は、以下のサイトが詳しいです。

画像は極力小さくする

画像を小さくするために、適切なサイズと画像の種類に応じたファイル形式（jpg,png,gif）を選んでください。きれいに表示するというだけでフルカラーの大きな画像をリサイズして使うのは最悪です。ファイル形式は、写真等の場合はjpgが向きスクリーンショットやアイコン等はpngやgif形式を使います。

wordpressにはメディア設定のサイズを指定することが出来ます。wordpress管理画面の設定>メディアで、サムネールサイズ、中、大のそれぞれのサイズを適切に設定しておくことにより、アップロードされた画像はそれぞれのサイズでクリッピングされ複数の画像が自動的に作成され、投稿時にこれらを使用することが出来ます。

また、以下のプラグインを事前にインストールしておくと、アップロード時にさらに圧縮してくれます。

私が使用する高速化プラグイン、

いよいよブログを高速化するための本番です。私のお薦めするプラグインの組み合わせは以下。プラグインには、それぞれ相性がありとりあえずは以下のプラグインをインストールしてみてください。

W3 Total Cache

私のブログの高速化のメインになるのが、「W3 Total Cache」というキャッシュプラグイン。他にもWP Super CacheとかQuick Cacheとかありますが私はこのW3 Total Cacheを使っています。

「W3 Total Cache」は、Wordpressで作成したブログのキャッシュコントロールやMinify(Page,CSSスタイル、Javascript）といったプログラムの最小化とブラウザ側のキャッシュのチューニングを総合的におこなってくれるプラグインです。

「W3 Total Cache」プラグインの設定については、以下のサイトを参考にしてください。

function vc_remove_wp_ver_css_js( $src ) {
if ( strpos( $src, 'ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'vc_remove_wp_ver_css_js', 9999 );
add_filter( 'script_loader_src', 'vc_remove_wp_ver_css_js', 9999 );

Mo Cache

wordpressは多言語をサポートします。この言語ファイルがMOファイルでこのMOファイルのキャッシュ化するのがMO Cacheプラグインです。このプラグインはインストールし有効化するだけで使えます。

jQuery lazy load plugin

画像（img要素）を遅延ロードし、HTTPリクエストを減らして読み込み速度のパフォーマンスを向上させるjQueryプラグインです。このプラグインもインストールし有効化するだけで使えます。

WP Hyper Response

これは実際にスピードを改善するのではなく、見かけ上の表示を早くするためのプラグインです。通常は、サイトの読み込みが完了してから一気に表示を始めるところ、途中途中で表示をさせるために見かけ上の表示が速くなるものです。これもインストールし有効化するだけです。

CloudFlareサービスを利用する

おすすめのプラグインのインストールまで完了したら、CloudFlareサービスを利用します。
CloudFlareは、あなたの使っているサーバーにかわってサイトをキャッシュしてくれます。これらはネットワーク上のユーザーのすぐそばにあり、もしサイトの内容がかわっていなければこのキャッシュが利用されます。わざわざ毎回サーバーに見にいくことがないので、とても早くなります。これを最初に使ってもいいのですが、やはり大元のサイトチューニングをおこなってからやるのが基本でしょう。見違えるように早くなります。

CloudFlareサービスの導入については、以下を参照してください

番外編：効果測定

実際にどのくらい高速化できたかは、以下のサイトで測定することが出来ます。ページの表示速度はそれぞれのサイトでことなりますがGtMetrixではネックボトルとなっている原因の解析ができ、WebPageTestでは実践に即した測定結果を得られるようです。やたらとページの表示速度を追い求めることなく、とりあえずはGtMetrixで総合評価ダブルAを目指してがんばりましょう！

まとめ

ブログの高速化は、1回では終わりません。上記に示した効果測定サイトを利用して計測とチューニングを繰り返しおこない、結果をみながらブログのチューニングをしてみてください。サイトの表示速度は1秒など言われますが、とりあえず３秒以内ぐらいを目標に高速化しましょう！