「Autoptimize」:HTML・JavaScript・CSS の複数ファイルを連結・圧縮して最適化してくれるプラグイン

WordPress › Autoptimize « WordPress Plugins
WordPress › Autoptimize « WordPress Plugins

ファイルサイズの最適化のために

PageSpeed Insights でよく「修正が必要」として指摘されるのが「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript/CSS を排除する」です。

PageSpeed Insights – Google Developers

詳細を表示させてみると、「レンダリングブロック JavaScript を削除してください」「次のCSS配信を最適化してください」とあって、ファイルがズラッと並んでいたりします。ほかにも「CSSを縮小する」「HTMLを縮小する」「JavaScriptを縮小する」など、いろいろとカスタマイズをしていたり、ファイル内にコメントや改行が多くあると指摘されますね。

WordPress に詳しくない人だったら、ファイルサイズを小さくするのはけっこう面倒です。

もし、自分で作ったテーマであれば、Online YUI Compressor などを使ってファイルサイズを圧縮すればいいのですが、配布されているテーマを利用している場合には、どうすればいいのかわからない人もおられるはずです。

このプラグインは、それらを簡単にやってくれます。

とくに「HTMLを縮小する」は、自分で改行をなくしたりコメントを消してしまうと、後々HTMLを書き換えたりする必要が出てきたときに、かなり面倒です。「HTMLを縮小する」は自分でやるよりプラグイン任せのほうが手間が少ないでしょう。

インストール方法

管理画面の「プラグイン」→「新規追加」で「Autoptimize」を打ち込んで検索します。

「Autoptimize」プラグインを追加

インストールして有効化するだけです。また、公式ページからダウンロードすることもできます。

WordPress › Autoptimize « WordPress Plugins

Autoptimize Settings(標準設定)

管理画面のメニュー「設定」に「Autoptimize」が加わっていますのでこちらをクリックして設定画面に行きます。設定方法は簡単です。必要な箇所にチェックをしていくだけです。

Autoptimize

HTML Options

  • Optimize HTML Code?(HTML を最適化するか)
  • Keep HTML comments?(コメントを残すか)

JavaScript Options

  • Optimize JavaScript Code?(JavaScript を最適化するか)

CSS Options

  • Optimize CSS Code?(CSS を最適化するか)
  • Generate data: URIs for images?(Data URI scheme を使うか)

CDN Options

  • CDN Base URL(コンテンツデリバリーネットワークを利用するか)

基本的には標準のままで設定を変更する必要はありません。すべての設定が終わったら「Save Changes and Empty Cache」をクリックして、設定の変更とそれまでに保存したキャッシュを削除します。あとは自動的に複数のファイルを連結し、それらのファイルを圧縮するなど、最適化処理を施してくれます。

WordPress テーマに含まれる JavaScript や CSS によっては表示が崩れることがあるので、各々にチェックを入れては表示を確認して、調整していくといいでしょう。

Show advanced settings(詳細設定)

JavaScript と CSS、それにキャッシュについては詳細設定で調整することも可能です。上部にある「Show advanced settings」をクリックして詳細設定を開きましょう。

JavaScript Options にチェックを入れて不具合が出たら

当ブログではJavaScript にチェックを入れると投稿記事の真ん中あたりにあるAmazon の広告が画面上部に移動したり、サイズがおかしくなったりといった不具合が発生しました。

ただ、ここで諦めるのはまだ早い!

当ブログでは JavaScript が問題だったので、以下の項目全部にチェックマークを入れてみました。

Autoptimizeの詳細

Optimize JavaScript Code?

1番上は JavaScript ファイルサイズを圧縮するかどうか。これは必ずチェックを入れておきます。

Force JavaScript in <head>?

2番目の注意書きによれば、

For performance reasons it is better to include JavaScript at the bottom of HTML, but this sometimes breaks things. Especially useful for jQuery-based themes. (パフォーマンス上の理由から、HTML の下部に JavaScript を含めることをお勧めしますが、これは時々不具合を引き起こします。とくに jQuery のベースのテーマには有用です。)

ということです。こちらにもチェックマークを入れました。

Look for scripts only in <head>?

3番目は<head>内にある JavaScript にだけ最適化処理を適用するか、です。

Mostly usefull in combination with previous option when using jQuery-based templates, but might help keeping cache size under control. (jQuery ベースのテンプレートを使用している場合には、前のオプションと組み合わせておくと概ね有用です。コントロール下でキャッシュサイズを維持するのに役立つかもしれません。)

まとめたりファイルサイズを圧縮したいのは、WordPressが自動でヘッダー内に出力するプラグインなどですから、こちらも有効化。

Exclude scripts from Autoptimize:

4番目はプラグインで最適化処理をしないものを選ぶ除外項目ですが、これは何となく変更しないほうがよさそうな匂いがプンプンするので、放置しています。

