どうしたらいいのNAVI

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

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

      2015/11/07


AutoptimizeはWordpressのプラグインで、HTMLを縮小化する機能があります。
Autoptimizeには大きく分けて、基本設定と高度な設定がありますが、より詳細な設定を行いたいと思う人は高度な設定を使うと良いでしょう。

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

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

 

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

 

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

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

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

 
現行のAutoptimizeのバージョンでは基本的な設定も、高度な設定も同じ設定項目となっていて、プラグインの動作には違いはありません。
それぞれの設定について具体的に見ていきましょう。
 

 

 

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

HTMLソースコードの縮小化を有効にするか 高度な設定
HTMLソースコードの縮小化を有効にする事で、HTMLソースコード上の余計な空白や、改行を削除し、HTMLを可能な限り縮小化してくれます。
HTMLソースコードの縮小化を有効にするかどうかは「Optimize HTML Code?」のチェックボックスにチェックを入れると有効化され、チェックを外すと無効化されます。

 
HTMLの縮小化を有効にする事で、次の画像で紹介するように、HTMLコードが縮小化されている事がわかるかと思います。
HTMLソースコードの縮小化を有効にするか 例
 

 
ブラウザ上でソースコードを表示した場合は、読みづらいかと思いますが、余計な空白や改行が削除されているのでファイル容量自体は縮小化を行う前に比べて軽くなっています。

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

 

 

 

HTMLソースコード上に記述されているコメントを残すか

HTMLソースコード上に記述されているコメントを残すか 高度な設定
HTMLソースコード上に記述されているコメントを残すかでは、有効化するとHTMLの縮小化を行う際に、コメントの削除を行わないようにしてくれます。

 
HTMLソースコードのコメントを削除する事でHTML全体の容量が削減される事に繋がるのですが、例えば「Google Adsence」で広告を掲載している場合などコメントが無いと正常に動作しない場合などはコメントを残すように設定した方が良いでしょう。

 
ここで言うコメントは次のようなHTMLのことを言います。

 
HTMLソースコード状に記述されているコメントを残すかどうかは「Keep HTML comments?」のチェックボックスをチェックすると、コメントを残すようにし、チェックを外すとコメントも削除されるようになります。

 
画像の例では、HTMLソースコード状に記述されているコメントを残さない設定になっています。

 

 

 

 

スポンサーリンク


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

HTMLを縮小化するAutoptimizeの高度な設定を読むうえで知っておきたい知識
HTMLを縮小化する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の高度な設定 より使えるようにする設定」で簡単でわかりやすく、詳しく解説しているのでチェックしていってください。

 

 

 

 

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

HTMLを縮小化するAutoptimizeの高度な設定 あとがき
Autoptimizeの高度な設定で出来るHTMLの縮小の設定について解説しました。
Autoptimizeでは高度な設定であっても、基本的な設定であっても動作的には変わりはないようですね。

 
HTMLの縮小化の観点そのものがやはり空白の削除や改行の削除なので高度であっても基本的な設定であっても根本的な考え方に違いはないのでしょうね。

 
HTMLを縮小化してブログを少しでもパフォーマンスアップし、快適なワードプレスライフを送っていきましょうね。

 

 

 

 

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

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

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

 
HTMLソースコードの縮小化を有効にする事で、HTMLソースコード上の余計な空白や、改行を削除し、HTMLを可能な限り縮小化してくれます。
HTMLソースコード上に記述されているコメントを残すかでは、有効化するとHTMLの縮小化を行う際に、コメントの削除を行わないようにしてくれます。

 
HTMLソースコードのコメントを削除する事でHTML全体の容量が削減される事に繋がるのですが、例えば「Google Adsence」で広告を掲載している場合などコメントが無いと正常に動作しない場合などはコメントを残すように設定した方が良いでしょう。

 

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

スポンサーリンク





 - Wordpress , , , ,

Message

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

  関連記事

【Wordpressプラグイン自作】プラグイン開発で良く使う!よく見る!PHPの関数
【WordPressプラグイン自作】プラグイン開発で良く使う!よく見る!PHPの関数

WordPressプラグインを自作したり、既存のプラグインを編集したりする上で、 …

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

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

W3 Total Cacheの設定方法と使い方とは
【W3 Total Cache】W3 Total Cacheの設定方法と使い方

WordPressで運営されるブログを高速化する上で今や必須となっているW3 T …

【Quick Adsense】moreタグの後に自動広告挿入!Quick Adsenseの設定
【Quick Adsense】moreタグの後に自動広告挿入!Quick Adsenseの設定

WordPressのブログで、広告を掲載してブログの収益化に挑戦している人も居る …

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

Autoptimizeには基本設定と高度な設定があり、高度な設定については技術的 …

【Wordpress】プラグインを自作する上で絶対に知っておきたい事
【WordPress】プラグインを自作する上で絶対に知っておきたい事

WordPressでブログを運営していて、上級者になってくると「より自分にあった …

【Head Cleaner】ヘッダーのJavaScriptをフッタに移動させる設定!
【Head Cleaner】ヘッダーのJavaScriptをフッタに移動させる設定!

WordPressでブログを運営している人でHead Cleanerを使ってブロ …

【Wordpress】プラグインを整理してブログ価値を高めよう!
【WordPress】プラグインを整理してブログ価値を高めよう!

WordPressを使用している人はとても多いですよね。 SEOに強いし、いろい …

クイックタグを入力補助するボタンをエディタに追加するか-1
【Quick Adsense】エディタに追加されるクイックタグのボタン設定

WordPressのブログ運営でQuick Adsenseを使って広告掲載を行っ …

【Wordpress】オススメのプラグイン激まとめ タメになるプラグイン特集!
【WordPress】オススメのプラグイン激まとめ タメになるプラグイン特集!

WordPressでブログを運営していると色々なプラグインを利用していると思いま …