Header Cleaner:head内を綺麗にすっきりして高速化に挑戦!


公開日:2013年11月18日 月曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , , , | 閲覧数:505 | Leave a comment

プラグインが増えるたびに、
ヘッダー内にごちゃごちゃ沢山のタグが 出現するのだけど、
今回はコレをなんとかしてみようと、
改めてプラグイン Head Cleanerをインストールして、設定もやってみた。
実は、管理している他のサイトにはインストールしてたのに、
なぜか自分のサイトには入れてなかった。

ただし、ちょっと設定を調整しないと、いくつかのプラグインが正常に動かなかったりするのでその辺を覚書き。

 

追記

2015/3/4

ファイル数が激増する原因を探ってみたらHeadCleanerだったので削除した。

そしたら、一年以上悩んだブログのキャッシュ(最新情報が表示されない)問題も解決してしまった!

 

追記

2013/11/18 23:15 GoogleAnalyticsをプラグイン(WordPress › Ultimate Google Analytics « WordPress Plugins)で設定してたけど、
Header Cleaner設定後、数時間計測してなかったみたいでプラグインを止めてヘッダーに改めてトラッキングコードを追加しました。
Google Analytics

Header Cleanerとは?

WordPress Plugin には、WP-Cacheや、WordPress Super Cache と言った高速化を実現するためのプラグインが多数あります。

これらのプラグインは、本来は動的に生成している WordPress のコンテンツをサーバ上にキャッシュしておいて、サーバ負荷を減らし、クライアントからのリクエストに対して、素早く返答しようというモノです。
つまりは、サーバ側の処理(バックエンド)の高速化。

Head Cleaner (仮) は、これらのプラグインとは違い、クライアント側の処理(フロントエンド)を高速化しようと言うのが狙いです。
多分、今まで無かったタイプの高速化プラグインでは無いでしょうか?

作者さまのサイトには上記のような記述が。
Head Cleaner (仮) で、なぜ速くなるのか? | dogmap.jp

できること

インストールすれば、

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

以上の事ができるようです。

設定画面の詳細

当サイトでは下図のようにしています。
参考サイトで、チェックしないほうがいいとされている、「パラノイアモード」や自力で追加した「OGPの追加」はチェックを外しています。

Header Cleaner設定画面

CSS と JavaScript を、サーバ上にキャッシュする

/wp-content/cache/head-cleaner の中に Head Cleaner で設定したキャッシュを生成してページ表示を高速化する。

CSS、JS を動的生成する

キャッシュの有効期限を設定し、 Head Cleaner側でgzip圧縮転送する設定する。

複数の CSS を結合する

ひとつにまとめる事でリクエストを減らす。

CSS を最適化する

CSSなどにメモやコメントなどを消す。

CSS に含まれる画像の URL を、データスキーマ URI に変換する

データスキーマURL対応のブラウザ(Firefox、Safari、Opera など)の場合は、CSSで読み出す小さい画像は、データスキーマURLとすることで、動作を軽くする。

複数の JavaScript を結合する

一つにまとめる事で回線の転送リクエストを減らす。

JavaScript を小さくする

jsのメモなどの不要な物を消す。

フッタ領域の JavaScript も対象にする

キャッシュを作る上でフッターの部分も対象に含めるかどうか。

<head>内の JavaScript を、フッタ領域に移動

ヘッダーの軽量化を図る。

Google Ajax Libraries を利用する

JavaScriptライブラリーを組み込む。

XML宣言を付与

IE6 以外の時は先頭に xml 宣言を付与。

メタタグ “canonical” を追加

Webページの重複を防ぐ効果のあるメタタグを追加する。

OGP(Open Graph Protocol) 対応のメタタグを追加

Facebookなどのソーシャルメディアに更新情報を投稿する為のプロトコルのメタタグを追加する。

メタタグ “generator” を削除

何のツールを利用してWebサイトを制作しているかを宣言するメタタグを削除する。

リンクタグ “RSD” を削除

他のアプリケーションを使って記事を投稿する為のメタタグを削除する。

リンクタグ “wlwmanifest” を削除

Windows Live Writerを使って記事を投稿する為のメタタグを削除する。

IEコンディショナルタグを削除

IEコンディショナルタグを判定して、ブラウザが IE の時だけ対象タグを表示。

メタタグ “Last Modified” を追加

メタタグの最終更新日のタグを追加する。

“パラノイアモード” を有効にする

HTMLソースから改行やスペースを除去し、可能な限りHTMLソースを軽量化しようとします。

動かなくなったプラグインなど

WordPress › Easy FancyBox « WordPress Plugins

ページ内リンクをスマートにするsmoothScroll.js – to-R

あと、雲も動かなくなった(笑)

対処法

なので、上図のピンク枠内の二つのチェックを外し、下図の枠内の様に”http://www.google.com/jsapi/”のチェックも外しました。
Header Cleaner設定画面2

あとは、たぶん問題ないはず。

 

導入結果

例えばリガチャが表示されないIEへの対処をやっと。の個別ページの場合・・・

適用前が272行!!!以下↓

そして、適用後はこちら↓73行!!!

特に「IEコンディショナルタグを削除」と「複数の CSS を結合する」は大きかった!
WordPress › EZ zenback « WordPress PluginsWordPress › Easy FancyBox « WordPress Pluginsで吐きだす CSSが長かったから。

参考サイト

Head Cleaner (仮) で、なぜ速くなるのか? | dogmap.jp
Head Cleaner ? HTMLのHEAD要素のタグを自動的に整えてくれるWordPressプラグイン | ネタワン
WordPressが早くなるプラグイン Head Cleaner | たなブログ WordPress入門講座
Head Cleaner を使用する場合の設定 | dogmap.jp

もし、気に入っていただけたらシェアしていただけると嬉しいです♪ この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。

ブログの更新情報はこちらで配信中~
Feedlyで購読
follow us in feedly
更新をメールでお知らせ 配信: FeedBurner

sponsored


公開日:2013年11月18日 月曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , , , | 閲覧数:505 | Leave a comment

著者 ねこもりや

どうぶつ占いは「コアラ」。ボーっとする時間が常に必要。”猫になりたい”とひたすら願う怠けもの。

My Photos

  • 14718137_1784581188494616_6735491666343362560_n

Leave a Reply

Required fields are marked *


CAPTCHA