Head Cleaner

Head Cleanerは、HTMLのHEAD要素のHTMLソースを最適化してページ表示を高速化できるプラグインです。HEAD要素のHTMLソースを軽量化できます。

このプラグインを利用するとHEAD内のJavaScript・CSSの整理・統合・フッターへの移動ができます。HTMLソースを軽量化できるので上手く活用すればページ表示を高速化できます。

注意点としては、他のプラグインが生成したJavaScriptとCSSコードに変更を加えるので、他のプラグインのJavaScriptやCSSが正常に動作しなくなる場合もあります。その場合は、プラグインの設定でフィルタの対象外に指定しましょう。

はじめに

このプラグインが優れている点

  1. HTMLのHEAD要素のタグを自動的に整理・統合・フッターへの移動ができる。
  2. HTMLソースを軽量化できるので、上手く活用すれば、ページ表示を高速化できる。
  3. 除去するタグは管理画面で設定できる。
  4. JavaScriptとCSSをサーバー上にキャッシュできる。
  5. OGP(Open Graph Protocol)対応のメタタグを出力できる。

このプラグインが必要な理由

HTMLのHEAD要素に多数のJavaScriptとCSSが記述されていると、ページ表示が遅くなる原因になる場合があります。JavaScriptやCSSをフッターに移動させたり、ファイルを結合できる場合は、それらを移動・結合させてHTMLのHEAD要素を軽量化しましょう。そうすることで、ページ表示が速くなる場合があります。

特に、WordPressのプラグインを同時に多数利用している場合は、プラグインごとにJavaScriptとCSSが出力されているので、そのファイルを読み込む処理がページ表示を遅くしている場合もあります。

Head Cleanerを利用してページ表示が速くなるか試してみましょう。

HTMLを整形する内容について

Head Cleaner公式サイトの説明によると、このプラグインは、下記のようなタグの置き換え処理を行うとのこと。

  • IE6 以外の時は先頭に xml 宣言を付与。
  • 重複タグや、不要なタグ、コメント、空白を削除。
  • <meta name=”description” /> タグが複数ある場合、一つにまとめる。
  • <meta name=”keyword” /> タグが複数ある場合、一つにまとめる。
  • 話題の <link rel=”canonical” /> タグを追加。
  • IE コンディショナルタグを判定して、ブラウザが IE の時だけ対象タグを表示。
  • CSS, JavaScript は、ブラウザが対応していれば gzip 圧縮転送。
  • 複数ある CSS を media 属性ごとに結合して一ファイルにまとめる。もちろん、そのファイルには インライン CSS も含まれる。
  • CSS を圧縮する。
  • CSS に含まれる画像の URL を、データスキーマ URI に変換する。
  • 複数ある JavaScript をすべて結合して一ファイルにまとめる。もちろん、そのファイルには インライン JavaScript も含まれる。
  • JSMin で、JavaScript のソースコードを圧縮する。
  • JavaScript をフッタ領域に移動することもできる。
  • フッタ領域の JavaScript も同様に結合して一ファイルにまとめる。
  • Prototype.js, script.aculo.us, jQuery, mootools が複数読み込まれている場合、1回だけ読み込むようにする。
  • Prototype.js, script.aculo.us, jQuery, mootools の読み込み順を修正して、できるだけコンフリクトが発生しないようにする。
  • CSS @import を展開して結合する。 (Ver.1.1.0 以降)
  • 管理画面より JavaScript を個別指定して、フッタに移動する。 (Ver.1.1.0 以降)

インストール方法

管理画面から検索してインストールして下さい。もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

  1. WordPress管理画面 > プラグイン > 新規追加 >「Head Cleaner」で検索
  2. WordPress.org からダウンロード

使用上の注意点

Head Cleanerは、他のプラグインやテーマのJavaScript/CSSに影響を与え、JavaScriptやCSSがエラーになる場合があります。このプラグインを利用する場合は、必ず動作確認を行いましょう。

もし、このプラグインをインストールした後にJavaScriptやCSSが動作しなくなったら、このプラグインを停止するか、プラグインの設定で「フィルタの対象外」に指定してみて下さい。

管理画面の設定

プラグインの管理画面は、全て日本語表記です。読めば分かるので、要点のみ解説します。

管理画面の概略

重要な部分のみに赤文字で補足説明を書きました。各機能に関しては、下記の補足説明を参照して下さい。

Head Cleaner

補足説明

管理画面にある設定項目の補足説明を下記にまとめました。もし、用語の意味が分からなかったら参考にして下さい。

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

CSS と JavaScript をサーバー上にキャッシュしてページ表示を高速化できる。

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

ヘッダーのスクリプトをフッターに移動させてソースの軽量化を図ります。

Google Ajax Libraries を利用する

JavaScriptライブラリーを組み込みます。

XML宣言を付与

IE6 以外の時は先頭に xml 宣言を付与できる。

メタタグ canonical を追加

Webページの重複を防ぐ効果のあるメタタグを追加できる。

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

Facebookなどのソーシャルメディアに更新情報を投稿する為のメタタグを追加できる。

メタタグ generator を削除

何のツールを利用してWebサイトを制作しているかを宣言するメタタグを削除できる。

リンクタグ RSD を削除

他のアプリケーションを使って記事を投稿する為のメタタグを削除できる。

リンクタグ wlwmanifest を削除

Windows Live Writerを使って記事を投稿する為のメタタグを削除できる。

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

Internet Explorer の古いバージョン用に書かれたタグを削除できる。

メタタグ Last Modified を追加

メタタグの最終更新日のタグを追加できます。

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

HTMLソースから改行やスペースを除去し、可能な限りHTMLソースを軽量化しようとします。この機能を利用すると、HTMLを軽量化できますが、JavaScriptが正常に動作しなくなる場合があるので注意して利用して下さい。

まとめ

Head Cleanerは、HEADのソースから無駄な部分を除去してHTMLソースを最適化してくれます。上手く活用すればページ表示の高速化できます。

HTMLのヘッダーのソースがコンパクトになるのでお勧めのプラグインです。ただ、このプラグインは他のプラグインが出力したスクリプトやCSSに影響を与える場合が多々ありあます。このプラグインを利用する場合は、動作確認を行った上で利用しましょう。

スポンサーリンク