どうしたらいいのNAVI

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

【WordPress】Head Cleanerの設定! WordPressのブログを高速化!

      2015/11/07


WordPressでブログ運営を行っていると、ブログのパフォーマンスを気にしている人も多く、Wordpressのプラグインの一つであるHead Cleanerを利用しているという人も少なくはないでしょう。

 
Wordpressのプラグインの一つであるHead CleanerはJavaScriptやCSS等を最適な形に修正してくれたり、レンダリングを邪魔しないように、理想的な位置でCSSを読み込んでくれる等々、ブログのパフォーマンスを向上させる機能があり、設定によってそれらの機能の制御をする事が出来ます。

 
Head Cleanerは便利で設定項目も使いやすく、ダイナミックにHTMLやJavaScript、CSSの変更を行ってくれる反面、設定を誤ると今まで使えていた機能が使えなくなったり、動作が不安定になる事があるので、設定についてはしっかりと理解しておきたいものです。

 
いくら動作が不安定になってしまうからと言って、Head Cleanerのような有益なプラグインを利用しないのはやはりもったいない事です。

 
Head Cleanerの設定について簡単でわかりやすく、詳しくまとめているので、チェックしていってくださいね。

 

 
【Wordpress】Head Cleanerの設定! Wordpressのブログを高速化!
 

 

Haed Cleanerで設定できる事

Head CleanerではHTML、CSS,JavaScriptといったWordpress上のリソースに対するダイナミックな変更を可能にする機能があり、設定によってそれらの機能を最大限利用可能な状態にする事が出来ます。

 
Haed Cleanerで出来る設定は具体的に次の通りです。

  • CSSとJavaScriptをサーバ上にキャッシュする
  • <head> 内の JavaScript を、フッタ領域に移動
  • Google Ajax Libraries を利用する
  • XML宣言を付与
  • メタタグ “canonical” を追加
  • OGP(Open Graph Protocol) 対応のメタタグを追加
  • メタタグ “generator” を削除
  • リンクタグ “RSD” を削除
  • リンクタグ “wlwmanifest” を削除
  • IEコンディショナルタグを削除
  • メタタグ “Last Modified” を追加
  • “パラノイアモード” を有効にする。
  • デバッグモード
  • Java Scriptのフィルタによる対象外設定
  • <head>からフッタに移動するJavaScriptの設定

 
CSSやJavaScriptに関するキャッシュ設定を行う事が出来る他にも、HTMLのヘッダー内に記述されているJavaScriptをフッタ領域に移動させる事が出来る設定項目もあります。
また、メタタグで記述している内容やリンクタグに対する設定、モードの設定などHead Cleanerで設定できる項目は多岐にわたります。

 
それぞれの設定項目について分かり辛い事もあると思うので設定項目についてどのような動作をするのか見ていきましょう。

 

 

 

CSSとJavaScriptをサーバ上にキャッシュする

【Head Cleaner】CSSとJavaScriptをサーバ上にキャッシュする設定!
CSSとJavaScriptをサーバ上にキャッシュするかどうかでは、CSSとJavaScriptをWordpressが運用されているサーバ上にキャッシュしておき、読み込みのCSSやJavaScriptの高速化をはかるものです。

 
Head Cleanerでは、元のJavaScriptやCSSファイルではなく、キャッシュして置いたCSSやJavaScriptに対して、ダイナミックを変更を加え、HTML上ではキャッシュし最適化して置いたJavaScriptやCSSを読みこませる事で、元のCSSやJavaScriptを直接編集しなくてもパフォーマンスに最適な形でブラウザに読み込ませる事が出来ます。

 
CSSとJavaScriptをサーバ上にキャッシュする設定はHead Cleanerの設定画面の「CSSとJavaScriptをサーバ上にキャッシュする」のチェックボックスにチェックを入れると有効化され、チェックを外すと無効化されます。

 
Head Cleanerではキャッシュしたファイルに行う最適化の設定などをする事が出来、「CSSとJavaScriptをサーバ上にキャッシュする」設定を有効化する事によって、更に次のような設定を行う事が出来るようになります。

  • CSS, JS を動的生成する
  • CSS に適用するデフォルト media 属性
  • 複数の CSS を結合する
  • CSS を最適化する
  • CSS に含まれる画像の URL を、データスキーマ URI に変換する
  • 複数の JavaScript を結合する
  • JavaScript を小さくする
  • フッタ領域の JavaScript も対象にする

 
Head CleanerのCSSとJavaScriptをサーバ上にキャッシュする設定を有効化する事によって変更されるHTMLを「どうしたらいいのNAVI」を例に見ていきましょう。
この設定を有効化する事で変更されるHTMLの要点をまとめると次の通りです。

  • HTMLに直接記述されていたCSSがキャッシュファイル化され、読み込まれる
  • HTMLに直接記述されていたJavaScriptがキャッシュファイル化され、読み込まれる

 
