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

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

 

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

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

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

 

 

 

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

 

 

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

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

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

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

 

 

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

 

 

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

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

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

 

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

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

 

HTMLオプション

 

 

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

 

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

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

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

 

HTMLコメントを残す

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

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

 

 

JavaScriptオプション

 

 

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

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

 

 

Advertisement

 

 

JSファイルを集計しますか?

この部分は正直あまりよく理解できていませんが、外部から読み込ませるScriptファイルを作っておいてリンクさせた時のことだと思うのですが、試しにチェックを「あり」「なし」両方でPageSpeed insigtsで確認してみたところ、チェックありが私のサイトだと最適化スコアが上がってたのでチェックを入れてます。

特にチェックなしでも大丈夫な部分です。

 

CSSオプション

 

 

  • CSSコードを最適化
  • CSSファイルを集計しますか?
  • インラインのCSSを連結

 

上記3か所にチェックを入れて、CSSを縮小してHTMLのCSSを連結します。

 

その他のオプション

 

 

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

 

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

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

 

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

 

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

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

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

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

 

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

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

 

 

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

 

 

まとめ

 

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

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

設定のチェック項目を色々いじってみましたが、今回のAutoptimize設定方法が最も最適な設定だったので参考になればと思います。

 

 

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