ヘッダとフッタがみちがえるほど綺麗になる wordpress plugin 「Head Cleaner (仮)」

ヘッダとフッタがみちがえるほど綺麗になる wordpress plugin 「Head Cleaner (仮)」このエントリをはてなブックマークに追加 このエントリをはてなブックマークに追加

FavoriteLoading[New!]お気に入りに追加
Published: 2009 3/1 日Posted in: web2.0Tags: ,
このエントリをつぶやくこのWebページのtweets このエントリーを含むはてなブックマークはてなブックマーク - ヘッダとフッタがみちがえるほど綺麗になる wordpress plugin 「Head Cleaner (仮)」 この記事をクリップ！Livedoorクリップ - ヘッダとフッタがみちがえるほど綺麗になる wordpress plugin 「Head Cleaner (仮)」 Googleブックマークに追加 Yahoo!ブックマークに登録 BuzzurlにブックマークBuzzurlにブックマーク Share on Tumblr FC2ブックマークへ追加 newsing it!

＊＊＊

これはすごい。

久しぶりにwordpressのプラグインで感動したので紹介してみます。

Head Cleaner (仮) : 独断と偏見の何でもレビュー

<head> の中身を整形しなおします。

端的に説明すれば、ヘッダとフッタに分散したjs+cssをそれぞれ圧縮・結合・整列してくれるプラグインです。

特にwordpressというのは沢山プラグインを追加していくうちに、プラグインごとにコードを吐いてwp_header()内に書き出していくので、ヘッダにスクリプトやらタグやらが散らかりがちです。

これが非常に見てくれが悪くてどうにかならんかなぁと悩んでいたのですが、このプラグインでさくっと気持ちいいまでに解決してしまいました。

Example

まずは、実際に例を見ていただいたほうがよいでしょう。

適用前 