CSSとJavaScriptをサーバ上にキャッシュする設定を有効化する事で、HTMLが直接記述されていたCSSがキャッシュファイル化され、読み込まれます。
キャッシュファイルは「all(共通)」「print(印刷用)」「screen(ブラウザ表示用)」に分かれ、別々のキャッシュファイルとして保存され読み込まれる事になるのです。

 
JavaScriptについても、HTMLファイル上に直接記述されている物については、キャッシュファイル化され、読み込まれるようになります。
JavaScriptはHTML上に記載されている物については、一つのキャッシュファイルとしてまとめられます。

 
CSSとJavaScriptをサーバ上のキャッシュを有効化した場合には、先ほども紹介しましたが、次のような詳細な設定を行う事が出来ます。
この設定により、CSSやJavaScriptをキャッシュした際に、ファイルを最適化したり、圧縮したり、コードを移動させたりまとめたりする事が出来ます。

 

  • CSS, JS を動的生成する
  • CSS に適用するデフォルト media 属性
  • 複数の CSS を結合する
  • CSS を最適化する
  • CSS に含まれる画像の URL を、データスキーマ URI に変換する
  • 複数の JavaScript を結合する
  • JavaScript を小さくする
  • フッタ領域の JavaScript も対象にする

 
CSS, JS を動的生成する設定では、Head Cleanerで作成されるキャッシュファイルに有効期限を決め、更にgzipで圧縮するかどうかを設定する事が出来ます。
有効化する事で、キャッシュされたCSS、JavaScriptのファイルは有効期限毎に更新され、更に圧縮された形で保存される事となります。

 
ファイルがgzip形式によって圧縮される事で、ブラウザからブログの読み込みを行う際にファイル通信の容量が削減されるため、ブログパフォーマンスが高速化されます。

 
CSS,JSを動的生成する設定を有効化する事で変更されるHTMLは読み込みされるCSS,JSが「js_css.php」を介して展開されるという点です。

 
Head Cleanerの「CSSとJavaScriptをサーバ上にキャッシュする」設定を有効化しているとHead Cleanerが作成した静的ファイルを読み込みに行きますが、「CSS, JS を動的生成する」事で、「js_css.php」にキャッシュファイルの識別子を渡す事で圧縮、読み込みを行えるようになっています。

 
CSSに適用するデフォルトのmedia属性では、CSSをキャッシュファイル化した場合に設定されるデフォルトのメディア属性を指定する事が出来ます。
パフォーマンスが改善されるというよりも、CSSをキャッシュファイル化した際のレイアウト崩れを解消する事が目的の設定項目です。

 
指定する事で、何もmedia属性を指定されていないCSSにはデフォルトのmedia属性が設定されるようになります。

 
複数のCSSを結合する設定では、HTML上で読み込まれているCSSファイルを一つのファイルにまとめる事が出来ます。
HTML上で読み込まれているCSSファイルを一つにまとめる事で、サーバーへの読み込みにかかる通信を一本化する事が出来るので結果として画面表示が高速化される事になります。

 
CSSに「all」「print」「screen」のmedia属性を指定している場合は、media属性ごとにキャッシュファイルがまとめられ結合されます。
何も指定されていないCSSファイルについては「CSS に適用するデフォルト media 属性」で指定した属性のファイルにCSSがまとめられます。

 
複数のCSSを結合する事で変更されるHTMLは、複数のCSSファイルの読み込みが、キャッシュファイルの一本化によって読み込みがmedia属性ごとに1行で済んでいる点です。
複数のCSSは一つのキャッシュファイルとしてまとめられる為、media属性ごとに全てのCSSの情報が一括して読み込まれる事になります。

 
CSSを最適化する設定では、キャッシュしたCSSの内容の最適化を行う設定項目です。
CSSを最適化する設定にした場合は、コメントや余計な空白、改行コードなどが削除され、CSSの容量がコンパクト化され、データ通信の容量が小さく済みます。
データ通信の容量が小さくなるという事は、それだけ通信時間が削減される事になるのでブログを高速化する事が出来ます。

 
CSSを最適化する設定を有効にする事によって最適化されたCSSは、先ほども言った通り、コメントや余計な空白、改行コード等、表示に関係の無いブラウザなどからすれば無駄な文字を削除してくれます。

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

 
複数のJavaScriptを結合する設定項目では、有効化する事で、HTML上に記述されている複数のJavaScriptを一つのファイルに結合する事が出来ます。
CSSの結合と同様に、JavaScriptを結合する事で、Jsファイルの読み込み回数を減らす事が出来るので、ブログのパフォーマンスアップにつながります。

 
複数のJavaScriptを結合する設定では、HTMLが直書きされている事によってHead Cleanerに作成されるJavaScriptファイルも結合の対象になります。

 
複数の JavaScript を結合する設定で変更されるHTMLは、複数のJsファイルの読み込みがあった場合、一つのJsファイルにまとめられて読み込まれる点です。

 
JavaScriptを小さくする設定では、JavaScriptに含まれる動作に影響しない、コメントや余分な空白、改行コードなどを削除し、JavaScriptを小さく最適化してくれます。
JavaScriptそのものの容量が小さくなることで、サーバとやり取りするデータの通信量が減り、画面の表示速度を向上する事が出来ます。

 
パフォーマンスアップの世界は0.1秒でも早くする事で劇的にブログパフォーマンスが上がるので、JavaScriptを小さくする事も細かい事ですがやっておいた方が良いでしょう。

 
JavaScriptを小さくする設定を有効にする事によって最適化されたJavaScriptは、先ほども言った通り、コメントや余計な空白、改行コード等、表示に関係の無いブラウザなどからすれば無駄な文字を削除してくれます。

 
フッタ領域のJavaScriptも対象にする設定によって、ヘッダーに記載されているJavaScriptだけでなく、フッターに記述されているJavaScriptも「複数の JavaScript を結合する」や「JavaScript を小さくする」設定を有効化する事が出来ます。

 
フッタ領域にレンダリングの邪魔をしない様、直接自分でJavaScriptを記載している場合に効果があります。

 

