ワンタッチでコードを圧縮できる「Autoptimize」でサイトの高速化を試みる

WEBサイトを閲覧していて、ページの表示がもたつくと煩わしいですよね。外出先のあまり通信環境の良くない状況などでしたらなおさらです。それだけでサイトの閲覧をやめて、別のサイトを探したりすることもあると思います。ページの表示スピードが閲覧者に多大な影響を与えることは、言うまでもありません。

というわけで今回はWordPressのサイトについて、ワンタッチでコードを圧縮して高速化を望めるプラグイン「Autoptimize」をご紹介いたします。

サイトを高速化するプロセスや、現在のサイトのページ表示速度については、以下の記事を参考にご覧いただけます。

ただ、プラグインをただ有効化するだけで高速化できるとは限りません。当プラグインの機能と、高速化に関する施策が干渉しないことを理解しておく必要があります。もちろんまだ何も対策をしていない場合は、高い確率でサイトの高速化が望めるので、便利なプラグインです。

「Autoptimize」とは

このプラグインでは、通常テーマファイルを編集しなければならないコードの最適化がボタンひとつで可能です。大まかに以下のような機能があります。

• HTMLの最適化
• CSSの最適化
• Java Scriptの最適化
• 画像を遅延読み込みする設定

弊社の検証環境では上記機能のうち、基本的な部分を有効化するだけでも高速化が確認できたので、以下で解説していきたいと思います。

「Autoptimize」のインストール

WordPressの管理画面から、プラグインの新規追加をクリックして「プラグイン名」と検索するか、下記ボタンよりダウンロードできます。

Autoptimize

「Autoptimize」の使い方

有効化するとサイドメニューの設定内に「Autoptimize」が追加されています。

こちらをクリックすると4種類のタブ項目が表示されますが、設定が必要なのは左から2つ目までの「JS,CSS & HTML」「Images」のタブのみです。「追加」「さらに最適化」は特に設定が不要な部分であったり、他のプラグインの宣伝と思ってもらっても構いません。

「JS,CSS & HTML」のタブでは、それぞれのコードの圧縮と詳細の設定を行えます。

JavaScript オプション

基本的には、上から二つ目の項目まで（赤枠のみ）にチェックをいれるだけで問題ありません。一つ目の項目は、余分な改行や空白を詰めて容量を削減する機能です。

2つ目の項目はチェックを入れなくてもファイルは縮小されますが、リンクされているJSのファイルをすべて集約して読み込む設定ですので、チェックを入れておきましょう。それ以外は、特殊な場合を除き、デフォルトのままでOKです。

CSS オプション

こちらも上記画像の通りにチェックするのみでOKです。人が作業するときにわかりやすくするために開けた余分な余白や改行を詰めて、複数のCSSファイルを集約し、HTML内に記述されたCSSを連結させる設定が完了します。その他の項目はデフォルトのままで大丈夫です。

HTML オプション

ここでも、単純にHTMLの余分な余白や改行を省略して軽量化します。コメントを残す必要は無いので、上のチェックボックスのみにチェックを入れます。基本的にこのタブでの設定は以上で、その他の項目はデフォルトのままで問題ありません。

「images」タブでの設定

隣のタブで設定する箇所は、一箇所のみです。「Lazy-load images?」にチェックを入れると画面内で表示されていない画像の読み込みを遅らせることでパフォーマンスを改善できます。遅延読み込みさせたくない画像がある場合は「Lazy-load exclusions」の枠内にクラス名や、ファイル名を記入しておきましょう。

一番上の「Optimize Images」は、CDNに画像をキャッシュする機能ですので、チェックは不要です。

画像の遅延読み込み機能のみを詳細に設定したい場合は、以下のようなプラグインもございます。

Autoptimizeを活用するにあたって注意しておきたいこと

弊社の検証環境では、上記の設定のみで高速化を実現できたのですが、「Autoptimize」では、テーマによっては表示が崩れたりする場合もあります。その場合は、チェックボックスを一つ一つon/offするなどしてどの機能が原因なのか調べる必要があります。

また、1ページで完結するランディングページではなく、複数のページを見てもらいたいサイトの場合、読み込み速度がかえって遅くなるケースもありますので注意が必要です。

ランディングページのようなサイトではなく、複数のページを見せたいサイトで使う場合

例えば、CSSのオプションで「Aggregate CSS-files?」にチェックを入れた場合、「Autoptimize」の動作的には1ページごとに集約させたCSSがキャッシュ生成され、1ファイルのcssとして扱われる仕様なので、ブラウザ側のファイルキャッシュとは別にキャッシュが生成されます。なので閲覧ページ数が増えるとキャッシュの読み込みは増え続け、通信量がトータルで増えることになるわけです。

通信量が増えれば、読み込みにも時間がかかるので、サイトによっては上記のオプションからチェックを外し「CSS コードを最適化」のみにチェックを入れて対策するなどの必要があります。

CDNを使って外部からファイルを読み込んでいる場合

もしあなたのサイトでページ表示速度を改善するために、CDNを使って外部のファイルを読み込んでいる場合は、「Autoptimize」を有効化することで、逆にページ速度が遅くなる可能性があります。

そもそも表示速度を高めたり、サーバーの負荷を分散させるために外部からファイルを読み込むCDNを利用している大規模なサイトの場合は、当プラグインを使って高速化を試みる必要性は少ないかもしれません。

ただ「Autoptimize」には下記のように「CDN オプション」という項目もあるので、CDNを利用している方は、「CDN のベース URL」を入力して動作を試してみることは可能です。外部サーバーから読み込んだコードも圧縮されれば、さらに負荷を軽減できるでしょう。

まとめ

コードを圧縮し、ブラウザのキャッシュとは別のキャッシュを生成する機能の仕様上、使い方によっては、表示速度が遅くなることがあります。レイアウトが崩れてしまう場合もありますが、一部の機能のみを有効化しないでおこうという選択もワンタッチで可能なので、対策は簡単です。そういった意味では、簡単に高速化を試すことができるプラグインともいえるでしょう。

ただ、プラグインを有効化した直後と、しばらく経ってからとでは、キャッシュの蓄積量によって読み込み速度に変化が出ているかもしれません。こまめに速度を計測して、現時点での状況を把握しておくことも大切ですね。