【Autoptimize】CSSを縮小化するAutoptimizeの基本設定　誰でも簡単！

AutoptimizeはWordpressのプラグインで、CSSを縮小化する機能があります。
Autoptimizeには大きく分けて、基本設定と高度な設定がありますが、初心者でも簡単に設定でき利用も安心なのは基本設定でしょう。

 
基本設定の設定項目の中にCSSを縮小化に関する設定があり、初心者でも簡単に利用できるようになっています。

 
CSSを縮小化するAutoptimizeの基本設定について簡単でわかりやすく、詳しく紹介しています。

CSSを縮小化するAutoptimizeの基本設定とは

Autoptimizeの基本設定の内、CSSに関する設定では、CSSの縮小化・最適化に関する設定を行う事が出来ます。
CSSに関する設定では、次のような設定を行う事が出来ます。

• CSSのソースコードの縮小化を有効にするか
• CSS に含まれる画像の URL を、データスキーマ URI に変換するか

 
それぞれの設定について具体的に見ていきましょう。

CSSのソースコードの縮小化を有効にするか

CSSのソースコードの縮小化を有効にするかでは、CSSのソースコード上の余分な空白や、改行、コメント等を削除する事によって、CSSファイルを縮小化・最適化します。

 
CSSもJavaScriptやHTMLと同様に、処理には関係のないスペースや、改行、コメントが入っている事によって、ファイル容量が肥大化します。
ファイルが肥大化すると通信容量が大きくなり、結果的にブログの表示スピードを落としてしまうので、CSS上の余計な空白についても削除しておいた方が良いです。

 
CSSのソースコードの縮小化を有効にするかどうかは「Optimize CSS Code?」のチェックボックスにチェックを入れるとCSSのコードが縮小化され、チェックを外すとCSSコードの縮小化は無効になります。

 
画像の例では、CSSのソースコードの縮小化を有効化しています。

CSS に含まれる画像の URL を、データスキーマ URI に変換するか

CSS に含まれる画像の URL を、データスキーマ URI に変換するかでは、CSSに含まれている画像のURLをFirefox、Safari、Opera などのデータスキーマURIに対応するブラウザからアクセスがあった場合にCSS内の画像ファイルをデータスキーマURIに変換して、HTTPリクエストを減らす事でブログパフォーマンスを向上させます。

 
CSSに含まれる画像のURLをデータスキーマURIに変換するには「Optimize CSS Code?」のチェックボックスにチェックを入れると有効化され、チェックを外すと無効化されます。

 
画像の例では、データスキーマURIを使う設定になっています。
 

CSSを縮小化するAutoptimizeの基本設定　誰でも簡単！を読むうえで知っておきたい知識

CSSを縮小化するAutoptimizeの基本設定　誰でも簡単！を読む上で知っておきたい事について紹介します。
何かに困った時に他の方法を思いついたり、用語がわからなくて読みづらいと感じた場合は、これから紹介する事を参考にしてみてください。

HTML・JavaScript・CSSを縮小するプラグイン　Autoptimize

AutoptimizeはWordpressのプラグインの一つで、HTMLやCSS、JavaScriptといったリソースを縮小化し、ブログのパフォーマンスを上げてくれるキャッシュ系プラグインの一つです。

 
通常、ブログ運営者が作成するHTMLやCSS、JavaScriptはブラウザの表示には直接関係ない改行や余計な余白などが沢山使われていて、ブラウザの表示という観点からすると無駄にファイル容量が大きくなっています。

 
無駄にファイル容量が大きくなると、ブログを訪問しに来た閲覧者のモバイルや、パソコンに無駄な通信容量を使わせる事になるため、ブログのパフォーマンスが低下してしまうのです。

 
Autoptimizeは、Wordpressのブログを表示する上で直接関係の無い、スペースや改行などを削除し、縮小化する事で、訪問者のモバイルやパソコンに負担を掛けないようにしてパフォーマンスを上げる事に繋がります。

 
AutoptimizeはWordpressのプラグインなので、新規のプラグイン追加の手順でWordpressにインストールすることが出来ます。
インストールした後はプラグインの有効化をする事を忘れないようにしましょう。

 
Autoptimizeのインストールは次の手順が主流です。

• Wordpressのプラグインの「プラグインを追加」の画面で「Autoptimize」と検索する
• 検索で表示された「Autoptimize」を「いますぐインストール」ボタンを押してインストール

 
Autoptimizeの設定についてみていきましょう。
AutoptimizeはWordpressのブログ運営者の技術的な知識や理解度などから大きく分けると二つの設定を行う事が出来ます。

• Autoptimizeの基本的な設定(初心者向け)
• Autoptimizeの高度な設定(理解の深い技術者向け)

Autoptimizeの基本的な設定では、Autoptimizeを導入したWordpress上のHTML・CSS・JavaScriptの縮小化をするかどうかの設定を行う事が出来ます。

 
Autoptimizeの基本的な設定で行える事は次の通りです。

• HTMLに関する設定
• JavaScriptに関する設定
• CSSに関する設定

Autoptimizeの高度な設定ではAutoptimizeを導入したWordpress上のHTML・CSS・JavaScriptの縮小化をするかどうかの設定に加え、JavaScriptやCSSに対して、縮小化の上で除外したい内容などについて設定することが出来ます。

 
Autoptimizeの高度な設定は、設定画面の「Show advanced settings」ボタンを押すと表示されます。
もし「Hide advanced settings」ボタンが表示されている場合は、すでに高度な設定を行う設定画面になっています。

 
基本的な設定では、全てのJavaScriptやCSSに縮小化が有効されるのに対し、縮小化の影響で動作が不安定になってしまったりする場合に高度な設定を行うと解決する事があります。

 
Autoptimizeの高度な設定として行う事が出来る設定は次の通りです。

