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 をそれぞれ CSSTidy、jsmin-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="https://dogmap.jp/wp-content/themes/dogmap/style.css?ver=20081006" type="text/css" media="screen" /> <link rel="shortcut icon" type="image/x-icon" href="https://dogmap.jp/favicon.ico" /> <link rel="icon" type="image/x-icon" href="https://dogmap.jp/favicon.ico" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="https://dogmap.jp/feed/" /> <link rel="alternate" type="application/atom+xml" title="Atom" href="https://dogmap.jp/feed/atom/" /> <link rel="alternate" type="application/rss+xml" title="ROR" href="https://dogmap.jp/sitemap.xml" /> <link rel="index" href="https://dogmap.jp/" /> <link rel="start" href="https://dogmap.jp/" title="Home" /> <link rel="appendix" href="https://dogmap.jp/about/" title="About" /> <link rel="pingback" href="https://dogmap.jp/xmlrpc.php" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://dogmap.jp/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://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='https://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='https://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='https://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="https://dogmap.jp/" /> <link href="https://dogmap.jp/wp-content/plugins/syntax-highlighter/css/shCore.css?ver=2.0.287" type="text/css" rel="stylesheet" /> <link href="https://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:'https://dogmap.jp/wp-content/plugins/wp-lightpop/images/icon-image.png',size:new Array(640,480)},Video:{enabled:true,icon:'https://dogmap.jp/wp-content/plugins/wp-lightpop/images/icon-video.png'},Contents:{enabled:true,icon:'https://dogmap.jp/wp-content/plugins/wp-lightpop/images/icon-contents.png',iframeEnabled:false},YouTube:{enabled:true,icon:'https://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="https://dogmap.jp/favicon.ico" /> <link rel="icon" type="image/x-icon" href="https://dogmap.jp/favicon.ico" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="https://dogmap.jp/feed/" /> <link rel="alternate" type="application/atom+xml" title="Atom" href="https://dogmap.jp/feed/atom/" /> <link rel="alternate" type="application/rss+xml" title="ROR" href="https://dogmap.jp/sitemap.xml" /> <link rel="index" href="https://dogmap.jp/" /> <link rel="start" href="https://dogmap.jp/" title="Home" /> <link rel="appendix" href="https://dogmap.jp/about/" title="About" /> <link rel="pingback" href="https://dogmap.jp/xmlrpc.php" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://dogmap.jp/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://dogmap.jp/wp-includes/wlwmanifest.xml" /> <link rel="alternate" media="handheld" type="text/html" href="https://dogmap.jp/" /> <link rel="canonical" href="https://dogmap.jp/" /> <link rel="stylesheet" type="text/css" href="https://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="https://dogmap.jp/wp-content/cache/head-cleaner/js/c2046402dd21ec3000596d55d75cc257.js"></script> </head>
何ということでしょう!あんなに汚らしかった HTML コードが、こんなにもスッキリと!
しかも YSlow の結果も、適用前の F(53)と比べると、適用後は D(60)に改善されてます。
今後の予定
あとは指定タグを取り除く機能とか、xml 的に残念なソースでもそれなりにパースする機能とか、重複 JavaScript の削除機能とか付けたいですね。
あと、プラグインの名前も。
JSeries に既に「光画部」があるので、「営繕マン」とか良いかなと思いました。
「島崎くんはイルカの曲芸」です。(謎)
をかもとさん、J君さん、ゆりこさん有難うございます。
なるほど、バッファの取り出しタイミングがズレるから白紙になってしまうのですね……。All in One SEO Pack自体はソースがあまり宜しくないという評判は聞いていたのですが、よくソースを精読しないままに質問してしまいました申し訳ありません。
あと、言葉が足りませんでしたがタイトルの書き換え自体は使用しています(投稿画面の追加フィールドはほぼ使用していないという意)。
というわけで、をかもとさんの仰るとおりチェックを外し、タイトル書き換えのみ別の方法で代用すればなんとか使用できそうです。
All in One SEO Packは確かに凶悪な実装をしているのかもしれませんが、取り扱うジャンルの性質上かなり検索エンジンのインデックス結果に気をつかっているので使用せざるを得ない状況だったりします…… 😥
ゆりこ さん、どもです。
コメントアウトしてありますが、ロジックを組み込んであります。
この辺の動作も、ユーザに選択してもらおうと思ってます。
うっ、私のプラグインではほとんどこの手法を使ってます。
wp_content_dir() 辺りを使ったほうが良いんですよね。あとで、まとめて修正します。
satchin さん、どもです。
スッキリして何よりです。
とりあえず、まだまだ不具合が隠されている予感なので、なにかおかしなところに気づいたらドシドシご連絡ください。
むむ。そうなると gzip 圧縮機能を削除しなければならないような気が 😉
でも、それは変な気がするので、PHP 側で HTTP ヘッダの Content-Type を吐いてやればいいような気がします。
つまり、gzip 圧縮した cache ファイルを直接見せるんじゃなくて、スクリプト経由で cache ファイルを吐くわけです。
PHP の動作負荷がかかってしまいますが、HTTP 的には valid な動作になると思われます。
あと、Pre 2.6 対応として WP_CONTENT_DIR 等を勝手に定義していますが、この方法はあまり好ましくありません。
この手法を使うプラグインは結構多いのですが、「WP_CONTENT_DIR が定義されていれば WP 2.6 以降である」と判断する行儀の悪いプラグインがあるため、それで不具合が発生してしまいます。
やっと、みんなに追いついた 😀
うちのサイトも0.5.3化完了しました。
Comment Quicktagsの修正版もばっちり動いてます。
かなーりスッキリしました
ゆりこさん、どもです。
gzip 圧縮転送については Content-Type が異なるファイルを解釈している Safari 以外のブラウザの方がおかしいような気もします。
拡張子が .gz のファイルについても適切な Content-Type をブラウザに渡せるように .htaccess を書き換える件について以前エントリしています。
https://dogmap.jp/2007/09/04/gzip-components/
本当はこちらの方法で対応したほうがいいんですが、WordPress プラグインごときが .htaccess をいじるのはちょっとやりすぎかなという気もしていて…
# っていうか、すでにこのプラグイン自体、かなり偏執狂的な感じになってきていますが 😳
All in One SEO Pack は、たかだかタイトルを書き換えるためだけに ob_start を使うのは確かに凶悪すぎますね。
新版は Safari では直りましたが、NetNewsWire に組み込みのウェブ表示機能 (これも WebKit 利用) だとダメでした。UserAgent は
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_6; ja-jp) AppleWebKit/525.27.1 (KHTML, like Gecko) NetNewsWire/3.1.6
です。AppkeWebKit を含むウェブブラウザーすべてを対象とした方がいいのかもしれません。
All in One SEO Pack (のタイトル書き換え機能) は Ktai Style とも競合します。Ktai Style の場合、携帯閲覧時に All in One SEO Pack を殺すという対策を取っています (1.35 あたりから対策)。All in One SEO Pack が ob_start でタイトル書き換えするという凶悪な実装なのが理由なので、作者に直してもらうしかないですね。WordPres 2.5 あたりから、フィルターフックでタイトル書き換えできるので、それを使えばいいはずなのに……。
正直なところ、そういう凶悪な実装をしているという理由で、「All in One SEO Pack は使うべきではない」と思っています。
J君です。
「All in One SEO Pack」ですが・・・
以下のオプションにチェックが入っています。
Rewrite Titles:
Use noindex for Categories:
Use noindex for Archives:
Autogenerate Descriptions:
他はチェックは入っていません。
この状態で問題なく動作しています。
ajin さん、J君、どもです。
「All in One SEO Pack」のソースを見てみたんですが、多分 「Rewrite Titles:」 ってオプションにチェックが付いていると、「Head Cleaner」と競合します。
“Descriptionフィールドを主に使用”と言うことであれば、こちらのオプションを切って「All in One SEO Pack」を使ってみてはどうでしょう?
J君のところで競合しないのも、多分「All in One SEO Pack」のこのオプションを使用していないからだと思われます。
バッチリ!です。
これで全て解決しました。
ありがとうございました。
J君、どもです。
「Comment Quicktags」 については、yutaka さんに指摘されました。
# 前回のコメントでプラグイン名を間違って「Quick Comment Tags」と書いてましたね 😳
で、「Head Cleaner」と競合しないように修正したので以下に置いておきます。
よろしければ、お使いください。
http://dl.getdropbox.com/u/110305/comment-quicktags.zip
J君です。
色々調べてみると、”Comment Quicktags-Reloaded”というプラグインを外すと正常に動作します。
そして、私の場合は、”All in One SEO Pack”の影響は受けていないようです。有効化していても、特に問題はありませんでした。
Comment Quicktagsについては、他のプラグインを探してみます。
ソースがスッキリ、とっても嬉しいです。
素晴らしいプラグインでーーーす。
ajin さん、はじめまして。
不具合というか、相性問題ですね。
「Head Cleaner」は、その仕様上 ob_start() 関数を使っているプラグインとの相性が悪いです。
「All in One SEO Pack」はJ君も使っているようなので、そのプラグインとの競合が起きてる可能性が大きいですね。
メジャーどころのプラグインですので、対策を考えてみます。
初めまして、早速使用させて頂いたのですが不具合が見つかりましたので報告させて頂きます。
症状はJ君さんと全く同じでサイトの内容が全く表示されずにソースが白紙になるというものです。
フック部分で何かと競合しているのではと思い、ヘッダ挿入系のプラグインをあらってみた結果「All in One SEO Pack」が競合していることが判明致しました。
有名所なので僕だけかな、と心配になったのですが停止すると正常に動作しましたので間違いないような気がします(ちなみに、補足で書いておくと主に同プラグインのDescriptionフィールドを主に使用)。
ちょっと切るわけにはいかないプラグインなので、現在はHead Cleaner(仮)を停止せざるを得ないのですが、競合する環境はかなり多い気がするので次の修正で可能であれば考慮して頂ければ幸いです。
私事ではありますが、僕のようなヘビーにCSSやjsを読み込むサイトには非常に魅力的なプラグインなので使用できるのを楽しみにしています 😛
色々ありがとうございます。
色々頑張って調べてみます。
びんさんと比較して異なるのは
グーグルの広告のスクリプトが怪しいと思うので、それを重点的に明日調べてみます。
いつも、ありがとうございます。
びんさんのソースを見て感激しました。
何とか調べたいと思います。
J君、どもです。
まだまだ開発途上版です。不具合も山ほどありますので、ご承知ください。
あと、このプラグインの性格上、他のプラグインとの相性問題が出やすいです。
このプラグイン以外を全て停止して、他のプラグインを一つずつ有効にし、不具合が発生しないか確認して、どのプラグインと相性が悪いか確認してください。
確認できたら、連絡いただけると助かります。
なお、yutaka さんの報告では、「Quick Comment Tags」プラグインとは相性が悪いようです。
コードで括りました。
是非と思いましたが、J君の環境では駄目です。
色々考えてみました。
プラグインを入れての、ソースを見たら以下のようでした。
以下何もなしでした。
是非ともJ君も入れたいと思いますので、よろしくお願い申し上げます。
ゆりこさん、どもです。
うわぁ、本当だ。Win版の Safari でも、ダメでした。
同じレンダリングエンジンの Webkit を使っている Chrome では、正常に動作していたので Safari での動作確認を怠っていました。
ご指摘感謝です。
Mac 版 Safari では CSS 圧縮を認識しないようで、スタイルが出ません!! JavaScript も効いてなさそうです。
「CSS, JavaScript は、ブラウザが対応していれば gzip 圧縮転送。」の判定を見直すことをおすすめします。Safari が腐っている可能性も大なんですが、とりあえず Safari を除外してもらえれば助かります。
yutaka さん、どもです。
まだまだ α版も良いところですが、色々なサイトで試していただけると、問題点の洗い出しが非常に楽です。
ぜひぜひ、色々お試しください。
YSlow のスコアなんて、指標に過ぎないんですがあがると妙に嬉しいですよね 😛
遅ればせながら、キレイキレイ作戦完了です
いろいろお手数をかけちゃいました。コメントクイックタグは数種類試して異常がなさそうなのを
選択。スマイルはプラグインを変更してみたんですが、お出ましにならなかったので手動で
タグを書いたら出ていらっしゃいました。ヘッダークリーンでYSlowのスコアが20ぐらいあがり
ました。なんだか嬉しいですわ
流行りですからねぇ。
ハイライト表示用に同じ JavaScript を使っているからですかね。
ピンバック: orioa
rel=”canonical” を含めているところがにくいですなぁ。 😉
光画部だから、「編集部」でいいじゃね? 😆
# yutakaさんのところでも見たような気がするけど、ソースコードのハイライト表示で<wbr>が入るのはなぜ?