CSSとJavaScriptをサーバ上にキャッシュする設定については「【Head Cleaner】CSSとJavaScriptをサーバ上にキャッシュする設定!」で簡単でわかりやすく、詳しく解説しているのでチェックしていってくださいね。
 

 

 

<head> 内の JavaScript を、フッタ領域に移動

【Head Cleaner】ヘッダーのJavaScriptをフッタに移動させる設定!
ヘッダーのJavaScriptをフッタに移動させる設定では、<head> 内の JavaScript を、フッタ領域に移動する設定を有効化する事によってヘッダーで読み込んでいる、またはヘッダーに直接記述されているJavaScriptをフッターに移動する事が出来ます。

 
ヘッダーで同期読み込みをしているJavaScriptはページ表示のレンダリングを邪魔し、JavaScriptの読み込みが終わるまで記事が表示されなくなってしまうので、同期読み込みを行っているJavaScriptについてはフッター領域に移動するのがパフォーマンスアップではベストな方法でしょう。

 
<head> 内の JavaScript を、フッタ領域に移動する設定を有効化する事で変更されるHTMLは、ヘッダーで読み込んでいるJavaScriptがHTML上でフッタ領域に移動される事です。

 
もし、JavaScriptのフィルタによる対象外設定によって対象外となるJavaScriptを指定していた場合は、フッタ領域に移動されずに、ヘッダー領域に残る事になります。

 
JavaScriptをフッターに移動させる場合はjQueryの読み込みをフッタではなく、ヘッダーで読み込むのが良いでしょう。

 
JavaScriptの中でもjQueryについては、フッター領域に移動させる事で正常な動作をしなくなる事があるので、JavaScriptのフィルタによる対象外設定でjQueryを使っているJavaScriptはフッターに移動させないようにした方が良いでしょう。

 
<head> 内の JavaScript を、フッタ領域に移動する設定については「【Head Cleaner】ヘッダーのJavaScriptをフッタに移動させる設定!」で簡単でわかりやすく、詳しく解説しているのでチェックしていってくださいね。

 

 

 

Google Ajax Libraries を利用する

Google Ajax Libraries を利用する
Head CleanerのGoogle Ajax Librariesを使う設定とは、Wordpressに標準搭載されているAjaxを利用するのではなく、Googleが提供するサーバからGoogle Ajax Librariesを読み込んで利用する設定にするという物です。

 
Wordpressに標準搭載されているAjaxを使うのも早くて良いのですが、Googleが提供しているCDN(コンテンツデリバリーネットワーク)を利用する事で、Ajaxライブラリを高速に読み込むことが出来ます。

 
Head Clenerの設定項目のうちの「Google Ajax Libraries を利用する」にチェックを入れる事で、Google Ajax Librariesを使う事が出来ます。

 
Google Ajax Librariesを利用する設定を有効化する事で、Google Ajax Librariesを読み込むためのスクリプトタグがHTMLに追加されます。

 
Google Ajax Libraries を利用する設定については「【Head Cleaner】Google Ajax Libraries を使う設定!」で簡単でわかりやすく、詳しく解説しているのでチェックしていってください。
 

 

 

XML宣言を付与

XML宣言を付与
XML宣言を付与の設定では、有効化する事でHTMLの先頭にXML宣言を追加してくれる設定です。
XML宣言の例はHTMLファイルの先頭に記述される次の記述のことです。

 
XML宣言を付与を有効化していても、Wordpressのテーマなどによって、すでにXML宣言が記載されていた場合は、既に宣言されているXML宣言が有効になり、Head CleanerによるXML宣言は追加されません。

 
画像の例では、XML宣言を付与しない設定になっています。

 

 

 

メタタグ “canonical” を追加

