Posted by をかもと at 2009年2月20日 金曜日

WordPress にプラグインをガンガンと突っ込んでいくと <head> 部に、JavaScript やら CSS やらが、ドンドン追加されて、カオスなことになってしまいます。
そんな状態の自サイトを「YSlow for Firebug」で診断してみると、とても低いスコアになったりしてガックリ来るわけです。
プラグインを外したりしたくなかったりするので、チマチマと修正したりして使っていたんですが、プラグインのバージョンアップのたびに修正するのも面倒です。

そんな折、「WordPress Head Cleaner」というプラグインを見かけました。
これは、ひょっとして <head> 部を自動でキレイにしてくれるのか?と期待してダウンロードしてみたんですが、ソースを見てガッカリ。
ついカッとなって、こんなプラグインを作ってしまいました。

ダウンロード

Head Cleaner@WordPress Plugins
または
Head Cleaner (最適化&高速化)@JSeries

[2/24 6:00 追記] コメント蘭での、ゆりこさんからの指摘により、 Safari では拡張子が .gz の css, JavaScript を認識できないことが判明。
多分 「.gz」の Content-Type が 「text/javascript」 or 「text/css」 になっていないからだと思われます。
Ver.0.3.2 以降で、Safari に対しては gzip 圧縮されたファイルを転送しないように修正しました。
なお IE, Firefox, Opera, Chrome では、問題無いようです。

[2/25 8:00 追記]Ver. 0.4.0 から CSS もすべて結合することができるようになりました。
# ただし、デフォルトでは OFF になっています。
CSS 内の画像ファイル等への相対パスはすべて絶対パスに置き換えます。
制限事項としては、media 属性を気にせずにすべて結合し、media="screen" にしてしまうため、想定外の表示になる可能性もあります。
この辺は、後々修正します。

[2/26 12:30 追記]Ver. 0.5.x から、CSS と JavaScript をそれぞれ CSSTidyjsmin-php で圧縮できるオプションを付けました。
また、コメント欄でのゆりこさんからの指摘により、ユーザエージェントに「AppleWebKit」を含むブラウザ(ただし chrome は除く)からのリクエストがあった場合は .gz ファイルを転送しないように修正しました。
あと、簡単な注意書きを書いた「readme_ja.txt」を同梱したので、読んでやってください。

[3/4 18:30 追記]正式版のリリース準備版を公開しました。
今まで、php ファイルを直接修正していた各種設定は、管理画面の「設定」>「Head Cleaner」から行えます。
また、競合が報告されているプラグインと、その対処法について「readme_ja.txt」に書いてあります。
そちらも、ご一読ください。

[3/5 23:00 追記]正式版リリースしました。

概要

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

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

※制限事項
・SimpleXML でパースしていますので PHP 5 以降が必須になります。
 また <head> 部が、XML的に正しくないとパース出来ないので、このプラグインは動作しません。

→ Ver. 0.3.0 で、PHP Simple HTML DOM Parser でパースするようにしたため、わりかしルーズな (X)HTML でも通ると思います。
 PHP Simple HTML DOM Parser の制限上、PHP 5 以降必須です。

適用例

どうなるかは、ビフォー・アフタを見てもらえばわかりやすいかな?

適用前

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>独断と偏見の何でもレビュー</title>
<meta name="description" content="暇人による、暇人の為の何でもレビューもしくは日常メモ。since Feb. 27, 2005" />
<link rel="stylesheet" href="http://dogmap.jp/wp-content/themes/dogmap/style.css?ver=20081006" type="text/css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="http://dogmap.jp/favicon.ico" />
<link rel="icon" type="image/x-icon" href="http://dogmap.jp/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://dogmap.jp/feed/" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="http://dogmap.jp/feed/atom/" />
<link rel="alternate" type="application/rss+xml" title="ROR" href="http://dogmap.jp/sitemap.xml" />
<link rel="index" href="http://dogmap.jp/" />

