Autoptimize 設定してHTML、CSS、JavaScriptを縮小する

Autoptimize 設定してHTML、CSS、JavaScriptを縮小する

 

AutoptimizeはWordPressでサイトの表示を高速化できるプラグインです。

サイトを表示したときの表示速度がAutoptimizeを使う事によって向上しますが、ではAutoptimizeで出来ることは何かというと、HTMLやCSS、JavaScriptを縮小することができます。

なんとなく「HTML、CSS、JavaScriptを縮小する」という事のイメージが分かりずらいかもしれません。

 

 

 

上記の画像は「HTML、CSS、JavaScript」を縮小する前のページソースを表示した画像です。

 

 

こっちの画像は、「HTML、CSS、JavaScript」をAutoptimizeで縮小後に同じページのソース表示をした画像です。

もう縮小がどんな感じか分かってもらえたかと思います。

単純にソースコード内にある余分なスペースとか改行を無くしてしまうことで、転送サイズを減らすことができ、表示速度が改善されるという事です。

このHTML、CSS、JavaScriptの縮小をしてくれるプラグインがAutoptimizeの設定でできます。

 

 

Autoptimizeインストール(高度な設定)

 

 

WordPressのダッシュボードプラグイン新規追加Autoptimizeインストール有効化

上記の進み方でAutoptimizeを有効化にして、Autoptimizeの設定から設定画面に進みます。

 

Autoptimizeをzipファイルでダウンロードする場合は下記からダウンロードできます。

 

 

Autoptimize ダウンロード

 

 

Autptimizeを設定する前の注意点ですが、設定後にサイトデザインが崩れたりする可能性があるようです。

 

必ずAutptimizをインストールする前や設定前にバックアップを取るようにしてください。

 

Autoptimizeの設定前にWordPressのバックアップをするならUpdraftPlusというプラグインが簡単に設定できるので良ければ参考にしてみてください。

 

HTMLオプションの設定

 

 

Autoptimize設定の「メイン」で「①高度な設定を表示をクリックします。画像は高度な設定が非表示になってますが、高度な設定を表示にした後の画像なのでクリックすると同じ画面になります。

 

②HTMLコードを最適化にチェック

ここにチェックを入れてHTMLを最適化します。(縮小・圧縮)

記事の冒頭でも説明しましたが、HTMLコードの改行やスペースがなくなりサイトの表示速度が改善されるようになります。

 

HTMLコメントを残す

この部分は、HTMLコードを最適化してもHTMLコードに書いたコメントは残すかどうかの設定です。

コメントを残しておく場合はチェックを入れます。

 

 

JavaScriptオプションの設定

 

 

 

 

JavaScriptコードの最適化にチェックするとJavaScriptが縮小することができます。

HTMLの最適化と同じで改行やスペースをなくした分が縮小されます。

そしてチェックを入れたことでJavaScriptオプションの詳細を設定できるようになります。

 

 

Advertisement

 

 

Aggregate JS-files

 

JSファイルを集計しますか?という意味なのですが、この部分はJavaScriptファイルを集約します。

Aggregate JS-fileの設定をしない場合は集約されませんが縮小はされます。

試しにチェックを「あり」「なし」両方でPageSpeed insigtsで確認してみたところ、チェックありが私のサイトだと最適化スコアが上がってたのでチェックを入れるときもあります。

それぞれのサイトにより変化の違いが出ると思います。なので設定「あり」と「なし」を比較してみることをおすすめします。

 

 

インラインのjsを連結

 

HTMLに直接に書いて出力してるJavaScriptコードを抜き出してJavaScriptファイルと連結できます。

インラインで書いてるJavaScriptをファイルに連結させるのでAutoptimizeのキャッシュサイズが増加する場合もあります。

個人的にはキャッシュサイズを増やしたくないので設定にチェックは入れてません。

 

 

<head>内へJavaScriptを強制

 

チェックを入れるとJavaScriptを早めに読み込むことができる設定です。

ですがhead内でJavaScriptを読み込むとレンダリングブロックする可能性が高いのでチェックは入れてません。

 

 

Autoptimizeからスクリプトを除外

 

スクリプト除外設定では、先述したJavaScriptオプションの設定で最適化やjsの連結をしたファイルを個別に指定することで、Autoptimizeの最適化から除外してエラーを防ぐ設定です。

Autoptimizeからスクリプトを除外の設定横の入力ボックスに除外するスクリプトを入力して自動最適化から除外できます。

設定がややこしく思える場合は、ここの設定はそっとしておく方がいいです。

 

 

try-catchの折り返しを追加

 

この設定はAutoptimizeの設定の説明のままです。

スクリプトがjsエラーになってしまった場合にはtry-catchの折り返しを追加にチェックしてjsエラーが改善されるか試すときにチェックを入れます。

 

 

Advertisement

 

 