メタタグ canonical を追加
メタタグ “canonical” を追加の設定では、HTML上にcanonicalを自動的に追加してくれる機能です。
既にページに対してcanonicalを追加している場合は、メタタグcanonicalを追加する設定を有効化しても、すでに記述されているcanonicalが優先されます。

 
これはパフォーマンスアップというよりはSEO観点でURLを正規化しておいた方が良いという意図の設定です。

 
メタタグのcanonicalは、ページが同一内容なのに別URLで存在する場合に用いられるものです。
例えば、バージョン別に管理される記事を持ち、そして公開している場合などがこのケースに該当するでしょう。

 

 
メタタグのcanonicalを利用し、正規に公開したいURLを記述する事で、どのコンテンツがメインコンテンツなのかをクローラーに伝える事が出来ます。

 
バージョン別に管理される記事でなかったとしても、自身のURLをcanonicalで宣言しておく事で、自分自身をメインコンテンツとして伝える事の出来る効果があるのではないかと思われます。

 
画像の例では、メタタグ”canonical”は追加しない設定になっています。(canonicalについては他のプラグインで設定していたため)

 

 

 

OGP(Open Graph Protocol) 対応のメタタグを追加

OGP(Open Graph Protocol) 対応のメタタグを追加
OGP(Open Graph Protocol) 対応のメタタグを追加する設定を有効化する事によってOpen Graph Protocol対応のメタタグを自動的にHTML上に追加してくれます。
OGP(Open Graph Protocol) 対応のメタタグを追加する設定を有効化すると次の設定を行う事が出来るようになります。

  • og:type (top page)
  • og:locale
  • fb:admins
  • fb:app_id

 

Open Graph ProtocolはFacebookやtwitterなどのソーシャルメディアで使われる通信規約のことです。
とは言え、Header Cleanerのもともとの利用目的はOGPを利用する事ではないので、ここでは特に設定について言及する事はしません。

 
OGPについては他プラグインに役割を任せる事にします。

 
画像の例ではOGP(Open Graph Protocol)対応のメタタグは追加しない設定になっています。

 

 

 

メタタグ “generator” を削除

メタタグ generator を削除
メタタグ “generator” を削除の設定では、有効化する事でHTML上に記述されているメタタグのgenerator属性を削除する設定です。

 
メタタグのgeneratorは本来HTML文書として基本的に表示に使われる項目ではありません。
メタタグのgeneratorを削除する事で少しでもHTML文書を軽くする事が出来ます。

 
ただし、メタタグgeneratorが追加されていなければ、HTMLの容量が小さくなる事はないので設定は無効のままで良いでしょう。

 
次に紹介するようなタグがメタタグのgeneratorです。

 

 
Word等を利用してHTML文書を作成した場合などにこのようなメタタグGeneratorが追加される可能性があります。

 
画像の例では、メタタグ”generator”を削除する設定は無効になっています。
 

 

 

リンクタグ “RSD” を削除

リンクタグ RSD を削除
リンクタグ “RSD” を削除の設定では、<link>タグでrsdが指定されている場合に該当の行を削除してくれるというものです。

 
リンクタグのRSDは汎用的なブログ編集用のアドレスとして使われる物なので、Wordpress上でしかブログを投稿しないという人はリンクタグのRSDを削除する事で、少しでもHTMLが軽量化されるので、有効化しても良いでしょう。

 
RSDのタグを記述していなかったり、すでに削除している人は無効化しておいて良いと思います。

 
次のようなHTMLがリンクタグの”RSD”となります。

 

 
画像の例ではリンクタグ”RSD”は削除しない設定になっています。
 

 

 

リンクタグ “wlwmanifest” を削除

リンクタグ wlwmanifest を削除
リンクタグ “wlwmanifest” を削除では、HTML上に記述された<link>タグに記載されている「wlwmanifest」の行を削除してくれます。

 
リンクタグのwlwmanifestはWindows Live Writer を使って記事を投稿するときのアドレスを指定する物なので、Wordpress上でしか記事を編集しない人にとっては削除した方がわずかながらHTMLを小さくする事に繋がるので有効化しても良いでしょう。

 
もともとwlwmanifestを記述していない人や、すでに自分で削除した人は無効化のままでも良いです。

 
リンクタグのwlwmanifestとは、例えば次のように記述されているタグです。

 

 

画像の例では「リンクタグ “wlwmanifest” を削除」する設定は無効化されています。

 

 

 

IEコンディショナルタグを削除

IEコンディショナルタグを削除
IEコンディショナルタグを削除する設定では、IEのバージョンごとにCSSを適用する場合に用いるコメントを削除する場合の設定です。
余りに古いバージョンを指定してCSSを指定している場合や、最新のブラウザを対象にする為、IEコンディショナルタグを削除する場合などに利用価値があるのではないでしょうか。

 
IEコンディショナルタグも削除する事でHTMLをわずかながら削除する事に繋がるので、もしIEコンディショナルタグが不要なのであれば有効化してしまっても良いでしょう。
IEコンディショナルタグを記述していない人や、すでに削除済みの人は無効化したままで良いです。

 
IEコンディショナルタグは次のようなHTMLです。

 

 
画像の例ではIEコンディショナルタグを削除する設定は無効化されています。

 

 

 

メタタグ “Last Modified” を追加

メタタグ Last Modified を追加
メタタグ”Last Modified”を追加の設定を有効化する事で、コンテンツの最終更新日時を表すLast Modifiedを追加してくれます。
Last Modifiedを追加する事によりキャッシュされたコンテンツが最新状態かどうかを判断するのに利用されます。

画像の例ではメタタグ “Last Modified” を追加の設定は無効化されています。

 

 

 

“パラノイアモード” を有効にする

パラノイアモード を有効にする
パラノイアモードを有効にする事でHTMLソースから無駄を省き、できるだけサイズを小さくしようとしてくれます。
パラノイアモードを有効にする事でヘッダー内だけでなく、HTML全体の不要な改行や空白を削除してくれるようになります。

 
ただし、このパラノイアモードそのものが、まだ実験段階らしく、正常に動作する事が保障されていないので、パラノイアモードを有効化する事によって不具合が発生した場合はパラノイアモードを無効化するようにしましょう。

 
ちなみに「どうしたらいいのNAVI」ではパラノイアモードを有効にしてもこれといった変化がありませんでした。
パラノイアモードが使えている人たちもいる事から考えると恐らく現在使っているテーマの「Stinger5」と互換性が無いか、他のプラグインの影響を受けている物だと思われます。

 
動作が不安定な事や等を考えてもHTMLの最適化については他のプラグインを利用した方が良いかもしれません。
今後、ソースを読むなりしてパラノイアモードについては追記していきます。

 
画像の例では”パラノイアモード” を無効に設定しています。

 

 

 

デバッグモード

デバッグモード
デバッグモードの設定では、Head Cleanerに読み込んだJavaScript等の情報をHTMLのコメントとして表示してくれるデバッグモードを有効化する事が出来ます。
Head Cleanerによってまとめられた内容を確認する事が出来るので、不具合などを感じた場合はデバッグモードを有効にして確認してみると良いでしょう。

 
ただ、デバッグモードはあくまでデバッグ用の機能ですので、何か不具合が出て確認する場合を除いては基本的に無効化しておいた方が良いでしょう。

 

デバッグモードの設定を有効化し、ブログの記事などにアクセスした後、ブラウザのHTMLの表示を行うと例えば次のようなコメントが追加されます。

 

 
画像の例では、デバッグモードは無効に設定しています。

 

 

 

Java Scriptのフィルタによる対象外設定

Java Scriptのフィルタによる対象外設定
Java Scriptのフィルタによる対象外設定で、Head Cleanerで一つのファイルにまとめたり、最適化する対象外とするJavaScriptを指定する事が出来ます。
Head Cleanerによって一つのファイルにまとめたり、フッタ領域に移動する事によって不具合が出た場合にフィルタによる対象外設定を行うと良いでしょう。

 
また、この機能ではフィルタを用いてJavaScriptそのものを削除する事が出来ます。
もし不要になったJavaScript等があった場合は、一覧からチェックする事で削除する事が出来ます。

 
画像の例では「GADWP_Tracking::tracking_code」(Google Analytics Dashboard for WPで追加されるもの)をフィルタを使って、HeadCleanerの対象外設定にしています。

 

 

 

<head>からフッタに移動するJavaScriptの設定

<head>からフッタに移動するJavaScriptの設定
<head>からフッタに移動するJavaScriptの設定では、ヘッダーで読み込んでいるJavaScriptの内、フッターに移動させるJavaScriptを選択する事が出来ます。
ここで選択されたJavaScriptはフッター領域で読み込まれる事となります。

 
画像の例ではフッタに移動するJavaScriptとして「crayon.min.js」をフッタ領域で読み込むように設定しています。

 

 

 

 

スポンサーリンク


Head Cleanerの設定! Wordpressのブログを高速化!を読むうえで知っておきたい知識

Head Cleanerの設定! Wordpressのブログを高速化!を読む上で知っておきたい事について紹介します。
何かに困った時に他の方法を思いついたり、用語がわからなくて読みづらいと感じた場合は、これから紹介する事を参考にしてみてください。

 

 

 

Head Cleanerとは

【Wordpress】データ通信を削減してブログを高速化! Head Cleaner
Head Cleaner は、WordPressのプラグインの一つで、それぞれのページを構成するソースを最適化して、サイト表示速度を向上してくれるプラグインです。

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

 
Head Cleanerを導入するメリットは何と言っても、ブログを表示した時の速度が高速化される事でしょう。
また、SEO的な視点から見ても、検索エンジンに優良なブログ・コンテンツである事を伝えるシグナルを生む事が出来、検索エンジンからの流入を増加させる可能性を秘めている点でもメリットとして上げる事が出来ます。

 
Head Cleanerを適切な設定で運用する事で、ユーザーがブログを訪問した際にブログが表示されるまでにかかる時間が大きく削減される事や、CSSやJavaScriptを最適化して、読み込み位置を変更する事で、ページのレンダリングを高速化する事が可能なところも魅力的です。

 
Head Clearnerを導入するデメリットとしては、CSSやJavaScriptの特性によっては、正常な動作を行わなくなる可能性がある事です。
また、Head Cleanerは設定項目が多いため、慣れるまではどのような設定を行うと、ブログに対してどのような働きがあるか分かりづらい点です。

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

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

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

 

