どうしたらいいのNAVI

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

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

      2015/11/07


WordPressでブログを運営している人でHead Cleanerを使ってブログパフォーマンスを向上させようとしている人は多いでしょう。
Head CleanerにはヘッダーのJavaScriptをフッターに移動させる設定があり、JavaScriptをフッタ領域に移動させる事で記事の表示を高速化するというものです。

 
設定自体はとても簡単に設定する事が出来きて、その上効果も高い反面、ヘッダーのJavaScriptをフッタに移動させる事そのものはとても奥が深く、深い理解が無いとブログの動作に不具合をおこす事もあるので注意が必要なのです。

 
Head CleanerのヘッダのJavaScriptをフッターに移動させる設定について簡単でわかりやすく、詳しく解説しているのでチェックしていってください。

 

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

 

ヘッダーのJavaScriptをフッタに移動させる設定とは

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

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

 

ブログに訪問してくるユーザは何よりも記事の内容を読みに来ているので、JavaScriptの読み込みが終わらないからと言って記事の表示を妨げるようなつくりとなっているのは、やはりユーザーにとっても不便さを感じる原因になってしまうので、JavaScriptはヘッダーで読み込む事が必須で無い限りはフッタで読み込むのが良いです。

 

画像の例ではヘッダーのJavaScriptをフッタに移動させる設定になっています。

 

 

有効化する事で変更されるHTML

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

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

 
画像の例は<head> 内の JavaScript を、フッタ領域に移動の設定が無効化されている場合と、設定を有効化したした場合に作成されるHTMLをdfツールで比較した一例です。
 

 

 

 

JavaScriptをフッタに移動させる上での注意点

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

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

 
設定の仕方によってはもしかするとフッターに移動させたとしてもjQueryが使用できる可能性がありますが、動作しない事のある現状では、jQueryはフッタ領域に移動させないようにするか、もしくはHead Cleanerそのもののプラグラムを修正してカスタマイズするしかないでしょう。(どうすれば良いのかは調査中です)

 

 

 

 

スポンサーリンク


ヘッダーのJavaScriptをフッタに移動させる設定!を読むうえで知っておきたい知識

ヘッダーのJavaScriptをフッタに移動させる設定!を読むうえで知っておきたい知識
ヘッダーのJavaScriptをフッタに移動させる設定!を読む上で知っておきたい事について紹介します。
何かに困った時に他の方法を思いついたり、用語がわからなくて読みづらいと感じた場合は、これから紹介する事を参考にしてみてください。

 

 

 

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では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はフッター領域で読み込まれる事となります。

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

 

 

 

 

ヘッダーのJavaScriptをフッタに移動させる設定! あとがき

ヘッダーのJavaScriptをフッタに移動させる設定! あとがき
Head Cleanerを使ってヘッダーのJavaScriptをフッタに移動させる設定について解説しました。

 
ヘッダーのJavaScriptをフッタに移動させる事で、レンダリングがブロックされない為、ブログのパフォーマンスが高速化されるのは良い事なのですが、HTMLやJavaScript等の技術的な面で不具合が出る可能性もゼロではないので、しっかりと内容を理解して使用していきたいですね。

 
もし、フッタに移動する事で不具合を起こすようなJavaScriptがあった場合はしっかりとJavaScriptの対象外設定する事で、パフォーマンスを上げつつ、ブログの正常な動作も担保していきましょう。

 
しっかりと内容を把握していれば、何かあった時も安心ですね。

 

 

 

 

ヘッダーのJavaScriptをフッタに移動させる設定! まとめ

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

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

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

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

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

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

 

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

スポンサーリンク





 - Wordpress , , , , , ,

Message

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

  関連記事

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

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

【W3 Total Cache】ブラウザキャッシュ(Browser Cache)を設定しよう!
【W3 Total Cache】ブラウザキャッシュ(Browser Cache)を設定しよう!

W3 Total Cacheにはブラウザキャッシュに関する詳細な設定を行う事が出 …

【Wordpress開発環境】Wordpressのテーマ・プラグインの開発環境を構築する[Windows7]
【WordPress開発環境】WordPressのテーマ・プラグインの開発環境を一から構築する[Windows7]

WordPressについて知れば知るほど、「オリジナルのテーマを作成したい」「自 …

【Quick Adsense】画像の後に広告を自動挿入するQuick Adsenseの設定
【Quick Adsense】画像の後に広告を自動挿入するQuick Adsenseの設定

画像の後に広告を掲載したいな~なんて考えている人も居るのではないでしょうか。 ブ …

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

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

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

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

【Quick Adsense】好きな段落の後に広告を挿入するQuick Adsenseの設定
【Quick Adsense】好きな段落の後に広告を挿入するQuick Adsenseの設定

広告を掲載していると「自分はリード文を書くのに3段落と決めているから、その段落の …

【W3 Total Cache】レスポンシブテーマでPCとスマホの広告位置が一緒に!? 原因と対処方法
【W3 Total Cache】レスポンシブテーマでPCとスマホの広告位置が一緒に!? 原因と対処方法

W3 Total Cacheを入れてWordpressのブログを高速表示させよう …

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

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

【W3 Total Cache】データベースキャッシュ(Database Cache)を設定しよう!
【W3 Total Cache】データベースキャッシュ(Database Cache)を設定しよう!

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