どうしたらいいのNAVI

どうしたらいいの?にお答えするサイト

【Autoptimize】CSSを縮小化するAutoptimizeの高度な設定

      2015/11/07


AutoptimizeはWordpressのプラグインで、CSSを縮小化する機能があります。
Autoptimizeには大きく分けて、基本設定と高度な設定がありますが、より詳細に設定をする事が出来るのは高度な設定です。

 
高度な設定の設定項目の中にCSSを縮小化に関する設定があり、Wordpressやプラグインに理解がある人が操作するとAutoptimizeを利用する事によって起きる様々な弊害を解消する事が出来ます。

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

 

 
【Autoptimize】CSSを縮小化するAutoptimizeの高度な設定

 

CSSを縮小化するAutoptimizeの高度な設定とは

CSSを縮小化するAutoptimizeの高度な設定とは
Autoptimizeの基本設定の内、CSSに関する設定では、CSSの縮小化・最適化に関する設定に加え、ヘッダーだけを縮小化の対象にしたり、CSSをインライン化したりする設定等を行う事が出来ます。

 
CSSに関する設定では、次のような設定を行う事が出来ます。

  • CSSのソースコードの縮小化を有効にするか
  • CSS に含まれる画像の URL を、データスキーマ URI に変換するか
  • <head>内のCSSだけ縮小化するか
  • Autoptimizeで作成されるCSSを遅延読み込みさせるか
  • 全てのCSSをインライン化して読み込むか
  • Autoptimizeで縮小化の対象外にするCSSの指定

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

 

 

 

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

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

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

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

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

 

 

 

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

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

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

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

 

 

 

<head>内のCSSだけ縮小化するか

<head>内のCSSだけ縮小化するか
<head>内のCSSだけ縮小化するかの設定では、ヘッダー内に記述されているCSSだけ縮小化するかどうかを設定する事が出来ます。
CSSをインライン化している場合で、ヘッダー内のCSSだけ縮小化したい場合などに使用すると良いでしょう。

 
プラグイン的には設定を有効化する事が推奨されていませんが、Autoptimizeで複数のCSSを縮小化し一つのファイルにしたことによって作成されるキャッシュファイルが余りにも大きく読み込みに時間がかかる場合などに使用すると効果があるようです。

 
<head>内のCSSだけ縮小化するかは「Look for styles only in <head>? (deprecated)」のチェックボックスにチェックを入れるとヘッダー内のCSSだけ縮小化され、チェックを外すと全体のCSSが縮小化の対象となります。

 
画像の例では、ヘッダー以外のCSSも縮小化の対象としています。

 

 

 

Autoptimizeで作成されるCSSを遅延読み込みさせるか

Autoptimizeで作成されるCSSを遅延読み込みさせるか
Autoptimizeで作成されるCSSを遅延読み込みさせるかどうかの設定ではAutoptimizeによって縮小化されたCSSを縮小化の対象外としたCSSよりも後にロードするかどうかを設定する事が出来ます。

 
CSSも読み込みを行っている時は画面表示のレンダリングをブロックしてしまう為、遅延読み込みをする事によって画面のレンダリングをブロックせずスムーズにブラウザがWordpressの記事を表示する事が出来、パフォーマンスが向上します。

 
Autoptimizeで作成されるCSSを遅延読み込みさせるかどうかは「Inline and Defer CSS?」のチェックボックスにチェックを入れると遅延読み込みされ、チェックを外すと同期読み込みになります。
チェックする事で表示されるテキストエリアには実際に遅延読み込みをさせるCSSの内容を記載します。

 
画像の例では、CSSを遅延読み込みしない設定になっています。
 

 

 

全てのCSSをインライン化して読み込むか

全てのCSSをインライン化して読み込むか
全てのCSSをインライン化して読み込むかの設定を有効にする事で、HTML上で読み込まれるCSSファイルをすべてHTML上に展開するようになります。

 
全てのCSSをインライン化して読み込むかは「Inline all CSS?」にチェックを入れるとCSSがすべてHTML上に展開され、チェックを外すとインライン化は無効となります。

 
画像の例では、すべてのCSSをインライン化して読み込む設定になっています。
 

 

 

Autoptimizeで縮小化の対象外にするCSSの指定