Head CleanerではHTML、CSS,JavaScriptといったWordpress上のリソースに対するダイナミックな変更を可能にする機能があり、設定によってそれらの機能を最大限利用可能な状態にする事が出来ます。

 
Haed Cleanerで出来る設定は具体的に次の通りです。

  • CSSとJavaScriptをサーバ上にキャッシュする
  • <head> 内の JavaScript を、フッタ領域に移動
  • Google Ajax Libraries を利用する
  • XML宣言を付与
  • メタタグ “canonical” を追加
  • OGP(Open Graph Protocol) 対応のメタタグを追加
  • メタタグ “generator” を削除
  • リンクタグ “RSD” を削除
  • リンクタグ “wlwmanifest” を削除
  • IEコンディショナルタグを削除
  • メタタグ “Last Modified” を追加
  • “パラノイアモード” を有効にする。
  • デバッグモード
  • Java Scriptのフィルタによる対象外設定
  • <head>からフッタに移動するJavaScriptの設定

 

Head Cleanerでブログを高速化するお勧めの設定では、すでにWordpressでHead Cleanerをインストールしている前提で設定内容について紹介します。
Head Cleanerでブログを高速化する上でオススメの設定は次の通りです。

  • CSS と JavaScript を、サーバ上にキャッシュする :ON
  • CSS, JS を動的生成する。:OFF
  • CSS に適用するデフォルト media 属性:all
  • 複数の CSS を結合する : ON
  • CSS を最適化する : ON
  • CSS に含まれる画像の URL を、データスキーマ URI に変換する : ON
  • 複数の JavaScript を結合する : ON
  • JavaScript を小さくする : ON
  • フッタ領域の JavaScript も対象にする : OFF
  • <head> 内の JavaScript を、フッタ領域に移動 : ON
  • Google Ajax Libraries を利用する : OFF
  • XML宣言を付与 : OFF
  • メタタグ “canonical” を追加 : ON
  • OGP(Open Graph Protocol) 対応のメタタグを追加 : OFF
  • メタタグ “generator” を削除 : OFF
  • リンクタグ “RSD” を削除 : OFF
  • リンクタグ “wlwmanifest” を削除 : OFF
  • IEコンディショナルタグを削除 : OFF
  • “パラノイアモード” を有効にする : OFF
  • デバッグモード : OFF

 

Head Cleanerでブログを高速化するお勧めの設定では、すでにWordpressでHead Cleanerをインストールしている前提で設定内容について紹介します。
Head Cleanerでブログを高速化する上でオススメの設定は次の通りです。

  • CSS と JavaScript を、サーバ上にキャッシュする :ON
  • CSS, JS を動的生成する。:OFF
  • CSS に適用するデフォルト media 属性:all
  • 複数の CSS を結合する : ON
  • CSS を最適化する : ON
  • CSS に含まれる画像の URL を、データスキーマ URI に変換する : ON
  • 複数の JavaScript を結合する : ON
  • JavaScript を小さくする : ON
  • フッタ領域の JavaScript も対象にする : OFF
  • <head> 内の JavaScript を、フッタ領域に移動 : ON
  • Google Ajax Libraries を利用する : OFF
  • XML宣言を付与 : OFF
  • メタタグ “canonical” を追加 : ON
  • OGP(Open Graph Protocol) 対応のメタタグを追加 : OFF
  • メタタグ “generator” を削除 : OFF
  • リンクタグ “RSD” を削除 : OFF
  • リンクタグ “wlwmanifest” を削除 : OFF
  • IEコンディショナルタグを削除 : OFF
  • “パラノイアモード” を有効にする : OFF
  • デバッグモード : OFF

 

Head Cleanerの注意点
Head Cleanerの良くある不具合とは、Head Cleanerを導入する事でWordpress、Webツールの利用の兼ね合い、併用しているプラグインとの組み合わせによって起こる不具合の事を指します。

 
Head Cleanerはとても使い勝手がよく、簡単な設定一つでブログのパフォーマンスを上げてくれるのでとても助かるのですが、キャッシュ系やHTML,CSS,JavaScriptの無駄を省き最適化するという特性上、他のプラグインや記述されている内容によっては正常な動作をしてくれない事もあるので注意が必要です。

 
これはHead Cleanerが悪いとかそういう問題ではなく、Head Cleanerのようにダイナミックなソースの変更を書けるようなプラグイン全般に言える事です。

 
Head Cleanerの動作についての理解が乏しい事で、設定すべき項目が設定できていなくて起こる不具合もあれば、Head Cleanerそのものの処理が原因で他のプラグインが動作しなかったりと不具合の原因もまちまちです。

 
現在、Head Cleanerを導入する事で起こる良くある不具合は次のようなものがあります。

  • 導入初期の放置による不具合
  • Webツールの「Search Console」が使えなくなる事がある
  • プラグインの「Autoptimize」が動作しなくなる

 
Head Cleanerについては「【WordPress】データ通信を削減してブログを高速化! Head Cleaner」で簡単でわかりやすく、更に詳しく紹介しているのでチェックしていってくださいね。


 

 

 

 

