wordpressソースコードを整理して高速化する「Head Cleaner」

「Head Cleaner」はwordpressのヘッダー部ソースコードを整理して高速化するためのプラグインです。

WordPress › Head Cleaner « WordPress Plugins

設定項目が多数あり、CSSやJSファイルを結合できたりしますが他のプラグインと競合しやすいものでもあるので、少しずつ試しながら設定をする必要があります。

効果

worpressのヘッダーは、色々なプラグインやテーマ自体の設定により色々な記述が多くなりどんどんコンテンツ部分が下に押しやられます。JSファイルの影響もあり動作が遅くなったりします。Head Cleanerの設定を反映させると、

ここまでスッキリします。見た目にも気持ちがいいですね。

設定とある程度安定して動くテンプレート

大抵の場合はこの設定で安定して動作するかと思います。各設定の説明は下記の通り。

CSS と JavaScript を、サーバ上にキャッシュする
必ずチェックを入れます。生成したファイルをキャッシュ化しておくための設定です。この項目をチェックする事により、CSS・JSファイルを改変して容量を縮小するようになります。

CSS, JS を動的生成する。
生成したファイルに有効期限を設定します。他のブラウザで上手く動かない場合などがあるので設定した場合は必ず他のブラウザでも動作確認をしましょう。

複数の CSS を結合する
CSSファイルを纏めて生成します。複数のCSSファイルを読み込んでいる時やテーマ独自のカスタマイズCSS記述がある場合に効果的です。

CSS を最適化する
CSSの余計なスペースや改行などを消去して圧縮します。

CSS に含まれる画像の URL を、データスキーマ URI に変換する
CSS内に記述あるURLを文字列データに変換します。画像を読み込む時間が省略されるのでチェックがお勧めです。CSS内で画像を使わない場合はそこまで効果はありません。

複数の JavaScript を結合する
複数のJSファイルを結合します。これにより複数のJSファイルを読み込む時間が省略されるためページ表示速度が向上します。不具合が起きやすいのでチェックする時は動作確認を必ず行いましょう。

JavaScript を小さくする
JSファイルに含まれているスペースや改行を省略します。容量が小さくなります。

フッタ領域の JavaScript も対象にする
フッター領域にあるJSファイルも動作の対象にします。「JavaScript を小さくする」との併用がおすすめです。

＜head＞内の JavaScript を、フッタ領域に移動
ヘッダーにあるJSファイルをフッターに移動します。jquery系のファイルが動作しなくなったりするので設定した場合はかならず動作確認をしましょう。

XML宣言を付与
html先頭にXML宣言を付与します。最近作成されたテーマなどなら普通にされていたりするので特に気にする必要も無いでしょう。

メタタグ “canonical” を追加
worldressの記事には複数のアドレスでアクセス出来ますが、その中の一番優先するべきパーマリンク設定のアドレスに向けて「canonical」タグを追記します。「canonical」は重複したページのどれが本体かを示すSEO的に重要なタグなので基本的にはチェックしておいた方が無難かと思われます。

OGP(Open Graph Protocol) 対応のメタタグを追加
SNSサービスなどでそのページがどういった物なのかを認識したり、サムネイル画像を取得したりするための記述です。SEO系プラグインで詳細な物を生成したりする物があるので、そちらですでに生成しているならチェックの必要はありません。

メタタグ “generator” を削除
どちらかというとハック対策です。どのソフトでサイトが作られたのかを隠すので、攻撃から身を守る事ができます。

リンクタグ “RSD” を削除
worldressを外部から操作するためのタグです。スマホやタブレットなどから投稿する事が特にないなら必要のない項目となります。

リンクタグ “wlwmanifest” を削除
こちらも上記「RSD」と同じ遠隔操作用のタグです。

IEコンディショナルタグを削除
CSSのIE用記述を消去します。おこのみで、という所ですが、IE9以下の人にもきちんとサイトを表示させたい場合はチェックを入れない方がいいでしょう。

メタタグ “Last Modified” を追加
最終更新日を示すメタタグを追加します。検索エンジン向けではありますが、SEO的にはあまり意味はないかと思われます。おこのみでどうぞ。

“パラノイアモード” を有効にする。HTMLソースから無駄を省き、できるだけサイズを小さくしようとします。
htmlソース全体のスペースや改行を消して数行に纏めてしまいます。サイト自体が表示されなくなったりしますので導入は注意して行ってください。

デバッグモード
ソースコードにデバック用の記述を追加します。どのようにプラグインが動作しているのか確認できます。普通はチェックをします。

有効なフィルタ
wordpressで動作するフィルタの一覧です。設定が上手く動作しなかった場合に、これらのフィルターと競合している可能性があります。「対象外」に設定する事でHead Cleanerの対象から外す事ができるので調整します。必要のないフィルターだとわかっている場合は削除もできます。

＜head＞部で有効な JavaScript
フィルタ同様、対象となっているJSファイルの一覧です。