• HTMLに関する設定
• JavaScriptに関する設定
• CSSに関する設定

Autoptimizeの設定は、HTML、JavaScript、CSSの設定がありますので、それぞれのお勧めの設定について紹介していきます。
なお、Autoptimizeの設定は、「高度な設定」の設定画面に切り替え設定していきますので、高度な設定である事を念頭に設定内容を参考にしてください。

 
Autoptimizeのオススメの設定については次の順番で紹介していきます。

• HTML
• JavaScript
• CSS

 
AutoptimizeにおけるHTMLのお勧めの設定について紹介します。
AutoptimizeのHTMLのお勧めの設定は次の通りです。

• Optimize HTML Code?　：　ON
• Keep HTML comments?　：　OFF

 
次にJavaScriptのお勧めの設定についてみていきましょう。
AutoptimizeのJavaScriptのお勧めの設定は次の通りです。

• Optimize JavaScript Code?：ON
• Force JavaScript in?：ON
• Look for scripts only in?：ON
• Exclude scripts from Autoptimize:：（任意）
• Add try-catch wrapping?：OFF

 
次はCSSのお勧めの設定についてみていきましょう。
AutoptimizeのCSSのお勧めの設定は次の通りです。

• Optimize CSS Code?：ON
• Generate data: URIs for images?：ON
• Look for styles only in?：OFF
• Inline and Defer CSS?：OFF
• Inline all CSS?：OFF
• Exclude CSS from Autoptimize：(任意)

 
HTML・CSS・JavaScriptを縮小するプラグイン Autoptimizeについては「【WordPress】HTML・CSS・JavaScriptを縮小するプラグイン Autoptimize」で簡単でわかりやすく、更に詳しく紹介しているので興味のある人はチェックしていってください。

Autoptimizeの基本的な設定

Autoptimizeの基本的な設定では、Autoptimizeを導入したWordpress上のHTML・CSS・JavaScriptの縮小化をするかどうかの設定を行う事が出来ます。

 
Autoptimizeの基本的な設定で行える事は次の通りです。

• HTMLに関する設定
• JavaScriptに関する設定
• CSSに関する設定

 
Autoptimizeの基本設定の内、HTMLに関する設定では、HTMLの縮小化に関する設定を行う事が出来ます。
HTMLに関する設定では、次のような設定を行う事が出来ます。

• HTMLソースコードの縮小化を有効にするか
• HTMLソースコード上に記述されているコメントを残すか

 
Autoptimizeの基本設定の内、JavaScriptに関する設定では、JavaScriptの縮小化に関する設定を行う事が出来ます。
JavaScriptに関する設定では、次のような設定を行う事が出来ます。

• JavaScriptのソースコードの縮小化を有効にするか

 
Autoptimizeの基本設定の内、CSSに関する設定では、CSSの縮小化・最適化に関する設定を行う事が出来ます。
CSSに関する設定では、次のような設定を行う事が出来ます。

• CSSのソースコードの縮小化を有効にするか
• CSS に含まれる画像の URL を、データスキーマ URI に変換するか

 
Autoptimizeの基本的な設定については「【Autoptimize】Autoptimizeの基本的な設定　初心者でも簡単！」で簡単でわかりやすく、詳しく解説しているのでチェックしていってください。

CSSを縮小化するAutoptimizeの基本設定　誰でも簡単！　あとがき

CSSを縮小化する事でわずかながらでもファイルの容量が削除される事によってブログのパフォーマンスが少しずつ改善されていく事になります。
一つ一つは大きな改善にはつながらないかもしれませんが、積み重ねる事で大きな改善となると言ったイメージでしょうか。

CSSを縮小化する事もその一つで他にもHTMLやJavaScriptを縮小化する事によって、全体で大きな容量の削減をする事が出来ます。
全体的な容量が削減されれば、サーバにかける負担も小さくなりますし、総合的なパフォーマンスはやはり上がる事になるでしょう。

もちろん総合的なパフォーマンスが上がる事によって、SEOの効果も高くなるのでブログのパフォーマンス改善にも積極的に取り組んでいきたいものですね。

CSSを縮小化し、快適なWordpressライフを送っていきましょう。
 

CSSを縮小化するAutoptimizeの基本設定　誰でも簡単！　まとめ

Autoptimizeの基本設定の内、CSSに関する設定では、CSSの縮小化・最適化に関する設定を行う事が出来ます。
CSSに関する設定では、次のような設定を行う事が出来ます。

• CSSのソースコードの縮小化を有効にするか
• CSS に含まれる画像の URL を、データスキーマ URI に変換するか

 
CSSのソースコードの縮小化を有効にするかでは、CSSのソースコード上の余分な空白や、改行、コメント等を削除する事によって、CSSファイルを縮小化・最適化します。

 
CSSもJavaScriptやHTMLと同様に、処理には関係のないスペースや、改行、コメントが入っている事によって、ファイル容量が肥大化します。
ファイルが肥大化すると通信容量が大きくなり、結果的にブログの表示スピードを落としてしまうので、CSS上の余計な空白についても削除しておいた方が良いです。

 
CSS に含まれる画像の URL を、データスキーマ URI に変換するかでは、CSSに含まれている画像のURLをFirefox、Safari、Opera などのデータスキーマURIに対応するブラウザからアクセスがあった場合にCSS内の画像ファイルをデータスキーマURIに変換して、HTTPリクエストを減らす事でブログパフォーマンスを向上させます。

 
最後までお読みいただきありがとうございました。