Head Cleanerの設定! Wordpressのブログを高速化! あとがき

Head Cleanerの設定! Wordpressのブログを高速化! あとがき
少々、動作としては不安定さがあったり、試用中の機能があったりと一部不安定な動きをするHead Cleanerですが、この手のプラグインは他のプラグインとの兼ね合いや記述されているJavaScriptやCSSの記述方法によって動作が不安定になりがちなので、その中では安定的だと思います。

 
多少の不安定さがあったとしても、あまりにも致命的な内容でなければHead Cleanerはやはり強い味方になってくれるます。
設定項目もチェック一つで設定できる簡単設定なので、設定内容さえ詳しくわかってしまえばある程度自分の思い通りに動作してくれるでしょう。

 
設定を反映した後は必ずブログにアクセスしてHTMLソースを確認するなりして、設定が正しく反映されているか確認するのがプラグインを使う上での鉄則です。

 
Head Cleanerを自分のブログや運営方針に合わせる事でWordpressを最速化していきましょう!

 

 

 

 

Head Cleanerの設定! Wordpressのブログを高速化! まとめ

Head Cleanerの設定! Wordpressのブログを高速化! まとめ
Head CleanerではHTML、CSS,JavaScriptといったWordpress上のリソースに対するダイナミックな変更を可能にする機能があり、設定によってそれらの機能を最大限利用可能な状態にする事が出来ます。

 
Haed Cleanerで出来る設定は具体的に次の通りです。

  • CSSとJavaScriptをサーバ上にキャッシュする
  • <head> 内の JavaScript を、フッタ領域に移動
  • Google Ajax Libraries を利用する
  • XML宣言を付与
  • メタタグ “canonical” を追加
  • OGP(Open Graph Protocol) 対応のメタタグを追加
  • メタタグ “generator” を削除
  • リンクタグ “RSD” を削除
  • リンクタグ “wlwmanifest” を削除
  • IEコンディショナルタグを削除
  • メタタグ “Last Modified” を追加
  • “パラノイアモード” を有効にする。
  • デバッグモード
  • Java Scriptのフィルタによる対象外設定
  • <head>からフッタに移動するJavaScriptの設定

 
