どうしたらいいのNAVI

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

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

      2015/11/07


WordPressでブログを運営していて、ブログの表示速度を高速化させるために、HTMLやCSS、JavaScriptを縮小化したいと考える人も居るでしょう。

 
HTMLやJavaScript、CSSには、必要な処理なども書かれていますが、処理には全く関係のない無駄な空白や改行なども含まれる事があります。

 
これをいかに効率よく削除してHTMLやCSS、JavaScriptのファイル容量を小さくするか・・・と悩んでしまうところですが、WordpressにはAutoptimizeというプラグインがあります。

 
AutoptimizeはHTMLやCSS、JavaScriptを効率的に縮小化してくれるプラグインなので、作業も少なく、簡単にファイルを縮小化する事が出来ます。

 
HTML・CSS・JavaScriptを縮小化してくれるプラグイン Autoptimizeについて簡単で分かりやすく、詳しく紹介しているのでチェックしていってください。

 

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

 

HTML・CSS・JavaScriptを縮小化するAutoptimizeとは?

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

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

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

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

 
AutoptimizeはWordpressで運営されるブログを高速化するプラグインなのです。

 

 

 

 

AutoptimizeをWordpressにインストールする

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

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

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

 

 

 

WordPressのプラグインの「プラグインを追加」の画面で「Autoptimize」と検索する

Wordpressのプラグインの「プラグインを追加」の画面で「Autoptimize」と検索する
Wordpressの管理画面の[プラグイン]→[新規追加]から、「プラグインの追加」画面を表示しておきましょう。
検索ボックスに「Autoptimize」を入力して検索すると、プラグインを検索する事が出来ます。

 
画像の枠で囲まれたプラグインが対象のプラグインです。

 

 

 

検索で表示された「Autoptimize」を「いますぐインストール」ボタンを押してインストール

検索で表示された「Autoptimize」を「いますぐインストール」ボタンを押してインストール
「Autoptimize」のプラグインを検索できたら、対象プラグインの「いますぐインストール」ボタンを押下してプラグインをインストールしましょう。

 
プラグインのインストールが完了したら、有効化する事を忘れないようにしてください。

 
プラグインのインストールが成功していれば、WordPressの設定項目の一覧に「Autoptimize」という項目が追加されています。

 

 

 

 

Autoptimizeの設定

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

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

 
基本的な設定は基本的な設定を行うだけでAutoptimizeを使った縮小化の効果を得る事が出来ます。
高度な設定については、それぞれの設定項目に対して技術的に深い理解を持っている人を対象に、Autoptimizeを使ってより効果を上げたい人向けの設定となっています。

 
よりブログのパフォーマンスを上げたいと考えている人ならば、高度な設定で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の基本的な設定 初心者でも簡単!」で簡単でわかりやすく、詳しく解説しているのでチェックしていってください。

 

 

 

 

 

 

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の高度な設定 より使えるようにする設定」で簡単でわかりやすく、詳しく解説しているのでチェックしていってください。


 

 

 

 

Autoptimizeのお勧めの設定

Autoptimizeのオススメの設定
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:(任意)

 
Autoptimizeのオススメの設定の効果を実際に検証してみます。
今回の検証はブログの顔であるトップページを対象にパフォーマンスの変化を検証したいと思います。

 
なお、広告はページ表示の上ではダイレクトにパフォーマンスに影響する部分なので、広告を非表示にした状態で検証します。
また、サーバーのネットワーク状態もパフォーマンスには関わってくるので、このパフォーマンス検証結果を参考程度に見て頂ければ幸いです。

 
Autoptimizeのオススメの設定の効果を検証するにはパフォーマンスチェックツールを利用するのが一番なので、次のパフォーマンスチェックツールを利用してみました。

  • GTmetrix

 
autoptimize-オススメの設定-PageSpeed Insights, YSlowの総合スコア
PageSpeed Insights, YSlowの総合スコアを、Autoptimizeを導入する前と、Autoptimizeを導入しオススメの設定を判定した結果で、PageSpeed InsightsとYSlowの総合評価スコアを比較した結果、Autoptimizeの設定では、PageSpeed InsightsでもYSlowでも評価指標上のスコアが若干ですが改善されています。

 
PageSpeed Insightsの評価上では4%程、YSlowでは2%程の改善が見られました。

 
autoptimize-オススメの設定-ページ全体の詳細
次にAutoptimizeを導入する前と、Autoptimizeを導入しオススメの設定を判定した結果で、ページ全体の評価を比較した結果、ページの読み込みの時間は3.2秒、ページの容量は53KB程削減されたことになります。

 
ページサイズこそ小さくなっているものの、対して時間が大きく短縮されているので、サーバーやネットワーク上の影響も受けての結果だと思いますので、ページの読み込み時間については参考程度に認識頂ければと思います。

 
autoptimize-オススメの設定-PageSpeed Insightsの評価
次は、Autoptimize導入する前と、Autoptimizeを導入しオススメの設定を判定した結果で、PageSpeed Insightsの評価結果を確認してみましょう。
PageSpeed Insightsの評価としては総合的に評価が上がり、特に次の項目について改善されている事がわかります。
他にもHTMLやJavaScriptの縮小化に関する項目も微増ではありますが、スコアが上がっています。

  • Minify CSS
  • Leverage browser caching

 
