- 8月 13,09
- Category :Computers & Internet
少しでも快適なブログとなるように、Head Cleanerというプラグインを入れてみた
導入は検索すればでるので、設定そして確認までを記事にしてみた。
プラグインの概要
<head> の中身を整形しなおします。
IE6 以外の時は先頭に xml 宣言を付与。
重複タグや、不要なタグ、コメント、空白を削除。
タグが複数ある場合、一つにまとめる
タグが複数ある場合、一つにまとめる
話題の タグを追加。
IE コンディショナルタグを判定して、ブラウザが IE の時だけ対象タグを表示。
CSS, JavaScript は、ブラウザが対応していれば gzip 圧縮転送。
複数ある CSS を media 属性ごとに結合して一ファイルにまとめる。
もちろん、そのファイルには インライン CSS も含まれる。
CSSTidy を使用して CSS を最適化する。
CSSTidy の最適化オプションを管理画面で指定できる。
複数ある JavaScript をすべて結合して一ファイルにまとめる。
もちろん、そのファイルには インライン JavaScript も含まれる。
JSMin で、JavaScript のソースコードを圧縮する。
JavaScript をフッタ領域に移動することもできる。
フッタ領域の JavaScript も同様に結合して一ファイルにまとめる。
Prototype.js, jQuery, mootools が複数読み込まれている場合、１回だけ読み込むようにする。
Prototype.js, jQuery, mootools の読み込み順を修正して、できるだけコンフリクトが発生しないようにする。
三行でおｋ。
んで自分がした設定は
最終的には上記のSSの設定なんだけど、そこに行き着くまでに問題があった
「cssとjsをgzip圧縮転送」をチェックすると、Firefox3.5,Chrome2.0,Chrome3.0でスタイルが全く聞いていなかった。
IE8の場合はちゃんと表示されていたんだけどね。
「<head> 内の JavaScript を、フッタ領域に移動」をチェックするとLightbox2のプラグインと競合するのでオフに
これで無事表示できました。
パフォーマンスのチェックはYSlow for Firebugで行いました。
Firefoxのアドオンです。
導入前
導入後
E 56→D 64
ちゃんとパフォーマンスアップしています。
<head>までのソース行数も
48→17の約30行を省略
何か問題がありましたら、コメントでもくれたら助かります。
このブログで関連すると思われる他のエントリ
- Newer: 新デザイン
- Older: Clare Chronicleが遂にモバイル対応
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://clare-chronicle.net/2009/08/head-cleaner%e3%81%a7%e3%83%91%e3%83%95%e3%82%a9%e3%83%bc%e3%83%9e%e3%83%b3%e3%82%b9%e3%82%a2%e3%83%83%e3%83%97/trackback/
- Listed below are links to weblogs that reference
- Head Cleanerでパフォーマンスアップ from Clare Chronicle
