今回は、リソースを縮小してWordpressブログを高速化する方法です。
これまで、このブログには以下のような高速化を一つ一つ施してきました。
どれも、さほど難しい作業は必要ありませんが、作業的には今回が最も簡単かも。
photo by Mario Dias
目次
HTML、CSS、JavaScriptの縮小
PageSpeed Insightsでチェックをすると、以下のように提案されます。
JavaScriptを縮小する
CSSを縮小する
HTMLを縮小する
これらの、リソースを縮小するということは、ソースコード内に含まれる余分なスペースや改行を取り除いて、さらに転送サイズを減らすということです。さらに、複数あるCSS、JavaScriptファイルを一つにまとめるなどして、リクエストを減らすことでさらに高速化を図ります。
ただ、これらを行うとソースの可読性が非常に悪くなるので、ソースを読みやすくしておきたい場合は、今回の設定はしない方が良いと思います。
今回は、Wordpressプラグインの「Autoptimize」を用いて縮小を行いたいと思います。
Autoptimizeの設定
まずは、Autoptimizeプラグインをインストールして有効化してください。
インストールしたら「設定」をクリックして設定画面に移ります。
「Autoptimize Settings」ページで以下のようにチェックをつけます。
使用しているプラグインや、外部ツールなどによっては、JavaScriptを縮小化すると正常に動作しないものもありますので、もしブログの動作確認をして異常があるようなら「Optimize JavaScript Code?」のチェックを外してください。
その他の項目でも、異常があるようなら、チェックをオン/オフしながら動作を確認してください。
問題がないようでしたら、これでリソースの縮小化設定は終了です。
リソースの縮小化設定前と後の変化
PageSpeed InsightsとGTmetrixとWebsite speed testで、スコアを計測してみました。
PageSpeed Insights
だいたい同時刻に計測。
設定前
設定後
スコアが82→83とわずかですが改善しました。
受けていた提案は、以下のように改善しました。
設定前
設定後
CSSとHTMLは合格部分に表示されるようになりました。JavaScriptは、外部ツールを使っているので、完全に縮小化はできませんが指摘を受けていた数は少なくなりました。
GTmetrix
だいたい同時刻に計測。
設定前
設定後
ページスピードグレードが91％（A）→94％（A）に改善。YSlowグレードは、70％（D）→71％（D）に少しだけ上がりました。ファイルをまとめたおかげでリクエスト数が92→69まで少なくなりました。
個別指標は、こんな感じで変化しました。
設定前
スピード
YSlow
設定後
スピード
YSlow
スピードに関しては、全体的に良くなりました。
YSlowに関しては、「Minify JavaScript and CSS」と「Avoid URL redirects」が多少上がりました。
Website Speed Test
だいたい同時刻に計測。
設定前
設定後
グレードが85→86に。リクエスト数が98→78になっています。ページサイズが増えたのはData URI schemeを使用したからと思われます。Data URI schemeは、ファイルサイズが多少上がろうとも、小さな画像ファイルのリクエスト数を減らし、HTML、CSSと同時に読み込むことによって高速化を図ります。
参考 【WordPress高速化日記】アイコン画像の表示をdata URI schemeで高速化｜ウェブシュフ
参考 Data URI Schemeで画像を埋め込み、サイトを高速化しよう！ | element.inc
以下は各パフォーマンスです。
設定前
設定後
微妙な増減はあるものの、平均値は85→86に上がりました。
まとめ
今回は、「Autoptimize」というWordpressプラグインを設定するだけと簡単にできました。
この設定を行うことで、サーバーへのリクエストを減らし、多少は高速化することができました。
ただし、JavaScriptを使用するプラグインやブログツールによっては、正常に動作しなくなるものもあるかもしれないので、ブログの動作確認は必須です。
もし、不具合が起きても設定の調整である程度対応できると思います。もしそれでも不具合が起きるようなら、プラグインの停止もしくはアンインストールすれば元に戻るので安心です。
もし、PageSpeed Insightsで多くの縮小化を提案されるようなら、試してみてください。