Autoptimizeで縮小化の対象外にするCSSの指定
Autoptimizeで縮小化の対象外にするCSSの指定では、Autoptimizeの機能で縮小化しないCSSを指定する事が出来ます。
Autoptimizeで縮小化の対象外にするCSSとしてデフォルトでは次のCSSがデフォルトで設定されています。

  • admin-bar.min.css
  • dashicons.min.css

 
Autoptimizeで縮小化したことで画面のレイアウトが崩れた場合には、レイアウトに関わるCSSを対象外に指定する事で問題が解決します。

 
画像の例ではデフォルトで指定されているCSSのみAutoptimizeの対象外としています。
 

 

 

 

スポンサーリンク


CSSを縮小化するAutoptimizeの高度な設定を読むうえで知っておきたい知識

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

 

 

 

HTML、CSS、javaScriptを縮小するプラグイン Autoptimize

【Wordpress】HTML・CSS・JavaScriptを縮小するプラグイン 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の高度な設定ではAutoptimizeを導入したWordpress上のHTML・CSS・JavaScriptの縮小化をするかどうかの設定に加え、JavaScriptやCSSに対して、縮小化の上で除外したい内容などについて設定することが出来ます。

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

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

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

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

 

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

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

 

Autoptimizeの高度な設定の内、JavaScriptに関する設定では、JavaScriptの縮小化に関する設定に加え、ヘッダー内のJavaScriptだけを対象にするかなどの設定を行う事ができます。

 
JavaScriptに関する設定では、次のような設定を行う事が出来ます。

  • JavaScriptのソースコードの縮小化を有効にするか
  • JavaScriptのコードを強制的に<head>に移動させるか
  • <head>内のJavaScriptだけ対象にするか
  • 縮小化の対象外にするJavaScriptの指定
  • 処理対象にしたJavaScriptにtry/catchを使うか

 

Autoptimizeの基本設定の内、CSSに関する設定では、CSSの縮小化・最適化に関する設定に加え、ヘッダーだけを縮小化の対象にしたり、CSSをインライン化したりする設定等を行う事が出来ます。

 
CSSに関する設定では、次のような設定を行う事が出来ます。

  • CSSのソースコードの縮小化を有効にするか
  • CSS に含まれる画像の URL を、データスキーマ URI に変換するか
  • <head>内のCSSだけ縮小化するか
  • Autoptimizeで作成されるCSSを遅延読み込みさせるか
  • 全てのCSSをインライン化して読み込むか
  • Autoptimizeで縮小化の対象外にするCSSの指定

 
Autoptimizeの高度な設定については「【Autoptimize】Autoptimizeの高度な設定 より使えるようにする設定」で簡単でわかりやすく、詳しく解説しているのでチェックしていってください。


 

 

 

 

CSSを縮小化するAutoptimizeの高度な設定 あとがき

CSSを縮小化するAutoptimizeの高度な設定 あとがき
CSSを縮小化するAutoptimizeの高度な設定について紹介しました、Autoptimizeの高度な設定ではより高度で詳細な設定を行う事が出来ましたね。

 
縮小化する事でレイアウトが崩れてしまった場合は、原因になるCSSを除外する事で問題が解決する事があるので、何か不具合が起こった場合は縮小化の対象外とする等の対処が高度な設定では出来ます。

 
プラグインを使っていると「ここは仕方ないかなぁ・・・」とブログのレイアウトの仕様を変更を余儀なくされる事もありますが、高度な設定で回避できるところは回避していきたいですよね。

 
設定的に専門的な物もありましたが、ワードプレスのプラグインを管理したり調べたりしているうちに自然と「あっこれはこういうことだったのか」と理解する日が来るのであきらめず設定と向き合っていく事も運営者としては重要なポイントですね。

 
CSSを縮小化するAutoptimizeの高度な設定で、安全なワードプレスライフを送っていきましょう。

 

 

 

 

CSSを縮小化するAutoptimizeの高度な設定 まとめ