CSSとJavaScriptをサーバ上にキャッシュするかどうかでは、CSSとJavaScriptをWordpressが運用されているサーバ上にキャッシュしておき、読み込みのCSSやJavaScriptの高速化をはかるものです。

 
Head Cleanerでは、元のJavaScriptやCSSファイルではなく、キャッシュして置いたCSSやJavaScriptに対して、ダイナミックを変更を加え、HTML上ではキャッシュし最適化して置いたJavaScriptやCSSを読みこませる事で、元のCSSやJavaScriptを直接編集しなくてもパフォーマンスに最適な形でブラウザに読み込ませる事が出来ます。

 
ヘッダーのJavaScriptをフッタに移動させる設定では、<head> 内の JavaScript を、フッタ領域に移動する設定を有効化する事によってヘッダーで読み込んでいる、またはヘッダーに直接記述されているJavaScriptをフッターに移動する事が出来ます。

 
ヘッダーで同期読み込みをしているJavaScriptはページ表示のレンダリングを邪魔し、JavaScriptの読み込みが終わるまで記事が表示されなくなってしまうので、同期読み込みを行っているJavaScriptについてはフッター領域に移動するのがパフォーマンスアップではベストな方法でしょう。

 
Head CleanerのGoogle Ajax Librariesを使う設定とは、Wordpressに標準搭載されているAjaxを利用するのではなく、Googleが提供するサーバからGoogle Ajax Librariesを読み込んで利用する設定にするという物です。

 
Wordpressに標準搭載されているAjaxを使うのも早くて良いのですが、Googleが提供しているCDN(コンテンツデリバリーネットワーク)を利用する事で、Ajaxライブラリを高速に読み込むことが出来ます。

 
XML宣言を付与の設定では、有効化する事でHTMLの先頭にXML宣言を追加してくれる設定です。

 
メタタグ “canonical” を追加の設定では、HTML上にcanonicalを自動的に追加してくれる機能です。
既にページに対してcanonicalを追加している場合は、メタタグcanonicalを追加する設定を有効化しても、すでに記述されているcanonicalが優先されます。

 
これはパフォーマンスアップというよりはSEO観点でURLを正規化しておいた方が良いという意図の設定です。

 
OGP(Open Graph Protocol) 対応のメタタグを追加する設定を有効化する事によってOpen Graph Protocol対応のメタタグを自動的にHTML上に追加してくれます。

 
メタタグ “generator” を削除の設定では、有効化する事でHTML上に記述されているメタタグのgenerator属性を削除する設定です。

 
メタタグのgeneratorは本来HTML文書として基本的に表示に使われる項目ではありません。
メタタグのgeneratorを削除する事で少しでもHTML文書を軽くする事が出来ます。

 
リンクタグ “RSD” を削除の設定では、<link>タグでrsdが指定されている場合に該当の行を削除してくれるというものです。

 
リンクタグのRSDは汎用的なブログ編集用のアドレスとして使われる物なので、Wordpress上でしかブログを投稿しないという人はリンクタグのRSDを削除する事で、少しでもHTMLが軽量化されるので、有効化しても良いでしょう。

 
RSDのタグを記述していなかったり、すでに削除している人は無効化しておいて良いと思います。

 
リンクタグ “wlwmanifest” を削除では、HTML上に記述された<link>タグに記載されている「wlwmanifest」の行を削除してくれます。

 
リンクタグのwlwmanifestはWindows Live Writer を使って記事を投稿するときのアドレスを指定する物なので、Wordpress上でしか記事を編集しない人にとっては削除した方がわずかながらHTMLを小さくする事に繋がるので有効化しても良いでしょう。

 
もともとwlwmanifestを記述していない人や、すでに自分で削除した人は無効化のままでも良いです。

 
IEコンディショナルタグを削除する設定では、IEのバージョンごとにCSSを適用する場合に用いるコメントを削除する場合の設定です。
余りに古いバージョンを指定してCSSを指定している場合や、最新のブラウザを対象にする為、IEコンディショナルタグを削除する場合などに利用価値があるのではないでしょうか。

 
IEコンディショナルタグも削除する事でHTMLをわずかながら削除する事に繋がるので、もしIEコンディショナルタグが不要なのであれば有効化してしまっても良いでしょう。
IEコンディショナルタグを記述していない人や、すでに削除済みの人は無効化したままで良いです。

 
メタタグ”Last Modified”を追加の設定を有効化する事で、コンテンツの最終更新日時を表すLast Modifiedを追加してくれます。
Last Modifiedを追加する事によりキャッシュされたコンテンツが最新状態かどうかを判断するのに利用されます。

 
パラノイアモードを有効にする事でHTMLソースから無駄を省き、できるだけサイズを小さくしようとしてくれます。
パラノイアモードを有効にする事でヘッダー内だけでなく、HTML全体の不要な改行や空白を削除してくれるようになります。

 
ただし、このパラノイアモードそのものが、まだ実験段階らしく、正常に動作する事が保障されていないので、パラノイアモードを有効化する事によって不具合が発生した場合はパラノイアモードを無効化するようにしましょう。

 
デバッグモードの設定では、Head Cleanerに読み込んだJavaScript等の情報をHTMLのコメントとして表示してくれるデバッグモードを有効化する事が出来ます。
Head Cleanerによってまとめられた内容を確認する事が出来るので、不具合などを感じた場合はデバッグモードを有効にして確認してみると良いでしょう。

 
ただ、デバッグモードはあくまでデバッグ用の機能ですので、何か不具合が出て確認する場合を除いては基本的に無効化しておいた方が良いでしょう。

 
Java Scriptのフィルタによる対象外設定で、Head Cleanerで一つのファイルにまとめたり、最適化する対象外とするJavaScriptを指定する事が出来ます。
Head Cleanerによって一つのファイルにまとめたり、フッタ領域に移動する事によって不具合が出た場合にフィルタによる対象外設定を行うと良いでしょう。

 
<head>からフッタに移動するJavaScriptの設定では、ヘッダーで読み込んでいるJavaScriptの内、フッターに移動させるJavaScriptを選択する事が出来ます。
ここで選択されたJavaScriptはフッター領域で読み込まれる事となります。

 

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

スポンサーリンク





 - Wordpress , ,

Message

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

  関連記事

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

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

【Quick Adsense】記事下に自動で広告を挿入するQuick Adsenseの設定
【Quick Adsense】記事下に自動で広告を挿入するQuick Adsenseの設定

WordPressでブログを運営している人で、Quick Adsenseを使って …

【TinyMCE Templates】テンプレートを挿入で検索できるようにするカスタマイズ
【TinyMCE Templates】テンプレートを挿入で検索できるようにするカスタマイズ

TinyMCE Templatesは記事内容や定型文、決まったJavaScrip …

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

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

【Head Cleaner】ブログを高速化するHead Cleanerのお勧めの設定
【Head Cleaner】ブログを高速化するHead Cleanerのお勧めの設定

WordPressでブログのパフォーマンス高速化の為に、Head Cleaner …

【Wordpressプラグイン自作】フックに登録する関数を他プラグインの関数と衝突させない方法
【WordPressプラグイン自作】フックに登録する関数を他プラグインの関数と衝突させない方法

WordPressのプラグインを自作する上で気を付けなければいけないのが自作した …

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

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

【Wordpress】プログラムコードをブログで紹介する方法 使いやすくてキレイ!
【WordPress】プログラムコードをブログで紹介する方法 使いやすくてキレイ!

運営するブログによってはプログラムのソースコードを表示して紹介したい場合がありま …

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

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

【W3 Total Cache】ブラウザキャッシュのメディアファイルとその他のファイルの設定
【W3 Total Cache】ブラウザキャッシュのメディアファイルとその他のファイルの設定

W3 Total Cacheのブラウザキャッシュでは、画像や動画、音声ファイルと …