どうしたらいいの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を縮小化するAutoptimizeの基本設定は一つの項目しか存在せず、高度な設定を行う場合は更に詳細な設定を行う事が出来ます。
基本設定の項目については初心者でも利用しやすい、チェックの一つだけなのでとてもわかりやすくて良いですよね。

 

 

 

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

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

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

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

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

 

 

 

 

スポンサーリンク


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

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

 

 

 

HTML・JavaScript・CSSを縮小するプラグイン 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の縮小化をするかどうかの設定を行う事が出来ます。

 
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の基本的な設定 初心者でも簡単!」で簡単でわかりやすく、詳しく解説しているのでチェックしていってください。

 

 

 

 

 

 

 

JavaScriptを縮小化するAutoptimizeの基本設定 簡単設定! あとがき

JavaScriptを縮小化するAutoptimizeの基本設定 簡単設定! あとがき
AutoptimizeではJavaScriptをチェックボックス一つで縮小化・最適化する事が出来るのでとても簡単で便利ですよね。
チェックボックス一つでWordpressが高速化されるなら初心者だってブログのパフォーマンスを上げる事は難しくありません。

 
チェックボックス一つなら、もし何かしら不具合が出てしまったとしても、チェックボックスを外すだけでもとに戻す事が出来るので、下手にDBのバックアップをとって置く必要もないのが良いところですよね。

 
JavaScriptのようなブログの動きを操作するような目的のファイルであっても、やはり機能上に問題の無い部分で無駄があれば、やはり通信回線にも負担をかける事にもなるし、負担がかかった分ブログのスピードは落ちる事になるので、軽量化できるなら軽量化して置いた方が良いです。

 
javaScriptを縮小化してブログパフォーマンスを上げて、快適なWordpressライフを送っていきましょう。

 

 

 

 

JavaScriptを縮小化するAutoptimizeの基本設定 簡単設定! まとめ

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

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

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

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

 

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

スポンサーリンク





 - Wordpress , , , ,

Message

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

  関連記事

【Wordpressプラグイン自作】フィルターフックと、フックで追加した関数の値のやり取り
【WordPressプラグイン自作】フィルターフックと、フックで追加した関数の値のやり取り

WordPressでフィルターフックを使っていると、フィルターフックと、フックで …

【Crayon Syntax Highlighter】ショートコードでテンプレート化したソースコードにCSSを適用する方法
【Crayon Syntax Highlighter】ショートコードでテンプレート化したソースコードにCSSを適用する方法

WordPressで作成したブログでソースコードを紹介するとき、綺麗な表示にして …

Head Cleanerの注意点
【Head Cleaner】Head Cleanerのよくある不具合と解決方法

ブログのパフォーマンス高速化のためにHead Cleanerを導入している人は多 …

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

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

【Head Cleaner】CSSとJavaScriptをサーバ上にキャッシュする設定!
【Head Cleaner】CSSとJavaScriptをサーバ上にキャッシュする設定!

WordPressでブログを運営している人の中にはブログの高速化を期待して、高速 …

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

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

【Wordpressプラグイン自作】管理画面の任意画面を表示する時に処理実行する方法
【WordPressプラグイン自作】管理画面の任意画面を表示する時に処理実行する方法

WordPressでプラグインを自作開発していると、Wordpressの管理画面 …

【Quick Adsense】記事中に自動で広告を掲載したい!Quick Adsenseを設定する
【Quick Adsense】記事中に自動で広告を掲載したい!Quick Adsenseの設定

広告でブログの収益化をしている人は「記事中に自動で広告を貼りたい」と考える人も居 …

【W3 Total Cache】全体設定(General Settings)を設定しよう!
【W3 Total Cache】全体設定(General Settings)を設定しよう!

WordPressを運営していて、W3 Total Cacheを利用している人は …

【Wordpress】HTMLの自動整形を停止する方法
【WordPress】WordPressのHTML自動整形を停止する方法

WordPressでブログを運営して記事を投稿している人の中には「テキスト」で記 …