【WordPress】Head Cleanerの導入時に見つけた不具合と解決方法

Head Cleanerは、ヘッダーの情報をまとめて高速化する有名なプラグインです。

WordPress のヘッダーとフッターのタグをクリーンアップします。

公式で説明されている主な機能を翻訳すると以下になります。

いくつかの用語にリンクを張ったので、詳しいことはそちらで確認してください。

  • IE6の場合にXML宣言の除去
  • 重複したり必要のないタグ、コメントや空白の除去
  • <meta Name="description" /> の重複の除去
  • <meta Name="keyword" /> の重複の除去
  • <link rel="canonical" /> の追加
  • OGP (Open Graph Protocol) タグの追加
  • 条件付きコメントをIEの場合だけ表示
  • ブラウザが対応している場合gzip圧縮転送
  • 複数のCSSファイルをメディアごとに結合。インラインのCSSも含む
  • CSSの縮小
  • CSS内のURL画像をData URLスキームに変換
  • 複数のJavaScriptファイルを結合。インラインのJavaScriptも含む
  • JsMinを使用したJavaScriptの縮小
  • JavaScriptをフッタに移動
  • フッタのJavaScriptも結合
  • Prototype.js, script.aculo.us, jQuery, mootoolsといったJavaScriptライブラリの多重読み込みを抑制
  • Prototype.js, script.aculo.us, jQuery, mootoolsといったJavaScriptライブラリの読み込み順を制御してコンフリクトを抑制

加えて以下の機能も有します。

  • 圧縮したCSSとJavaScriptファイルをキャッシュ
  • フィルタごとにHead Cleanerの対象外にしたり削除したりする設定
  • dns-prefetchの追加

非常に高機能で簡単にサイトの高速化を行うことができます。

一方でこのプラグイン自体にも後述する不具合があったり、他のプラグインと干渉して不具合を起こす場合があり、使用をやめてしまう方も多いようです。

AmazonJSが動かない!   昨日やっとの思いで導入したAmazonJSですが、プラグインが正常…
ここ数日、当ブログの表示がヘッダー画像は表示されているものの、メニューバーのレイアウトが崩れ、CSSが読み込まれていない状態でした。しかしようやく原因がわかりましたので、備忘録と同じ現象が起こった方の一助になればと記事にしました。結局プラグインの不具合。一つ一つ停止してやっと解決しました。
locatimefree.com はお客様がお探しの全ての情報の原点です。一般的な項目からお客様がお探しのものまで、 locatimefree.com は全てここにあります。きっとお探しのものが見つかるはずです。

ただ、このHead CleanerのCSS、JavaScriptファイルの結合はHTTP/1.1で提供しているこのサイトにおいては非常に強力な最適化といえますし、SSL化していない多くのサイトでも同じことがいえると考えます。

今回このサイトでHead Cleanerを導入するにあたって出くわしたバグと、最大限に機能を活かす方法を説明します。

スポンサーリンク

導入手順

プラグインの新規追加から「Head Cleaner」と検索してください。

一番上に出てくるプラグインをインストールします。

head-cleaner0

設定は以下にしました。

head-cleaner5

結合と最適化を行い、JavaScriptはフッタに移動させます。

XML宣言の付与やタグの追加、削除等は別のプラグインの機能と重なる部分があると思いますので、適宜設定してください。

「有効なフィルタ」はできるだけ手を加えません。

「<head> 部で有効な JavaScript」は全て「フッタに移動」にチェックを付けます。

head-cleaner6

このプラグインの不具合や問題点

Data URLスキームに関するバグ

既存のCSS内でData URLスキームを使用している場合、正しく表示されなくなる場合があります。

Simplicity2の場合、検索窓の画像は以下のように設定されています。

この例の場合、以下のように変換されてしまいます。

id付きのCSSに関する問題点

でCSSを追加すると以下のようにidが付与されます。

その場合Head Cleanerのファイル結合の対象から外れてしまいます。

おそらく理由としては、クライアント側のプログラムでidを指定してCSSを除去することでレスポンシブ表示を行う可能性があるためだと考えています。

CloudFront利用時の問題点(W3 Total CacheのCDN利用者のみ)

このブログはW3 Total CacheのCDN設定を利用してAmazon CloudFrontを使用しています。

しかし、Head Cleanerで圧縮されたファイルに関しては、CloudFront側のファイルを使用するようになっていません。

またCSS内のurlも独自で置換する必要があります。

解決策

プログラムは子テーマのfunctions.phpなどに記述します。

ここで説明する内容は直接本番環境で行わないほうが無難です。

一度ローカル環境で確かめた上で反映を行うなどの手順を踏んでください。

Data URLスキームに関するバグ

Head Cleaner側にフィルタが用意されているのでそれをフックします。

id付きのCSSに関する問題点

CSSのタグの出力は「wp-includes/class.wp-style.php」で行われます。

出力するタグの内容は「style_loader_tag」でフィルタすることができます。

以下のコードによって、idを除去したものが出力されるようになります。

idが除去されると問題がある場合は、以下のように$htmlや$handleを使用して特定のファイルだけ除去しないようにすることが可能です。

CloudFront利用時の問題点(W3 Total CacheのCDN利用者のみ)

下記の方法はW3 Total Cache v0.9.5から使用できなくなりました。

まずは、変換されて出現するURLを正規表現で見つけるためのパターン生成用の関数を定義します。

W3 Total Cacheのw3_get_domain_url_regexp関数の中身をコピーしてきた感じです。

次にHead Cleaner側のフィルタをフックします。

CSSのタグ、CSSの中身、JavaScriptのタグそれぞれをフックします。

JavaScriptに関してはついでにasyncを追加しています。

このブログで使用しているテーマSimplicity2ではJavaScriptでデザインの調整をおそらく行っていないので問題ありませんでしたが、問題ある場合は

の部分を除去します。

まとめ

このブログでは外部サービスを除いておよそ40あったCSSとJavaScriptファイルが4個になりました。

head-cleaner1

head-cleaner2

=>

head-cleaner4

head-cleaner3

Windowsで実行する場合の注意点

WindowsでHead Cleanerを正しく動作させるためにはwp-load.phpに定義された「ABSPATH」の定義を修正する必要があるようです。

=>

正しくテストできない場合はチェックしてみてください。

追記:単体での使用

ページキャッシュ系のプラグインとの併用をおすすめします。

HTMLの構造を解析する動作とそれをHTMLに戻す動作が毎回発生するためです。