CSSオプションの設定

 

 

 

 

AutoptimizeのCSSオプションの設定では、まずCSSコードを最適化にチェックを入れます。

チェックを入れるとCSSコードの最適化ができます。

そしてCSSコード最適化の下にCSSオプションの項目が表示されるので設定を詳細にすることができます。

 

 

Aggregate CSS-files

 

Autoptimizeの設定Aggregate CSS-filesはCSSファイルを1つに集約して連結します。

CSSの縮小、そして連結ができるので多少の表示速度の改善ができます。

チェックを入れない場合はCSSファイルは1つに集約されませんが、CSS自体は縮小されます。

この設定も、それぞれCSSを1つにまとめた場合と、CSSをまとめないで縮小しただけの設定をサイト速度の計測で比較して見ることをおすすめします。

 

 

インラインのCSSを連結

 

HTMLに直接書いてるCSS、インラインのCSSを先述したAggregate CSS-filesの設定と一緒に設定することで設定できます。

Aggregate CSS-filesを設定した場合には一緒にインラインCSSも連結されるので設定しておくとCSSがコンパクトになります。

 

 

データを生成:画像をURL化

 

通常は画像を個別にダウンロードしますが、画像をURL化することでリクエスト回数を減らすことができる設定です。

Autoptimizeのデータ生成:画像をURL化にチェックを入れると、画像がBase64という形式で画像が変換されてCSSに小さな背景画像を含めることができます。

ただ小さい画像なら効果はあるかもしれませんが、大きな画像になるとサイズ容量が増えたというときもあるので逆効果になる場合もある設定です。

なので個人的にはチェックしてない設定です。

 

 

CSSのインライン化と遅延

 

CSSを非同期で読み込みをしてくれるようですが、fold CSSを使って読み込みさせるようですし、AutoptimizeのCSSのインライン化と遅延の設定の説明を読むと有料のプラグインとの併用で効果が発揮されるようなので、設定は不要と思えます。

 

 

すべてのCSSをインライン化

 

設定の名前のそのままのような気もしますが、実際に設定してページのソースを確認したら、CSSがすべてインラインになって物凄く長いCSSになります。

ですがサイトによっては、すべてのCSSをインライン化するとパフォーマンスが上がることもあります。

個人的には、CSSのインライン化がすべてのCSSだと、ごちゃごちゃしすぎなので設定してないです。

 

 

AutoptimizeからCSSを除外

 

AutoptimizeのCSSオプションの項目で最適化したCSSの中で設定を除外したいCSSを個別に設定できます。

Autoptimizeの最適化の設定から除外したいCSSを入力ボックスに含めると、そのCSSは最適化から除外されます。

複数ある場合にはコンマ区切りで指定します。

 

 

キャッシュ情報

 

Autoptimizeの設定のキャッシュ情報が書いてあります。

 

  • 最適化したフォルダの場所
  • 書き込み権限
  • キャッシュしてるファイル数
  • キャッシュしてる合計KB

 

それなので、Autoptimizeの最適化の設定に直接は関係がない項目です。

 

 

Advertisement

 

 

その他のオプション

 

 

連結されたスクリプト/CSSを静的ファイルとして保存

 

デフォルトでチェックが入ってると思います。

AutoptimizeでCSSとJSファイルは1つにまとまると思いますが、そのファイルを保存します。でもサーバーとの不具合など出るようならチェックを外してください。

 

ログイン中のユーザーも最適化しますか?

 

Autoptimizeのここの設定はチェックを入れた状態と入れない状態でソース表示して試してみました。

結果はチェックを外すと、ログインしている自分自身はAutoptimizeで縮小したCSSやHTMLは縮小されなく、最適化はされていませんでした。

デフォルト設定ではチェックが入ってると思うのでチェックを入れておいて、サイトのページのソースを見やすい状態で確認するときに設定のチェックを外して使ってみると確認するソースが見やすくなります。

最後に、「設定を保存してキャッシュを削除」をクリックして保存します。

 

設定を保存したらPageSpeed Insightsで最適化の点数を見てみてください。

またPageSpeed Insigtsでサイト表示速度の改善をしたときの記事もあるので、何かの参考になればと思います。

 

 

Autoptimizeを設定したらサイトの速度を確認

 

 

まとめ

 

Autoptimizeの設定後には必ずサイトを表示してデザイン崩れや不具合が出ていないかを確認することは私は必須だと思っているので確認をするようにしてください。

もし、デザインが崩れたりする場合はAutoptimizeを停止してみることも必要です。

Autoptimizeの設定のチェック項目は細かいかもしれません。設定が難しいと思う場合、よくわからない設定が多い場合には

 

  • JavaScriptコードの最適化
  • CSSコードを最適化
  • HTMLコードを最適化

 

上記の3つにチェックしておくだけでも効果は期待できます。

WordPressプラグインカテゴリの最新記事