autoptimize-オススメの設定-YSlowの評価
次は、Autoptimizeを導入する前と、Autoptimizeを導入しオススメの設定を判定した結果で、YSlowの評価結果を確認してみます。
YSlowの評価としては、総合評価の時と同様で、詳細な評価も微増している項目があります。

 
劇的な改善とまでは行きませんが、小さいレベルでパフォーマンスが改善されたと言えるでしょう。

 
Autoptimizeのお勧めの設定については「【Autoptimize】Autoptimizeのお勧めの設定 コツコツとパフォーマンス改善」で簡単でわかりやすく、更に詳しく紹介しているのでチェックしていってくださいね。


 

 

 

 

HTML・CSS・JavaScriptを縮小するプラグイン Autoptimizeを読むうえで知っておきたい知識

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

 

 

 

ブログを高速化するプラグインについて

【Wordpress】ブログを高速化するプラグイン特集! 高速化の果てへ
ブログを高速化するプラグインとてしては、現在出ているプラグインではキャッシュ系のプラグインが主流となっています。

 
キャッシュ系のプラグインは、データベースやファイル、オブジェクトなどなど本来であれば一からサーバ上で処理して作らなければならないものを、何かしらの契機であらかじめ作っておく事で、サーバの処理時間などを短縮してブログのパフォーマンスを上げる物です。

 
また、HTMLやJavaScript、CSSなどをを縮小する事で、サーバと訪問ユーザーのパソコンやモバイルとの通信容量を削減する事で、通信時間を短くする効果もあります。

 
ページのヘッダー内で読み込んでいるJavaScriptやCSS等を遅延読み込みしたり、フッターで読み込むようにする事で、ページのレンダリングを妨げないようにし、ブログの閲覧ユーザーに対して早くコンテンツを表示できるようにするプラグインもあります。

 
このように、ブログを高速化するプラグインを利用する、あるいは組み合わせる事によって、Wordpressで運営されるブログをプラグインによって高速化する事が出来るのです。

 
ブログを高速化する上でオススメのプラグインが次のプラグインです。

  • W3 Total Cache
  • Head Cleaner
  • Autoptimize

 

【Wordpress】キャッシュを使ってブログを高速化しよう! W3 Total Cache
W3 Total CacheはWordpressのプラグインで、コンテンツのキャッシュを作ってくれるプラグインです。
W3 Total Cacheは英語での表記ですが、キャッシュ系の細かな設定を行う事が出来るため、非常に便利なプラグインの一つなのです。

 
W3 TotalCacheには有償版と無償版がありますが、無償版でも十分に使えます。

 

Head Cleaner は、WordPressのプラグインの一つで、それぞれのページを構成するソースを最適化して、サイト表示速度を向上してくれるプラグインです。

 
CSSやJavaScriptを最適化してコンパクトにしたり一つにまとめたりする事でサーバーとユーザーのデータ通信の量を少なくする効果があったり、WebブラウザとWebサーバのやり取りの回数や送るデータ量を減らすことで、サイトの構築を早くする効果があります。

 

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

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

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

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

ブログを高速化するプラグインについては「【WordPress】ブログを高速化するプラグイン特集! 高速化の果てへ」で特集していますので、チェックしていってくださいね。

 

 

 

 

スポンサーリンク


HTML・CSS・JavaScriptを縮小するプラグイン Autoptimize あとがき

HTML・CSS・JavaScriptを縮小するプラグイン Autoptimize あとがき
HTML・CSS・JavaScriptを縮小するプラグインであるAutoptimizeについて紹介しました。
設定自体も基本的にはシンプルな項目で設定できるし、その上HTMLやJavaScript、CSSについても縮小し、最適化してくれるのが良いところですよね。

 
Autoptimizeで縮小した結果、ブログが高速化された事例も少なくありません。
ブログやサイトというのは0.1秒でも表示速度が速くなれば、驚くほどユーザーの利便性が改善されますので少しでも早くしておきたい所ですね。

 
パフォーマンスの改善は地道な努力が実を結びますので、コツコツとブログをパフォーマンスアップしていきましょう。

 

 

 

 

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

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:(任意)

 

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

スポンサーリンク





 - Wordpress , , , , ,

Message

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

  関連記事

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

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

【Autoptimize】Autoptimizeの高度な設定 より使えるようにする設定
【Autoptimize】Autoptimizeの高度な設定 より使えるようにする設定

AutoptimizeはHTMLやCSS,JavaScriptを縮小・最適化する …

【Wordpressプラグイン自作】Wordpressにプラグインの関数処理を実行させる方法(add_filter)
【WordPressプラグイン自作】WordPressにプラグインの関数処理を実行させる方法(add_filter)

WordPressのプラグインを自作したり、ダウンロード・インストールしたプラグ …

【Stinger5】ウィジット機能を使ってGoogle Adsenseの広告を掲載する方法
【Stinger5】ウィジット機能を使ってGoogle Adsenseの広告を掲載する方法

WordPressのテーマであるStinger5にはデフォルトの基本機能として、 …

Crayon Syntax Highlighterとは?
【WordPress】ソースコードを綺麗に紹介したい! Crayon Syntax Highlighter

ブログ運営をしていてプログラムのソースコードを利用したいという人は、「Crayo …

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

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

W3 Total Cacheで起こりやすい不具合
【W3 Total Cache】W3 Total Cacheで起こりやすい不具合 え?マジデ?!を解消しよう

W3 Total Cache等のキャッシュ系プラグインを使ってブログの動作の軽量 …

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

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

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

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

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

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