HTMLとCSS、JavaScriptを縮小し最適化するプラグイン【Autoptimize】

今回はHTMLとCSSとJavaScriptを縮小し最適化するプラグイン【Autoptimize】を紹介しておきます。

このプラグインを利用する事でCSSだけでなく、HTMLやJavaScriptも縮小させてさらにページの表示速度を上げる事ができます。今回はプラグインを有効化して設定をすれば終了という簡単な作業です。

スポンサーリンク

プラグインAutoptimizeのインストールと有効化

このプラグイン「Autoptimize」ではHTML、CSS、JavaScriptを縮小化して最適化してくれます。しかも設定も簡単なのでおすすめです。ただ、環境によって効果も違ってくるかもしれませんので、プラグインをインストールする前に「PageSpeed Insights」と「GTmetrix」で表示速度のスコアを確認しておき、プラグインを入れて設定した後でもう一度スコアを計測して比べてみるといいかもしれませんね。

具体的にどの辺が縮小されるのか?という部分ですが、ブログを開いて右クリックで「ページのソースを表示」をクリックすると通常はこんな感じのソースになってます。

autoptimize-5

↓↓このソースがこんな感じに圧縮されるわけです。

autoptimize-4

余計なスペースとかコメントとかをギュウギュウ詰め込むって感じです。もちろんプラグインを停止すると元に戻す事もできます。

インストールと有効化はいつもどおり。プラグインの新規追加で「Autoptimize」を検索してインストール、有効化します。

autoptimize-1

プラグインの有効化ができたら設定をしていきましょう。

Autoptimizeの設定

WordPressの管理画面から「設定」⇒「Autoptimize」を選択します。

autoptimize-2

「Autoptimize」の設定はシンプルです。

autoptimize-6

  • Optimize HTML Code?:HTMLを縮小し、最適化しますか?
  • Keep HTML comments?:HTML内のコメントをも最適化やっちゃいます?

autoptimize-7

  • Optimize JavaScript Code?:JavaScriptを最適化します?

利用しているJavaScriptによっては最適化する事で上手く動かないものがあるかも知れませんので、設定後に確認して下さい。上手く動かないものがあればこのチェックは外します。

※私のサイトの場合は不具合が出たので、「Optimize JavaScript Code?」のチェックは外してます。

autoptimize-8

  • Optimize CSS Code?:CSSを縮小し最適化します?
  • Generate data: URIs for images?:CSSに背景画像を埋め込む?

この2つ目の「Generate data」の部分はよく分からないのですが、一応チェックを入れてます。もしこの設定にして表示のおかしい部分が出てきたらこのチェックは外しましょう。

autoptimize-9

「CDN Options」は使わないのでここは空欄にしてます。

全ての設定が完了したら、「Save Changes and Empty Cache」をクリックして、設定の保存とキャッシュのクリアをしておきましょう。

autoptimize-10

以上で設定は完了です。後は冒頭で解説したようにページスピードのスコアを比べてみて下さいね。
WordPress高速化まとめページ

にほんブログ村 小遣いブログ アフィリエイトへ
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA