どうしたらいいのNAVI

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

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

      2015/11/07


Autoptimizeには基本設定と高度な設定があり、高度な設定については技術的な理解が深い人向けの設定項目となっています。

 
Autoptimizeの高度な設定の中にはJavaScriptの縮小化についての設定があり、JavaScriptを軽量化し、ブログのパフォーマンスを向上してくれる効果が期待できます。

 
JavaScriptを縮小化するAutoptimizeの高度な設定について、簡単でわかりやすく、詳しく紹介しているのでチェックしていってください。

 

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

 

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

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

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

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

 
JavaScriptのソースコードの縮小化を有効化する事で、JavaScriptのヘッダー内への移動や、ヘッダーだけを対象とする点、対象外にするJavaScriptの指定や、デバッグに利用できるtry/catch分の追加などを行う事が出来ます。

より、技術的に理解の深い人向けの設定項目ですね。
具体的にそれぞれの設定についてみていきましょう。

 

 

 

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

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

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

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

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

 

 

 

JavaScriptのコードを強制的に<head>に移動させるか

JavaScriptのコードを強制的に<head>に移動させるか
JavaScriptのコードを強制的に<head>に移動させるかの設定ではHTML上で読み込まれているJavaScriptをヘッダーで読み込むようにします。
ヘッダー内で読み込まないと機能しないようなJavaScriptが存在する場合は、強制的にヘッダー内に移動する設定を有効化しましょう。

 
パフォーマンス上の事を考慮すると、ヘッダーでJavaScriptを読み込むよりも、フッターで読み込む方がレンダリングを邪魔しないのですが、jQueryなどヘッダーで読み込まないとうまく機能ないような場合はヘッダーで強制的に読み込ませる必要があります。

 
ヘッダーに移動されたJavaScriptは展開されHTML上に直接処理が記述されます。

 
JavaScriptのコードを強制的にヘッダーに移動させるには「Force JavaScript in <head>?」のチェックボックスにチェックすると移動され、チェックを外すと移動されません。

 
画像の例ではJavaScriptのコードを強制的にヘッダー内に移動させる設定になっています。

 

 

 

<head>内のJavaScriptだけ対象にするか

<head>内のJavaScriptだけ対象にするか
<head>内のJavaScriptだけ対象にするかでは、ヘッダー内に記述されているJavaScriptのみを対象にJavaScriptの縮小化を行うかどうかを設定できます。

 
有効にするとヘッダー内に記述されているJavaScriptだけが対象になる事になり、プラグイン上では有効化する事は非推奨とされていますが、「JavaScriptのコードを強制的に<head>に移動させる」設定を有効化している場合は利用すべき設定です。

 
ヘッダー内のJavaScriptだけけを縮小化の対象にするには「Look for scripts only in? (deprecated)」のチェックボックスにチェックを入れると有効化され、チェックを外すと無効化されます。

 
画像の例ではヘッダー内のJavaScriptだけを処理対象にするように設定しています。

 

 

 

縮小化の対象外にするJavaScriptの指定

縮小化の対象外にするJavaScriptの指定
縮小化の対象外にするJavaScriptの指定では、縮小化やAutoptimizeの処理の対象外とするJavaScriptの指定をする事が出来ます。
縮小化の対象外に指定されたJavaScriptはAutoptimizeの処理の対象外として扱われ、本来記述されている形式でJavaScriptが読み込まれる事になります。

Autoptimizeにはすでに縮小化の対象外のJavaScriptとして次のJavaScriptが記述されています。

  • s_sid
  • smowtion_size
  • sc_project
  • WAU_
  • wau_add
  • comment-form-quicktags
  • edToolbar
  • ch_client
  • seal.js

縮小化の対象外にするJavaScriptを指定するには「Exclude scripts from Autoptimize」のテキストボックスにJavaScriptのJsファイル名、もしくは識別子をカンマ区切りで入力すると設定が出来ます。

 
画像の例では、Autoptimizeにすでに対象外として登録されているJavaScriptが設定されています。
 

 

 

 

処理対象にしたJavaScriptにtry/catchを使う

処理対象にしたJavaScriptにtrycatchを使う
処理対象にしたJavaScriptにtry/catchを使う設定では、try/catch文を挿入する事で、JavaScriptの動作に不具合が出た場合にスクリプトが処理を停止しないよう、try/catch文を追加する設定です。

 
外部スクリプトの読み込みとインライン・スクリプトの実行順序が崩れると、エラーが発生する場合があります。
このオプションを有効にすると、エラー発生時にも繰り返し実行を試みる try-catch ループでインライン・スクリプトを囲みますJavaScript のエラーが発生する場合に利用するオプションです。

 
スクリプトが停止されないという点では有用かもしれませんが、何度もループすると結果的なパフォーマンスが低下するので私のの個人的な意見としてはお勧めしません。

 
処理対象にしたJavaScriptにtry/catchを使う設定については「Add try-catch wrapping?」のチェックボックスにチェックを入れるとtry/catchが追加され、チェックを外すと無効化されます。

 
画像の例では処理対象にしたJavaScriptにtry/catchを使わない設定になっています。

 

 

 

 

スポンサーリンク


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

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

 

 

 

 

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

JavaScriptを縮小化するAutoptimizeの高度な設定 あとがき
JavaScriptを縮小化するAutoptimizeの高度な設定について解説しました。

 
基本的な設定と比べて、よりWordpressへの理解やJavaScriptへの理解、Autoptimizeプラグインそのものの動作について理解をしていないと、もしかすると設定自体が難しく感じるかもしれませんね。

 
ですが、やはりブログに何かしらの不具合が発生すればそれを修正するのもブログ運営者の宿命ともいえる事なので、必要な知識だけでも知っておけばより安全・快適にWordpressのブログ運営を行う事が出来るかもしれませんね。

 
高度な設定では、主に不具合が発生した場合の救済措置がとれるような意味合いの設定項目が主だったので、より安全にブログを運営したい人は設定についてより理解を深めていきましょう。

 

 

 

 

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

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

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

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

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

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

 
JavaScriptのコードを強制的に<head>に移動させるかの設定ではHTML上で読み込まれているJavaScriptをヘッダーで読み込むようにします。
ヘッダー内で読み込まないと機能しないようなJavaScriptが存在する場合は、強制的にヘッダー内に移動する設定を有効化しましょう。

 
パフォーマンス上の事を考慮すると、ヘッダーでJavaScriptを読み込むよりも、フッターで読み込む方がレンダリングを邪魔しないのですが、jQueryなどヘッダーで読み込まないとうまく機能ないような場合はヘッダーで強制的に読み込ませる必要があります。

 
ヘッダーに移動されたJavaScriptは展開されHTML上に直接処理が記述されます。

 
<head>内のJavaScriptだけ対象にするかでは、ヘッダー内に記述されているJavaScriptのみを対象にJavaScriptの縮小化を行うかどうかを設定できます。

 
有効にするとヘッダー内に記述されているJavaScriptだけが対象になる事になり、プラグイン上では有効化する事は非推奨とされていますが、「JavaScriptのコードを強制的に<head>に移動させる」設定を有効化している場合は利用すべき設定です。

 
縮小化の対象外にするJavaScriptの指定では、縮小化やAutoptimizeの処理の対象外とするJavaScriptの指定をする事が出来ます。
縮小化の対象外に指定されたJavaScriptはAutoptimizeの処理の対象外として扱われ、本来記述されている形式でJavaScriptが読み込まれる事になります。

Autoptimizeにはすでに縮小化の対象外のJavaScriptとして次のJavaScriptが記述されています。

  • s_sid
  • smowtion_size
  • sc_project
  • WAU_
  • wau_add
  • comment-form-quicktags
  • edToolbar
  • ch_client
  • seal.js

 
処理対象にしたJavaScriptにtry/catchを使う設定では、try/catch文を挿入する事で、JavaScriptの動作に不具合が出た場合にスクリプトが処理を停止しないよう、try/catch文を追加する設定です。

 
外部スクリプトの読み込みとインライン・スクリプトの実行順序が崩れると、エラーが発生する場合があります。
このオプションを有効にすると、エラー発生時にも繰り返し実行を試みる try-catch ループでインライン・スクリプトを囲みますJavaScript のエラーが発生する場合に利用するオプションです。

 
スクリプトが停止されないという点では有用かもしれませんが、何度もループすると結果的なパフォーマンスが低下するので私のの個人的な意見としてはお勧めしません。

 

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

スポンサーリンク





 - Wordpress , , , ,

Message

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

  関連記事

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

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

【Wordpress】Wordpressでブログ運営する上で参考にしたい考察 
【WordPress】WordPressでブログ運営する上で参考にしたい考察 

WordPressはブログを運営する上でメジャーなCMSです。 Wordpres …

【TinyMCE Templates】TinyMCE Templatesで出来る便利なカスタマイズ
【TinyMCE Templates】TinyMCE Templatesで出来る便利なカスタマイズ

ブログの定型文や決まり文句、JavaScript等々、様々なものをテンプレートと …

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

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

【Crayon Syntax Highlighter】ショートコードで表示するとソースコードにCSSが反映されない原因
【Crayon Syntax Highlighter】ショートコードで表示するとソースコードにCSSが反映されない原因

WordPress上のブログでソースコードを紹介するのに、プラグインとしてCra …

【Head Cleaner】Google Ajax Libraries を使う設定!
【Head Cleaner】Google Ajax Libraries を使う設定!

Head Cleanerの設定にはGoogle Ajax Librariesを使 …

【Wordpress】記事作成や作業を効率化するおすすめのプラグイン
【WordPress】記事作成や作業を効率化するおすすめのプラグイン

ブログをWordpressで運営している人は多いですよね。 ブログをWordpr …

【Wordpress】キャッシュを使ってブログを高速化しよう! W3 Total Cache
【WordPress】キャッシュを使ってブログを高速化しよう! W3 Total Cache

WordPressでキャッシュを使ったブログの高速化をしたいと思う人は多いもので …

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

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

【Quick Adsense】サイドバーに広告を追加する設定について
【Quick Adsense】サイドバーに広告を追加する設定について

WordPressでブログを運営している人で、広告を掲載している人は「サイドバー …