WordPressパフォーマンスチューニング(1)

この前Google PageSpeed Insightsで本ブログをチェックしたら、
酷い数値になっていたことに気づきました。

これはアカンと思い、即チューニングすることにしました。
先ずチューニング前のスコアは以下です。
パソコン:65
モバイル:55
(その時、記事を書くつもりがなかったので、スクリーンショットを取りませんでした・・・)

ステップ1:JavaScriptとCSSのサイズ圧縮

方法は沢山ありますが、WordPressを使っているので、ここはプラグインで何とかしましょう

今回使うプラグインはAutoptimizeです。
https://wordpress.org/plugins/autoptimize/

このプラグインはHTML、JavaScript、CSSを圧縮することができます。
しかも、設定も簡単ですね
「Optimize HTML Code」「Optimize JavaScript Code」「Optimize CSS Code」
をチェックするだけですね

Autoptimize Options

ステップ2:キャッシュの活用

いろいろWordPress用のキャッシュプラグインはありますが、
ここは手っ取り早い方法でApacheの設定を弄りましょう。
直httpd.confを編集してもいいですが、一応他サイトのことも考えて.htaccessを作って
そこに設定を書きましょうね

・mod_deflate
コンテンツを圧縮して、転送量を減らすことで高速表示を可能にするモジュールです。転送量が減る反面、CPUの処理は増えるため、ボトルネックがCPUの処理能力の場合は逆にレスポンスが低下します。
そのため導入後のリソースの監視と速度測定が必要になります。ただ、最近の高速なCPUであればどちらかと言えば回線がボトルネックになるため、多くの場合はmod_deflateの導入によって高速化されます。

・mod_expires
キャッシュ(cache)を設定することで同じファイルを何度も読み込む必要がなくなることで、画面表示を高速化するための仕組みを提供する Apacheのモジュールです。

・mod_rewrite
アクセスURLを正規表現で書き換えることができます。リダイレクト処理を行うのに便利なモジュールです。

ステップ3:CDNの活用

CDNとは、ファイルサイズの大きいデジタルコンテンツをネットワーク経由で配信するために最適化されたネットワークのこと。
無料なサービスもいくつかあり、今回はJetpackに入っているCDNを使うことにしました。

まずはJetpackをインストールします。
https://ja.wordpress.org/plugins/jetpack/

Jetpackはかなり優秀なWordPress用プラグインですが、今回はCDNに絞って紹介します。
設定はともて簡単、「Photon」という機能をオンにするだけです。

Jetpack 設定

そうすると以下のように画像ファイルはi1.wp.comのサーバーから配信されます。

2016-03-07

さあ、ここまでやったので、もう一度速度チェックしましょう

パソコン:65→82
モバイル:55→69

おー、良いんじゃないか
ちょっとした変更だけでここまで上がると正直思いませんでした。

PageSpeed Insights

PageSpeed Insights-mobile

とりあえず、今日は一旦ここまで!

– PR –
– PR –