Add try-catch wrapping?

最後の「Add try-catch wrapping?」については、こう書かれています。

If your scripts break because of an script error, you might want to try this. (スクリプトエラーによって壊れるならば、これを試してみるとよいかもしれません。)

これもチェックすることにしました。「try-catch 文」については、まだ JavaScript に詳しくないため、以下などを参考にしてください。

JavaScript try-catch文 – Wikibooks

 

ということで、全部にチェックを入れたところ、表示も崩れることなく、JavaScript も正常に機能していました。

CSS Options

CSS ファイルについても細かな調整をすることができます。

Autoptimize Options CSS

Optimize CSS Code?

こちらはチェックを入れておきます。外していると以下の項目も使用できなくなります。

Generate data: URIs for images?

画像を外部参照させて表示させるのではなく「Data URI scheme」によって表示させるのであれば、こちらにチェックを入れておきます。これについては当ブログではやっていないので、以下のリンクだけを貼っておきます。

Data URI scheme – Wikipedia

Look for styles only in <head>?

最適化するスタイルシートを<head>…</head>内に限るときにチェックを入れておきます。

Inline and Defer CSS?

インライン化したい CSS をここに書いておきます。たとえば、全体に関わるもの(背景色など)や「Avobe the Fold(ファーストビュー)」に該当する要素を入れておいくといいかもしれません。ただし、この内容を大きくし過ぎると HTML のサイズが大きくなりすぎて、サイトの表示速度が遅くなる原因になってしまう場合があります。

CSS の配信を最適化する – PageSpeed Insights — Google Developers

Inline all CSS?

もし、スタイルシートの内容が少ないようなら全ての要素をインライン化してもいいかもしれません。しかし、WordPress で作られたサイトの多くで、インライン化できるほど少ない CSS の少ないテーマはほとんどないでしょうから、これは使わなくていいはずです。

Exclude CSS from Autoptimize:

除外項目です。当ブログでは何も追加していません。

Cache Info

このプラグインのありがたいところはファイルの連結・圧縮だけでなくてキャッシュ処理もしてくれることです。しかも、キャッシュの不具合に対処するオプションも備わっています。

Autoptimize Options Cache Info の項目

キャッシュ情報が表示

上3点でキャッシュされているフォルダやキャッシュの数などが表示されています。画像ではキャッシュの数が「135」になっています。

Save aggregated script/css as static files?

もし、うまくキャッシュが働かない場合には、こちらにチェックを入れると機能するかもしれません。

By default files saved are static css/js, uncheck this option if your webserver doesn’t properly handle the compression and expiry. (保存されたデフォルトのファイルは静的なCSS / JSなので、あなたの Web サーバーが適切に圧縮とキャシュの有効期限を処理しない場合は、このオプションをオフにします。)

何も入れない状態であれば最適化されたファイルは「●●●.php」というファイルで出力されます。チェックを入れた場合には「●●●.css」「●●●.js」という静的ファイルで出力されるようになります。

最適化の結果

PageSpeed Insights で再検証してみると、以下のようになりました。【プラグイン無し】と【プラグインあり】とで比較してみます。

【プラグイン無し】

PageSpeed Insights の結果【プラグイン無し】

ご覧のように、プラグインの導入前には「習性を考慮」として以下の点が指摘されています。

  • レンダリングをブロックしている JavaScript:2つ
  • 最適化されていない CSS 配信:5つ
  • ファイルサイズの大きい CSS:1つ
  • ファイルサイズの大きい HTML:1つ

ちなみに、これはすでにエックスサーバー社の「mod_pagespeed設定」によってサーバーの側で Google のサイト表示高速化ツールをインストールした状態です。それがなければ、もっと数は増えていたはずですし、スコアももっと低かったと思います。

エックスサーバーの 「mod_pagespeed設定」で Google のサイト高速化ツールをインストールしよう! | WordPress & Lifelog

では、次にプラグインを有効化した結果を出してみます。

【プラグインあり】

PageSpeed Insights の結果【プラグインあり】

「修正を考慮」の指摘が、ほとんどなくなっていることに気づきます。問題点として表示されているのが、

  • 最適化されていない CSS 配信:1つ

だけになりました。よく見るとファイル名が「●●●.php」となっています。うまく複数のファイルを連結・圧縮できているようですね。

その他の項目である CSS・HTML・JavaScript はすべて「ルールに合格」とあるので、プラグインによって最適化されていることがわかります。スコアも85から90へとアップしました。

さいごに

このように、「Autoptimize」は簡単に複数のファイルをまとめて圧縮してくれるプラグインです。キャッシュ機能もついていて便利です。似たような機能を持つプラグインに「Head Cleaner」や「W3 Total Cache」などがありますが、それらでデザインが崩れたり、JavaScript がうまく働かないようでしたら「Autoptimize」を利用することをおすすめします。

関連記事