CSSを縮小化するAutoptimizeの高度な設定 まとめ
Autoptimizeの基本設定の内、CSSに関する設定では、CSSの縮小化・最適化に関する設定に加え、ヘッダーだけを縮小化の対象にしたり、CSSをインライン化したりする設定等を行う事が出来ます。

 
CSSに関する設定では、次のような設定を行う事が出来ます。

  • CSSのソースコードの縮小化を有効にするか
  • CSS に含まれる画像の URL を、データスキーマ URI に変換するか
  • <head>内のCSSだけ縮小化するか
  • Autoptimizeで作成されるCSSを遅延読み込みさせるか
  • 全てのCSSをインライン化して読み込むか
  • Autoptimizeで縮小化の対象外にするCSSの指定

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

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

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

 
<head>内のCSSだけ縮小化するかの設定では、ヘッダー内に記述されているCSSだけ縮小化するかどうかを設定する事が出来ます。
CSSをインライン化している場合で、ヘッダー内のCSSだけ縮小化したい場合などに使用すると良いでしょう。

 
プラグイン的には設定を有効化する事が推奨されていませんが、Autoptimizeで複数のCSSを縮小化し一つのファイルにしたことによって作成されるキャッシュファイルが余りにも大きく読み込みに時間がかかる場合などに使用すると効果があるようです。

 
Autoptimizeで作成されるCSSを遅延読み込みさせるかどうかの設定ではAutoptimizeによって縮小化されたCSSを縮小化の対象外としたCSSよりも後にロードするかどうかを設定する事が出来ます。

 
CSSも読み込みを行っている時は画面表示のレンダリングをブロックしてしまう為、遅延読み込みをする事によって画面のレンダリングをブロックせずスムーズにブラウザがWordpressの記事を表示する事が出来、パフォーマンスが向上します。

 
全てのCSSをインライン化して読み込むかの設定を有効にする事で、HTML上で読み込まれるCSSファイルをすべてHTML上に展開するようになります。

 
Autoptimizeで縮小化の対象外にするCSSの指定では、Autoptimizeの機能で縮小化しないCSSを指定する事が出来ます。
Autoptimizeで縮小化の対象外にするCSSとしてデフォルトでは次のCSSがデフォルトで設定されています。

  • admin-bar.min.css
  • dashicons.min.css

 
Autoptimizeで縮小化したことで画面のレイアウトが崩れた場合には、レイアウトに関わるCSSを対象外に指定する事で問題が解決します。

 

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

スポンサーリンク





 - Wordpress , , , ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

【Wordpress開発環境】レンタルサーバからローカル環境にWordpressをコピーし開発環境構築!
【WordPress開発環境】レンタルサーバからローカル環境にWordPressをコピーし開発環境構築!

WordPressをレンタルサーバーを借りてブログ運営していると「レンタルサーバ …

【Quick Adsense】Quick Adsenseで広告を掲載する設定と使い方
【Quick Adsense】Quick Adsenseで広告を掲載する設定と使い方

WordPressをブログを運営し、広告掲載の上でQuick Adsenseを導 …

【Wordpress開発環境】開発環境構築で必要なXamppの設定
【WordPress開発環境】開発環境構築で必要なXamppの設定

WordPressでテーマやプラグインの開発を進めるには、自分のパソコン上で開発 …

【W3 Total Cache】オブジェクトキャッシュ(Object Cache)を設定しよう!
【W3 Total Cache】オブジェクトキャッシュ(Object Cache)を設定しよう!

キャッシュ系プラグインとしてW3 Total Cacheを利用している人はオブジ …

【Wordpress】データベースをバックアップしよう! 目的や方法について
【WordPress】データベースをバックアップしよう! 目的や方法について

WordPressでブログを運営する上ではデータの保全性もとても重要ですよね。 …

【Quick Adsense】画像の後に広告を自動挿入するQuick Adsenseの設定
【Quick Adsense】画像の後に広告を自動挿入するQuick Adsenseの設定

画像の後に広告を掲載したいな~なんて考えている人も居るのではないでしょうか。 ブ …

【Wordpress】プラグインを整理しなければならない理由 ユーザと自分の為に
【WordPress】プラグインを整理しなければならない理由 ユーザと自分の為に

WordPressのプラグインはとても便利ですよね。 このブログでもWordpr …

【Stinger5】Stinger5でGoogle Adsenseの広告を貼る方法
【Stinger5】Stinger5でGoogle Adsenseの広告を貼る方法

WordPressでブログ運営している人で、テーマにStinger5を使っている …

【Wordpress】おすすめテーマのカスタマイズ方法
【WordPress】おすすめテーマのカスタマイズ方法

WordPressでは、デザインも秀逸で派手な物やシンプルな物、機能的に優れてい …

【Wordpress開発環境】Eclipseで開発をスムーズにするオススメの設定
【WordPress開発環境】Eclipseで開発をスムーズにするオススメの設定

WordPressの開発環境として統合開発環境のEclipseを利用している人も …