<br />
< !DOCTYPE html PUBLIC "-//<abbr title="World-Wide Web Consortium">W3C//DTD <abbr title="eXtensible HTML">XHTML</abbr> 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"><br />
<head profile="http://gmpg.org/xfn/11"><br />
<meta http-equiv="Content-Type" content="text/html; charset=<abbr title="8-bit UCS Transformation Format">UTF-8" /> </p>
<p> <meta name="author" content="だい亜りー" /><br />
<meta name="copyright" content="だい亜りー" /><br />
<title>だい亜りー</title></p>
<style type="text/css" media="screen">
@import url( http://blog.ajin.jp/wp-content/plugins/css-compress.php/wp-content/themes/NEwsPaper/style.css );
@import url( http://blog.ajin.jp/wp-content/themes/NEwsPaper/images/tableskin/style.css );
@import url( http://blog.ajin.jp/wp-content/themes/NEwsPaper/tags.css );
@import url( http://blog.ajin.jp/wp-content/themes/NEwsPaper/feature.css );
</style>
<p><!--[if <abbr title="インターネットエクスプローラ: Internet Explorer">IE 6]><br />
<script type="text/javascript" src="http://blog.ajin.jp/wp-content/themes/NEwsPaper/iepngfix.js"></script></p>
<link rel="stylesheet" type="text/css" href="http://blog.ajin.jp/wp-content/themes/NEwsPaper/ie-lte-6.css" />
< ![endif]--><br />
<!--[if <abbr title="インターネットエクスプローラ: Internet Explorer">IE 7]></p>
<link rel="stylesheet" type="text/css" href="http://blog.ajin.jp/wp-content/themes/NEwsPaper/ie7fix.css" />
< ![endif]--></p>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://blog.ajin.jp/feed" />
<link rel="alternate" type="text/xml" title="RSS .92" href="http://blog.ajin.jp/feed/rss" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://blog.ajin.jp/feed/atom" />
<link rel="alternate" type="application/atom+xml" title="ライトノベルカテゴリのフィード" href="http://blog.ajin.jp/category/lightnovel/feed" />
<link rel="alternate" type="application/atom+xml" title="アニメカテゴリのフィード" href="http://blog.ajin.jp/category/anime/feed" />
<link rel="alternate" type="application/atom+xml" title="自作<abbr title="パーソナルコンピュータ: Personal Computer">PCカテゴリのフィード" href="http://blog.ajin.jp/category/selfbuild-pc/feed" />
<link rel="alternate" type="application/atom+xml" title="web製作カテゴリのフィード" href="http://blog.ajin.jp/category/web20/feed" />
<link rel="pingback" href="http://blog.ajin.jp/xmlrpc.php" />
<link rel='archives' title='2009 年 3 月' href='http://blog.ajin.jp/2009/03' />
<!-- （中略） --></p>
<link rel="archives" title="2007 年 7 月" href="http://blog.ajin.jp/2007/07" />
<p><script type="text/javascript" src="http://blog.ajin.jp/wp-content/themes/NEwsPaper/jquery/jquery-1.2.6.min"></script><br />
<script type="text/javascript" src="http://blog.ajin.jp/wp-content/themes/NEwsPaper/jquery/jquery.easing.1.3"></script><br />
<script type="text/javascript" src="http://blog.ajin.jp/wp-content/themes/NEwsPaper/jquery-ui-1.5b3.packed.js"></script><br />
<script type="text/javascript" src="http://blog.ajin.jp/wp-content/themes/NEwsPaper/jquery-ui-1.5b3.effects.packed.js"></script><br />
<script type="text/javascript" src="http://blog.ajin.jp/wp-content/themes/NEwsPaper/jquery/tablesorter.min.js"></script><br />
<script type="text/javascript" src="http://blog.ajin.jp/wp-content/themes/NEwsPaper/jquery/jquery.corner.js"></script><br />
<script type="text/javascript" src="http://blog.ajin.jp/wp-content/themes/NEwsPaper/jquery/jquery.cvcorner.js"></script><br />
<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script></p>
<p><script type="text/javascript">
Hatena.Star.Token = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';</p>
<p>Hatena.Star.SiteConfig = {
entryNodes: {
'div.post': {
uri: 'h3.storytitle a',
title: 'h3.storytitle img',
container: 'h3.storytitle'
}
}
};
</script></p>
<p><script type="text/javascript">
jQuery.noConflict();
jQuery(function($){</p>
<p> $(".featureItem, #minilogo, .tag-cloud-container").hover(function () {
$(this).css({cursor : 'move'});
$(this).draggable({
revert: true,
cursor: 'move',
opacity: 0.8 ,
stop : function(){
if($(this).attr('id')=="minilogo") $(this).show('drop',{direction: 'right' , easing: 'easeOutBounce'});
}
}); </p>
<p> } ,
function () {
$(this).css({cursor : 'default'});
});</p>
<p> $("#head-widget").show('drop',{ direction: 'up' , easing: 'easeOutBounce'},3000);
$(".sortable").tablesorter();
$(".sortable tr:odd").addClass("odd");
$(".sortable tr:even").addClass("even");</p>
<p> $(".comment-item:even").corner("tr 12px").corner("tl 12px").corner("bl 12px").corner("sculpt br 12px");</p>
<p> $(".comment-item:odd").corner("tr 12px").corner("tl 12px").corner("sculpt bl 12px").corner("br 12px");</p>
<p> $(".trackback-item").cvcorner({
tl: { radius: 30 },
tr: { radius: 8 },
br: { radius: 8 },
bl: { radius: 8 }
});
$(".minilog-list dt").cvcorner({
tl: { radius: 10 },
tr: { radius: 10 },
br: { radius: 10 },
bl: { radius: 10 }
});</p>
<p> $(".foot-content-container,.trackback-mini-container").cvcorner({
tl: { radius: 15 },
tr: { radius: 15 },
br: { radius: 15 },
bl: { radius: 15 }
});</p>
<p> $(".fukidashi").fadeIn(3500);</p>
<p> $(".fukidashi-hide").click(function() {
$(".fukidashi").fadeOut(500);
});
$(".fukidashi-hide").css('cursor','pointer');
$(".fukidashi").css('cursor','auto');</p>
<p>var msiefix = {</p>
<p> _ifie_ : function() {
$(".storytitle a").one("mouseover", function () {
$('.storytitle').effect('bounce', { distance: 6, times: 2 });
});
},
_else_ : function() {
$(".storytitle a").mouseover(function () {
$('.storytitle').effect('bounce', { distance: 6, times: 2 });</p>
<p> });
$(".corner-box").corner("dog tr 15px").corner("tl 30px").corner("bottom 15px");
//$("#minilogo").show('drop',{direction: 'up'}, 3500);
}</p>
<p>}</p>
<p>jQuery.browser.msie ? msiefix._ifie_() : msiefix._else_(); </p>
<p>});
</script></p>
<p><!-- all in one seo pack 1.4.7 [435,457] --><br />
<meta name="description" content="深夜アニメとjQueryとライトノベルが好きなItary亜人のウェブログ。最近のマイブームはしゅごキャラ！。" /><br />
<meta name="keywords" content="とある魔術の禁書目録,★★★★,カズアキ,ガガガ文庫,時間商人,水市恵,とらドラ！,とらドラ！(アニメ),まりあ†ほりっく" /><br />
<!-- /all in one seo pack --></p>
<style type="text/css">
ol.footnotes li {list-style-type:decimal;}
.footnotes-container {
background:#aaa none repeat scroll 0 0;
border:1px solid #DDDDDD;
font-size:10px;
margin:28px auto 18px;
width:400px;
padding:2px;
} </style>
<p> <script type="text/javascript" src="http://blog.ajin.jp/wp-content/plugins/innerfade/innerfade.js"></script></p>
<p><script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(
function(){
jQuery('ul.innerfade').innerfade({
speed: 1000,
timeout: 5000, // Tiempo de espera entre transiciones en milisegundos
type: 'random_start', // Orden: 'sequence', 'random' o 'random_start'
containerheight: '260px' // Esto establece el alto en pixeles de las imagenes
});
});
</script></p>
<style type="text/css" media="screen">
/* Innerfade */</p>
<p>.innerfade {
padding: 0 !important;
text-align:center;
width: 100%;
}
.innerfade li {
position : absolute;
left : 0 !important;
}
div .entry-content .innerfade li {
list-style: none !important;
width: 100%;
}
</style>
<p><script type="text/javascript" charset="utf-8">
var keybuffer = "";
document.onkeypress = function(e) {
var target;
if (window.event)
target = window.event.srcElement;
else
target = e.target;</p>
<p> if (target.tagName.toUpperCase() == "INPUT") return;</p>
<p> var keyToMatch = "az";
if (window.event) // <abbr title="インターネットエクスプローラ: Internet Explorer">IE</abbr>
keybuffer += String.fromCharCode(window.event.keyCode);
else
keybuffer += String.fromCharCode(e.charCode);</p>
<p> if (keyToMatch.indexOf(keybuffer) != 0)
keybuffer = "";</p>
<p> if (keyToMatch == keybuffer)
{
location.href = "http://blog.ajin.jp/wp-admin";
keybuffer = "";
} </p>
<p> return true;
}
</script></p>
<link rel="alternate" media="handheld" type="text/html" href="http://blog.ajin.jp/" />
<p><!-- Start Of Script Generated By <abbr title="WordPress">WP-PageNavi 2.40 --></p>
<link rel="stylesheet" href="http://blog.ajin.jp/wp-content/plugins/wp-pagenavi/pagenavi-css.css" type="text/css" media="screen" />
<!-- End Of Script Generated By <abbr title="WordPress">WP-PageNavi 2.40 --></p>
<p><!-- Start Of Script Generated By <abbr title="WordPress">WP-UserOnline 2.40 --><br />
<script type="text/javascript">
/* < ![CDATA[ */
var useronline_ajax_url = 'http://blog.ajin.jp/wp-content/plugins/wp-useronline/wp-useronline.php';
var useronline_timeout = 300000;
/* ]]> */</p>
<p></script><br />
<script type='text/javascript' src='http://blog.ajin.jp/wp-includes/js/tw-sack.js?ver=1.6.1'></script><br />
<script type='text/javascript' src='http://blog.ajin.jp/wp-content/plugins/wp-useronline/useronline-js-packed.js?ver=2.40'></script><br />
<!-- End Of Script Generated By <abbr title="WordPress">WP-UserOnline 2.40 --></p>
<link rel="stylesheet" href="http://blog.ajin.jp/wp-content/plugins/wpj-highslide/highslide-nb.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://blog.ajin.jp/wp-content/plugins/wpj-highslide/highslide/highslide.js"></script><br />
<script type="text/javascript">
hs.graphicsDir = 'http://blog.ajin.jp/wp-content/plugins/wpj-highslide/highslide/graphics/';
window.onload = function() {
hs.preloadImages(5);
}
</script>
</link>
<link type="text/css" rel="stylesheet" href="http://blog.ajin.jp/wp-content/plugins/syntaxhighlighter-plus/syntaxhighlighter/styles/shCore.css"></link>
<link type="text/css" rel="stylesheet" href="http://blog.ajin.jp/wp-content/plugins/syntaxhighlighter-plus/syntaxhighlighter/styles/shThemeRDark.css"></link>
</meta></head><br />

適用後 

<br />
< ?xml version="1.0" encoding="UTF-8"?><br />
< !DOCTYPE html PUBLIC "-//<abbr title="World-Wide Web Consortium">W3C//DTD <abbr title="eXtensible HTML">XHTML</abbr> 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
</html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"><br />
<head profile="http://gmpg.org/xfn/11"><br />
<meta http-equiv="Content-Type" content="text/html; charset=<abbr title="8-bit UCS Transformation Format">UTF-8" /><br />
<meta name="author" content="だい亜りー" /><br />
<meta name="copyright" content="だい亜りー" /><br />
<meta name="description" content="深夜アニメとjQueryとライトノベルが好きなItary亜人のウェブログ。最近のマイブームはしゅごキャラ！。" /><br />
<meta name="keywords" content="とある魔術の禁書目録,★★★★,カズアキ,ガガガ文庫,時間商人,水市恵,とらドラ！,とらドラ！(アニメ),まりあ†ほりっく" /><br />
<title>だい亜りー</title></p>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://blog.ajin.jp/feed" />
<link rel="alternate" type="text/xml" title="RSS .92" href="http://blog.ajin.jp/feed/rss" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://blog.ajin.jp/feed/atom" />
<link rel="alternate" type="application/atom+xml" title="ライトノベルカテゴリのフィード" href="http://blog.ajin.jp/category/lightnovel/feed" />
<link rel="alternate" type="application/atom+xml" title="アニメカテゴリのフィード" href="http://blog.ajin.jp/category/anime/feed" />
<link rel="alternate" type="application/atom+xml" title="自作<abbr title="パーソナルコンピュータ: Personal Computer">PCカテゴリのフィード" href="http://blog.ajin.jp/category/selfbuild-pc/feed" />
<link rel="alternate" type="application/atom+xml" title="web製作カテゴリのフィード" href="http://blog.ajin.jp/category/web20/feed" />
<link rel="pingback" href="http://blog.ajin.jp/xmlrpc.php" />
<link rel="archives" title="2009 年 3 月" href="http://blog.ajin.jp/2009/03" />
<!-- （中略） --></p>
<link rel="archives" title="2007 年 7 月" href="http://blog.ajin.jp/2007/07" />
<link rel="alternate" media="handheld" type="text/html" href="http://blog.ajin.jp/" />
<link rel="canonical" href="http://blog.ajin.jp/" />
<link rel="stylesheet" type="text/css" href="http://blog.ajin.jp/wp-content/cache/head-cleaner/css/50f155b3b2ed9c20dc5895643bbe9c7a.css.gz" media="screen" />
</link></meta></head><br />

（jsはフッタに結合して移動。）

これでこのプラグインの凄さが分かるはず。

圧縮+ HTTP リクエストの削減によってフロントエンドの処理速度が改善されるのは勿論のことですが、何よりもこの美しく整列したヘッダのタグ群を見て頂きたい。

これぞコーディングオタ垂涎の美しさ。まさかwordpressでこの喜びを実現できようとは思いもしませんでした。cssの読み込みが1リクエストで達成できるし、jsもスマートに纏められている。あれだけ雑然としていたヘッダが見違えるくらいに整理整頓されています。

なお、設定はまだ直接ファイルの設定項目を書き換える必要がありますが、柔軟なオプションが揃っているので一通り確認してみてください。

あなたのサイトにあったチューニングが見つかるはず。

パフォーマンスがどれほど向上するのかは、以下で詳しく纏められています。
Head Cleaner (仮) で、なぜ速くなるのか？ : 独断と偏見の何でもレビュー

生成したファイルを一時バッファに格納して整形するという性質上、相性問題の出やすいプラグインではありますが、それを押して余る魅力があるのも確かだと思います。

インストール方法

こちらより zipファイルをダウンロードし、プラグインの新規追加よりzipパッケージを指定してインストールすれば完了です。
項目を設定するにはhead-cleaner.phpの冒頭にある設定項目を直接編集します。管理画面は正式リリースで実装予定とのこと。通常ではデフォルトの設定のままでも問題ないと思われます。
バージョン履歴は以下でまとめで取り上げられています。
Head Cleaner (仮) - ここまでのまとめ : 独断と偏見の何でもレビュー

現在判明していること

Google Analyticsのトラッキングコードを圧縮されてしまうと、document.writeでの書き出しから読み出しまでにタイムラグがあるのか、_gatを実行する際にjavascriptエラーが出ます。これでは正しくトラッキング出来ないのですが、以下の書式 

<script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script><br />
<script type="text/javascript">
var pageTracker = _gat._getTracker("'.uga_get_option('account_id').'");
pageTracker._initData();
pageTracker._trackPageview();
</script>

またはjQueryをテーマで使用している場合に 

<script type="text/javascript">
var gaJsHost=(("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
jQuery(function(){var pageTracker = _gat._getTracker("UA-xxxx-xx");
pageTracker._initData();
pageTracker._trackPageview();
});
</script>

と書くことでとりあえず回避することが出来ます。

また、この既知の問題は将来のリリースで対策予定だそうです。

あなたもHead Cleaner (仮)を導入して ――フロントエンドの高速化を図ろう。

というわけで、以上Head Cleaner (仮)の紹介でした。

現在まだベータ版のようですが、リリース前の熟成期に入ったようなので待ちきれずに一足先に紹介してしまいました。

サイトのモッサリ感に悩んでいるアナタ、もしくはヘッダの雑然としたタグたちにコーディングオタの血が気持ち悪くて仕方ないと嘆いているアナタ、サーバーサイドでも耐えずキャッシュの調整を試みているパフォーマンス狂のアナタ。

そんなあなたにおすすめです。

via : Head Cleaner (仮) : 独断と偏見の何でもレビュー

Post to Twitter Tweet This Post

関連エントリー

About the Author

Itary亜人：ラノベと深夜アニメが主食の装飾系（webデザイン趣向的な意味で）ヘタレ男子。
Initializing...