<link rel="start" href="http://dogmap.jp/" title="Home" />
<link rel="appendix" href="http://dogmap.jp/about/" title="About" />
<link rel="pingback" href="http://dogmap.jp/xmlrpc.php" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://dogmap.jp/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://dogmap.jp/wp-includes/wlwmanifest.xml" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js'></script>
<script type='text/javascript' src='http://www.google.com/jsapi?key=ABQIAAAAdkdXbSzAaW3Z-fZ0VLiA-BTNLsTCkgAHG6R1rGrc2jhIZmfrTxQ-ueNTQFYw3AGOgb5OImln4sk1QA'></script>
<script type='text/javascript' src='http://dogmap.jp/wp-content/plugins/wp-autopager/js/wp-autopager-0.5.1.min.js?ver=0.5.1'></script>
<script type='text/javascript' src='http://dogmap.jp/wp-content/plugins/wp-lightpop/js/jquery.lightpop-0.7.5.min.js?ver=0.7.5'></script>
<script type='text/javascript' src='http://dogmap.jp/wp-includes/js/jquery/jquery.cookie.js?ver=1.0'></script>
<meta name="generator" content="WordPress 2.7.1" />

<style type="text/css" media="screen,tv,print,handheld"> /*<![CDATA[ */
div.googlemaps{width:300px;height:150px;clear:both;margin:1em auto;border:1px solid #999;line-height:1.25em;text-align:center;overflow:hidden;}
div.googlemaps img {margin:0;padding:0;border:0 none;max-width:none;max-height:none;}
div.googlemaps .infowindow {text-align:left;font-size:0.88em;}
div.googlemaps p {margin:0;text-indent:0;text-align:left;font-size:0.75em;}
/* ]]>*/ </style>
<link rel="alternate" media="handheld" type="text/html" href="http://dogmap.jp/" />
<link href="http://dogmap.jp/wp-content/plugins/syntax-highlighter/css/shCore.css?ver=2.0.287" type="text/css" rel="stylesheet" />
<link href="http://dogmap.jp/wp-content/plugins/syntax-highlighter/css/shThemeDefault.css?ver=2.0.287" type="text/css" rel="stylesheet" />

<meta name="robots" content="index,follow" />

<style type="text/css">/*<![CDATA[ */
#content {width: 97.5%;display: block;}
#r_sidebar {width: 17.5%; display: none;}
/*]]>*/</style>

<script type="text/javascript">/*<![CDATA[ */
var addLoadEvent = function(func){ if(typeof jQuery!='undefined'){jQuery(document).ready(func);} else if(typeof google.setOnLoadCallback!='undefined'){google.setOnLoadCallback(func);} else if(typeof wpOnload!='function'){wpOnload=func;} else {var oldonload=wpOnload; wpOnload=function(){oldonload();func();}}};
/* ]]>*/</script>
<script type="text/javascript">/* <![CDATA[ */
var googlemapsAnywhereL10n = { language:"ja",markerTitle:"Googleマップに移動",cssPath:"div.googlemaps",errMsgNoData:"エラー: ストリートビューのデータが見つかりません。",errMsgNoFlash:"エラー: お使いのブラウザは Flash に対応していないようです。",errMsgUnknown:"エラー: 不明なエラーです。"};
var lightpop={options:{ imageLoading:'/wp-content/plugins/wp-lightpop/images/lightpop-ico-loading.gif',imageBtnPrev:'/wp-content/plugins/wp-lightpop/images/lightpop-btn-prev.gif',imageBtnNext:'/wp-content/plugins/wp-lightpop/images/lightpop-btn-next.gif',imageBtnClose:'/wp-content/plugins/wp-lightpop/images/lightpop-btn-close.gif',imageBlank:'/wp-content/plugins/wp-lightpop/images/lightpop-blank.gif',flvplayer:'/wp-content/plugins/wp-lightpop/swf/mediaplayer.swf',contentFrameType:'border',overlayBgColor:'#FFF',contentBorder:'1px solid silver',setLinkToTitle:true,Image:{enabled:true,icon:'http://dogmap.jp/wp-content/plugins/wp-lightpop/images/icon-image.png',size:new Array(640,480)},Video:{enabled:true,icon:'http://dogmap.jp/wp-content/plugins/wp-lightpop/images/icon-video.png'},Contents:{enabled:true,icon:'http://dogmap.jp/wp-content/plugins/wp-lightpop/images/icon-contents.png',iframeEnabled:false},YouTube:{enabled:true,icon:'http://dogmap.jp/wp-content/plugins/wp-lightpop/images/icon-youtube.png',param:{'hl':'ja','autoplay':'1','fmt':'18'}},Metacafe:{enabled:false},LiveLeak:{enabled:false},GoogleVideo:{enabled:false},ifilm:{enabled:false},Dailymotion:{enabled:false},superdeluxe:{enabled:false},nicovideo:{enabled:false}},start:function(){}};
/* ]]> */</script>

</head>

適用後

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="暇人による、暇人の為の何でもレビューもしくは日常メモ。since Feb. 27, 2005" />
<meta name="generator" content="WordPress 2.7.1" />
<meta name="robots" content="index,follow" />
<title>独断と偏見の何でもレビュー</title>
<link rel="shortcut icon" type="image/x-icon" href="http://dogmap.jp/favicon.ico" />
<link rel="icon" type="image/x-icon" href="http://dogmap.jp/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://dogmap.jp/feed/" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="http://dogmap.jp/feed/atom/" />
<link rel="alternate" type="application/rss+xml" title="ROR" href="http://dogmap.jp/sitemap.xml" />
<link rel="index" href="http://dogmap.jp/" />
<link rel="start" href="http://dogmap.jp/" title="Home" />
<link rel="appendix" href="http://dogmap.jp/about/" title="About" />
<link rel="pingback" href="http://dogmap.jp/xmlrpc.php" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://dogmap.jp/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://dogmap.jp/wp-includes/wlwmanifest.xml" />
<link rel="alternate" media="handheld" type="text/html" href="http://dogmap.jp/" />
<link rel="canonical" href="http://dogmap.jp/" />
<link rel="stylesheet" type="text/css" href="http://dogmap.jp/wp-content/cache/head-cleaner/css/e938e5ff38c9d1b871d3ef8006dcbfd4.css" media="screen" />
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAdkdXbSzAaW3Z-fZ0VLiA-BTNLsTCkgAHG6R1rGrc2jhIZmfrTxQ-ueNTQFYw3AGOgb5OImln4sk1QA"></script>
<script type="text/javascript" src="http://dogmap.jp/wp-content/cache/head-cleaner/js/c2046402dd21ec3000596d55d75cc257.js"></script>
</head>

何ということでしょう!あんなに汚らしかった HTML コードが、こんなにもスッキリと!
しかも YSlow の結果も、適用前の F(53)と比べると、適用後は D(60)に改善されてます。

今後の予定

あとは指定タグを取り除く機能とか、xml 的に残念なソースでもそれなりにパースする機能とか、重複 JavaScript の削除機能とか付けたいですね。

あと、プラグインの名前も。
JSeries に既に「光画部」があるので、「営繕マン」とか良いかなと思いました。
「島崎くんはイルカの曲芸」です。(謎)

トラックバック & ピンバック » 表示する

コメント

  • hatena bookmark 2009年4月12日 日曜日 11:10 PM

    <head> の中身を整形してキレイにしてくれる、をかもとさん作のプラグイン。かなーり、スッキリします:D

  • JAPAN Windows Mozilla Firefox 2009年4月15日 水曜日 10:36 AM

    サイト表示が重くて困っていたのですが、導入させていただいたところ、素晴らしい効果のあるプラグインです。

    プラグイン「WP-lightpop 0.7.5」と同時に使用したところ、Head Cleanerは問題なく動作するのですが、WP-lightpopが動作しなくなりました(ポップアップしなくなりました)。
    IEの表示では「エラー:’lightpop’は宣言されていません。」と出ます。

    WP-lightpopを停止すると、エラーは解消されるようです。
    また、Head Cleanerを停止すると、WP-lightpopは元通り動作します(firefox,chromeなどでも同様です)。

    Head Cleaner設定画面で「有効なフィルタ → LightPopController::addHead → 対象外にチェック」してみましたが、変化ありませんでした(対処方法がまちがっているのかもしれませんが…)。
    ぜひともHead Cleanerを使用させていただきたいと思っていますので、設定等ありましたら、ご回答いただけると助かります。

    使用環境は↓になります。
    WordPressバージョン 2.7.1
    MySQL 5.1.22-rc

    MSTYL 返信
    • JAPAN Windows Mozilla Firefox 2009年4月15日 水曜日 12:57 PM

      MSTYL さん、はじめまして。

      Head Cleaner, wp-lightpop 共に私の作成したプラグインですが、私が作成したプラグイン用共通ライブラリ common-controller.php を含んでいます。
      たぶん、これのバージョンが違うことから発生しているのではないかと思われます。

      Head Cleaner 1.1.5, wp-lightpop 0.7.5 にバージョンアップ後、もしプラグインフォルダの includes/js サブフォルダ内に jquery-1.3.1.min.js (or jquery-1.3.2.min.js) が含まれていたら削除してみてください。
      これで直るかも。

  • JAPAN Windows Mozilla Firefox 2009年4月16日 木曜日 8:35 AM

    をかもとさま

    さっそくのご回答、ありがとうございます。
    ご指摘のとおり、jquery-1.3.2.min.jsがフォルダ内に残っていました。
    以前バージョンアップした時に、上書き?でアップロードしていたのかもしれません…
    一旦すべてを削除してアップロードしなおしたところ、どちらも問題なく動作するようになり、スッキリ解決いたしました。
    大変お手数をおかけしました。

    WP-lightpop & Head Cleanerともに、活用させていただいてます。
    ありがとうございました。

    MSTYL 返信
  • twitter 2009年7月12日 日曜日 3:54 AM

    bookmarked:
    Head Cleaner (仮) : dogmap.jp
    http://bit.ly/YHuub

    tag:
    WordPress

  • JAPAN Windows Mozilla Firefox 2009年7月26日 日曜日 10:08 AM

    こんにちは。
    WPのテーマにwp.Vicuna Ext. Customを使っているのですが、CSSの呼び出しが@import urlとなり、Head CleanerでのCSS最適化等が出来ていないように思います。もし可能でしたら@importにも最適化を対応して頂ければと思います。

    返信
    • JAPAN Ubuntu Linux Mozilla Firefox 2009年7月29日 水曜日 10:49 PM

      湊さん、はじめまして。

      現在のバージョンの Head Cleaner では @import url は一段目のみ対応していますが、入れ子になっている場合は対応していません。
      将来、対応するかもしれませんが、とりあえずはテーマを修正することで回避してください m(_ _)m

  • delicious 2009年8月7日 金曜日 2:41 PM

    JavaScriptやCSSをまとめて高速化するWordPressのプラグイン

  • JAPAN Ubuntu Linux Mozilla Firefox 2009年10月3日 土曜日 2:37 PM

    こんにちは。
    便利に使わせていただいています、が LightBox2プラグインとの相性が悪いようで
    Head Cleaner を有効にすると LightBox2が動作しなくなります。
    全フィルタを対象外にしても、動かないためお手上げです。
    対応してくださると助かります。

    余談ですが、Google Maps Anywhere を使用する際に「複数の JavaScript を結合する」を有効にすると
    うまく動作しませんでした。

    ういろうの国の人 返信
    • JAPAN Ubuntu Linux Mozilla Firefox 2009年10月3日 土曜日 2:40 PM

      あ、ごめんなさい
      LightBox2プラグインはこちらのです。
      http://www.stimuli.ca/

      ういろうの国の人 返信
      • JAPAN Windows Mozilla Firefox 2009年10月7日 水曜日 12:36 PM

        ういろうの国の人さん、はじめまして。

        Head Cleaner を有効にすると LightBox2が動作しなくなります。
        全フィルタを対象外にしても、動かないためお手上げです。
        対応してくださると助かります。

        現在、WordCamp Kyoto の準備やら何やらで忙しくて検証できていません。
        時間のあるときに確認してみますね。もう少々、お待ちください。

        余談ですが、Google Maps Anywhere を使用する際に「複数の JavaScript を結合する」を有効にすると
        うまく動作しませんでした。

        私は、問題ないんですけどね。
        Google Maps Anywhere・Head Cleaner 共に最新版にアップデートしてもダメでしょうか?
        私の作成しているプラグインは、一部ソースコードを共有しているものがあるので、すべてが最新じゃないとうまく動作しないことが稀にあります。
        この辺は、ご容赦ください。

  • twitter 2009年10月14日 水曜日 11:10 PM

    こりゃすごい http://bit.ly/GVacE

  • twitter 2009年10月14日 水曜日 11:11 PM

    こりゃウケる http://bit.ly/GVacE

  • delicious 2009年10月15日 木曜日 11:28 AM

    wordpress head綺麗にする

  • twitter 2009年12月10日 木曜日 3:37 AM

  • twitter 2010年5月19日 水曜日 11:21 PM

    この WP プラグインを導入すると、CSS と JS をまとめて圧縮してくれる。MT に移植して欲しい !!>どなたか [Head Cleaner (...] http://dogmap.jp/2009/02/20/head-cleaner/

  • hatena bookmark 2010年5月19日 水曜日 11:21 PM

    この WP プラグインを導入すると、CSS と JS をまとめて圧縮してくれる。MT に移植して欲しい !!>どなたか

  • twitter 2010年8月4日 水曜日 10:52 PM

    やばい素敵過ぎるへっだーくりーなー!RT @wokamoto: Head Cleaner (仮) – dogmap.jp http://dogmap.jp/wG

  • twitter 2010年8月5日 木曜日 11:14 PM

    こちらこそです^^同郷っぽいんでよろしくです^^@wokamoto ありがとう! RT @qroco: やばい素敵過ぎるへっだーくりー
    なー!RT @wokamoto: Head Cleaner (仮) – dogmap.jp http://dogmap.jp/wG

  • JAPAN Windows Mozilla Firefox 2010年8月19日 木曜日 3:32 PM

    wokamotoさん、お世話になります。

    以下の環境ですが、IE用のコンディショナルコメントが削除されてしまいます。

    ・WordPress: 2.9
    ・Theme: iNove 1.4.6 (http://wordpress.org/extend/themes/inove)
    ・Head Cleaner: 1.3.12
    ・設定:「メタタグ “canonical” を追加」のみチェック(デフォルト状態)
    ・有効化している他プラグイン:Akismet 2.3.0、WP Multibyte Patch 1.1.5

    チェックして頂けないでしょうか?

    ウェブサイトの下 wp-content/uploads/2010/08/ にHead Cleaner有効化前後のHTMLファイルを置いてあります。

    ・tokkono.cute.coocan.jp_before.html
    ・tokkono.cute.coocan.jp_after.html

    よろしくお願いします。

    • JAPAN Windows Mozilla Firefox 2010年8月19日 木曜日 6:50 PM

      Version 1.3.12.1 で削除されないことを確認しました。

      すばやいご対応ありがとうございました!

      • JAPAN Windows Google Chrome 2010年8月19日 木曜日 9:37 PM

        tokkonoPapa さん、どもです。

        こちらこそ、ご指摘感謝です。
        他にも、なにかお気づきの点があれば、バシバシとご指摘ください。

  • delicious 2010年8月19日 木曜日 6:15 PM

    他プラグインによる乱雑になるヘッダを整理し、読み込み速度を上げる。 しかしCSSの結合・最適化には難あり。

コメントする


Twitter ID を入力すると新しいコメントがあった際、 @dogmap_jp が、あなた宛に@リプライでお知らせします。

入力いただいたメールアドレスから、TwitterGravatar に登録されているアイコンを表示します。
(メールアドレスは公開されません)

改行と段落タグは自動で挿入されます。メールアドレスは表示されません。

:mrgreen: :-P :-D :-) ;-) :-o :-| :-( 8-O :-? 8-) :twisted: :evil: :oops: :roll: :cry: :lol: :-x more »