Head Cleaner (仮) – ここまでのまとめ

13件の返信

さて、先日から「Head Cleaner (仮)」を、夜半になると Twitter 上で公開しては修正、機能アップを繰り返してきたのですが、盛り込みたかった機能もかなり盛り込めたので、これより熟成期間に入ります。
で、熟成期間に入る前に今までの経緯をまとめておきます。
まずは、このプラグインの基本的な動作原理。

WordPress のテーマテンプレート inex.php や single.php に <?php get_header(); ?> って記述があると思いますが、これが呼ばれた時に動作を開始します。
この時は、まだ ob_start で、バッファ取得開始するだけ。
header.php の <?php wp_head(); ?> が呼ばれた時点でバッファ取得を終了し、書き出された文字列を解析して整形します。

やってることは、これだけ。
まだまだ開発途上のプラグインですが、人柱になっていただいている方々、ありがとうございます m(_ _)m
不具合は色々と出てきましたが、私は元気です。

さて、では以降は今までの経緯のまとめ。

Ver.0.1.x 公開

まずは、最初のバージョン 0.1.0 、このバージョンでの、主要機能は４つ。

<head> 内の余計な空白、コメントを削除してタグを整列させる。
インライン JavaScript、CSS を外部ファイルとして書き出します。
ブラウザが IE6以外の場合のみ、先頭に XML 宣言を付加。
話題の <link rel="canonical" /> タグを付加。

この時は、まだ (X)HTML の解析に SimpleXML を使用していたので、XML 的に残念なヘッダを吐いているプラグインがあると動作しませんでした。

作成後、Twitter でつぶやいたら @hiromasa に食いつかれました。
コレだけでも、十分にインパクトはあったようです。

Ver.0.2.x JavaScript 結合

次のバージョン 0.2.xでは、内部リンクしている JavaScript とインライン JavaScript をすべて結合して、一ファイルにする機能を付加しました。
また、<head> 内の JavaScript をフッタ部に移動させる機能も追加しました。
これで YSlow 値が急上昇。
気を良くして、ブログにエントリしました。

ただし、このバージョンでも相変わらず SimpleXML で (X)HTML の解析をしていたので、私のところとhiromasaさんのテスト環境ぐらいでしか、まともに動作しませんでした。

Ver.0.3.x Simple HTML DOM Parser 導入

続く、バージョン 0.3.xでは、(X)HTML の解析に SimpleXML ではなく、PHP Simple HTML DOM Parser を使用するように変更しました。
これで、かなりのサイトで動作するようになりました。
このバージョン辺りから、kohaku さんや、yutaka さんのサイトで導入してもらい始めました。
こんな、まだまだ不具合の多いα版なのに人柱ありがとうございます m(_ _)m

また、ゆりこさんからの指摘で、JavaScript、CSS に拡張子が「.gz」なファイルを使用していると Safari で、正常に認識できないことが発覚。
実は JavaScript、CSS の gzip 圧縮転送は、ブラウザのリファラを確認して HTTP_ACCEPT_ENCODING に gzip が設定されているかどうかだけで判断し、gzip 圧縮転送に対応していたら、JavaScript、CSS のファイル名を .gz 付きに置換していたのですが…
どうやら、拡張子が「.gz」のファイルの Content-Type は、「text/css」でも「text/javascript」でもないため Safari では正常に認識してくれないようです。
# Safari 以外のブラウザが、お節介にも認識してくれてる方がおかしいような気も…

これについては、各ブラウザの仕様が将来変更されて、正しい Content-Type でないと認識できなくなるかも知れないので、将来のバージョンでは他の方法で対応するように検討中です。

ver.0.4.x CSS 結合

そして、バージョン 0.4.xでは、内部リンクしている CSS もすべて結合して一ファイルにするようになりました。
CSS 内では URL を相対パスで書いてあることが多く、結合して基準パスが変わると、まともに動作しなくなってしまうおそれがあったため、これまでのバージョンでは手をつけなかったのですが、相対パスを絶対パスに変換することで結合できるようにしました。
まぁ、この機能は次バージョンでの新機能に対する布石だったわけですが…

ver.0.5.x CSS 最適化、JavaScript 圧縮

さて、現在のところの最新版バージョン 0.5.xでは、ついに CSS, JavaScript の圧縮に対応しました。

CSS は CSSTidy、JavaScript は jsmin-php を使用することによって、ソースのファイルサイズ自体を小さくします。
もう、すでにヘッダの整形プラグインではなくて、WordPress サイトのフロントエンド高速化プラグインと言っても過言では無いくらいの機能追加ではないでしょうか？
これにより、私のところではトップページのファイル転送量が 226.4kb → 170.5kb と -25% のダイエット成功。
凄いぜキット！

ただ yutaka さんのところで、私の作ったWPプラグイン「WP-lightpop」が、一部ブラウザ（IE, Chrome）で動作しなくなることが判明。
私のところでは、正常に動作しているのになんで yutaka さんのところだけ…

色々と試してみた結果、どうやら Prototype.js ver.1.6.0.x と、jQuery ver.1.3.2 の組み合わせが悪いようです。
Head Cleaner (仮) では、CSS セレクタが高速になった jQuery 1.3.2 をロードするようになっているのですが、これがうまくないようです。

次バージョンで Prototype.js, jQuery.js のバージョンを判断して適切なものを使うように修正します。
また JavaScript ライブラリの重複ロード問題についても対応します。
たぶん、この機能が盛り込めたら最後のβ版になるでしょう。

開発期間的にはホンの１週間だけでしたが Twitter やら（@hiromasa、@binsan、@kohaku_ori、@darumen、@satchin1226 thx）、ブログのコメント欄やら（ゆりこさん、Ｊ君、ajin さん thx）で、色々とご助言・テストありがとうございました。
非常に楽しい開発期間でした。こんなスタイルのプログラミングも楽しくて良いですね。

Head Cleaner (仮) を取り上げていただいたエントリ

最後に Head Cleaner (仮) を取り上げていただいた方のエントリを列挙しておきます。
こんな、未完成のプラグインを取り上げて紹介していただき、ありがとうございました m(_ _)m