HTML、CSS、JavaScriptを縮小してWordPressブログを高速化する方法(Autoptimizeプラグイン)

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

Wordpressブログの高速化

今回は、リソースを縮小してWordpressブログを高速化する方法です。

これまで、このブログには以下のような高速化を一つ一つ施してきました。

どれも、さほど難しい作業は必要ありませんが、作業的には今回が最も簡単かも。

photo by Mario Dias

スポンサーリンク
レクタングル(大)広告

HTML、CSS、JavaScriptの縮小

PageSpeed Insightsでチェックをすると、以下のように提案されます。

リソースを縮小する

JavaScriptを縮小する
CSSを縮小する
HTMLを縮小する

これらの、リソースを縮小するということは、ソースコード内に含まれる余分なスペースや改行を取り除いて、さらに転送サイズを減らすということです。さらに、複数あるCSS、JavaScriptファイルを一つにまとめるなどして、リクエストを減らすことでさらに高速化を図ります。

ただ、これらを行うとソースの可読性が非常に悪くなるので、ソースを読みやすくしておきたい場合は、今回の設定はしない方が良いと思います。

今回は、Wordpressプラグインの「Autoptimize」を用いて縮小を行いたいと思います。

Autoptimizeの設定

まずは、Autoptimizeプラグインをインストールして有効化してください。

インストールしたら「設定」をクリックして設定画面に移ります。

Autoptimizeのインストール

「Autoptimize Settings」ページで以下のようにチェックをつけます。

AutoptimizeSettings

使用しているプラグインや、外部ツールなどによっては、JavaScriptを縮小化すると正常に動作しないものもありますので、もしブログの動作確認をして異常があるようなら「Optimize JavaScript Code?」のチェックを外してください。

その他の項目でも、異常があるようなら、チェックをオン/オフしながら動作を確認してください。

問題がないようでしたら、これでリソースの縮小化設定は終了です。

リソースの縮小化設定前と後の変化

PageSpeed InsightsGTmetrixWebsite speed testで、スコアを計測してみました。

PageSpeed Insights

だいたい同時刻に計測。

設定前

PageSpeed Insights設定前

設定後

PageSpeed Insights設定後

スコアが82→83とわずかですが改善しました。

受けていた提案は、以下のように改善しました。

設定前

提案設定前

設定後

提案設定後

CSSとHTMLは合格部分に表示されるようになりました。JavaScriptは、外部ツールを使っているので、完全に縮小化はできませんが指摘を受けていた数は少なくなりました。

GTmetrix

だいたい同時刻に計測。

設定前

GTmetrix設定前

設定後

GTmetrix設定後

ページスピードグレードが91%(A)→94%(A)に改善。YSlowグレードは、70%(D)→71%(D)に少しだけ上がりました。ファイルをまとめたおかげでリクエスト数が92→69まで少なくなりました。

個別指標は、こんな感じで変化しました。

設定前

スピード

GTmetrixスピード設定前

YSlow

GTmetrix YSlow設定前

設定後

スピード

GTmetrixスピード設定後

YSlow

GTmetrix YSlow設定後

スピードに関しては、全体的に良くなりました。

YSlowに関しては、「Minify JavaScript and CSS」と「Avoid URL redirects」が多少上がりました。

Website Speed Test

だいたい同時刻に計測。

設定前

Website Speed Test設定前

設定後

Website Speed Test設定後

グレードが85→86に。リクエスト数が98→78になっています。ページサイズが増えたのはData URI schemeを使用したからと思われます。Data URI scheme多少ファイルサイズが多少上がろうとも、小さな画像ファイルのリクエスト数を減らし、HTML、CSSと同時に読み込むことによって高速化を図ります。

参考 【WordPress高速化日記】アイコン画像の表示をdata URI schemeで高速化|ウェブシュフ

参考 Data URI Schemeで画像を埋め込み、サイトを高速化しよう! | element.inc

以下は各パフォーマンスです。

設定前

Website Speed Test指標設定前

設定後

Website Speed Test指標設定後

微妙な増減はあるものの、平均値は85→86に上がりました。

まとめ

今回は、「Autoptimize」というWordpressプラグインを設定するだけと簡単にできました。

この設定を行うことで、サーバーへのリクエストを減らし、多少は高速化することができました。

ただし、JavaScriptを使用するプラグインやブログツールによっては、正常に動作しなくなるものもあるかもしれないので、ブログの動作確認は必須です。

もし、不具合が起きても設定の調整である程度対応できると思います。もしそれでも不具合が起きるようなら、プラグインの停止もしくはアンインストールすれば元に戻るので安心です。

もし、PageSpeed Insightsで多くの縮小化を提案されるようなら、試してみてください。