follow us in feedly

WordPressプラグイン Head Cleanerを導入したので設定について簡単に解説する

WordPressプラグインのHead Cleanerをインストールしてみました。
Head Cleanerは、CSS/JavaScriptの最適化や<head>の中身を整理してくれます。
設定によってはサーバへのリクエスト回数や送信データ量を減らすことで表示を高速化できます。

Head Cleanerの設定項目

Head Cleanerの設定について簡単に説明します。
下の画像はこのブログで設定している項目です。

Head Cleanerの設定

設定はプラグインやテーマによってはレイアウトが崩れるのでとりあえず試すしかないです。
Head Cleanerの設定はWordPressにログインした状態だと反映されないので、
表示の確認をするときはログアウトするか別のブラウザを起動する必要があります。

また、レイアウトが崩れた場合はチェックを外してからキャッシュを削除する必要があります。
設定画面にある「キャッシュファイル削除」からできます。

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

CSSとJavaScriptのキャッシュを生成し、以降の読み込みはキャッシュを利用します。
キャッシュは/wp-content/cache/head-cleanerに生成されます。
レイアウトにも特に影響することなく高速化ができるのでチェックします。

この設定をチェックすると、CSSとJavaScriptのキャッシュについての設定が追加されます。

CSS, JS を動的生成する

Head Cleanerが生成したCSSとJavaScriptのキャッシュに有効期限を設定し、
gzip圧縮することでファイルサイズを減らします。

CSS に適用するデフォルト media 属性

media属性はCSSを適用するときに、その対象となるメディアを設定するものです。
レイアウトが崩れるということがなければ、この項目はデフォルトのままでよいと思います。

複数の CSS を結合する

CSSファイルが複数あると、読み込み時にサーバとの通信回数が増えるので時間がかかります。
ひとつのCSSにまとめることでリクエスト回数を減らして高速化します。

CSS を最適化する

CSSファイルから不要な空白や改行、コメントなどを削って容量を小さくします。

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

データスキーマURIは、画像データをBase64エンコードしてHTMLに埋め込むことで
リクエスト回数を減らすことができるというものです。
つまり、画像データがすでにHTML内にあるんでサーバからもらう必要がないね、
となるのでリクエスト数が少なくなって高速化できるのです。

詳しくはこちらを参考にしてください。
サイトの表示スピードを改善!dataスキームURIを使った画像の埋め込み/ – サイブリッジラボ

複数の JavaScript を結合する

JavaScriptファイルが複数あると、読み込み時にサーバとの通信回数が増えるので時間がかかります。
ひとつのファイルにまとめることでリクエスト回数を減らして高速化します。
「複数の CSS を結合する」とほぼ同じです。

JavaScript を小さくする

JavaScriptファイルから不要な空白や改行、コメントなどを削って容量を小さくします。
「CSS を最適化する」とほぼ同じです。

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

フッターにあるJavaScriptをHead Cleanerの対象にするかという設定です。
プラグインによってはフッターにJavaScriptを書いてるようです。

JavaScript を、フッタ領域に移動

Webページの読み込みはHTMLソースの上から順に読み込んでいくので、
JavaScriptがCSSより先にあるとJavaScriptの読み込みが完了するまで
レイアウト表示が始まらないということもなります。

JavaScriptを最後に読み込むことでレイアウト表示がすぐに開始されるようになります。
データ転送量は変わりませんが、表示開始までの時間短縮の分だけ体感的に速くなります。

Google Ajax Libraries を利用する

jQueryなどのライブラリをGoogle Ajax Librariesから参照して使用します。

XML宣言を付与

HTMLの先頭にXML宣言を付与してくれます。
HTML5で宣言している、XML宣言をすでに書いているのであれば必要ないです。
チェックをしてもすでに宣言している場合は自分で書いたほうを優先してくれるようです。

メタタグ “canonical” を追加

メタタグ canonicalを追加する設定です。
このタグによって、ページ内容が重複しておりURLが異なっている複数ページのなかで
最も優先するページはどれであるかを検索エンジンに通知することができます。

詳しくはこちらを参考にしてください。
rel=”canonical” 属性について – ウェブマスター ツール ヘルプ

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

Facebookなどで使われているOGPのメタタグを追加してくれます。
これは自分で設定しているのでチェックしていません。

メタタグ “generator” を削除

WordPressのバージョン情報を出力するタグです。
特に必要ないタグですので削除してもよいと思います。

自分で削除するという場合は、下記を参考にしてください。
WordPressがヘッダに出力する情報をremove_actionで削除する | 77 Dogs Blog

リンクタグ “RSD” を削除

外部アプリケーションを使ってリモート投稿する場合に必要となる情報のタグです。
WordPressの管理画面上で更新するのであれば不要です。

リンクタグ “wlwmanifest” を削除

wlw(Windows Live Writer)を使って更新する場合に必要となる情報のタグです。
リンクタグ “RSD” と同様にWordPressの管理画面上で更新するのであれば不要です。

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

特定のIEバージョンにのみスタイルシートを適用するためのコメントタグです。
IE(Internet Explorer)での表示は気にしないということなら削除します。

メタタグ “Last Modified” を追加

最終更新日を示すメタタグです。
更新日を考慮している検索エンジンに効果があるかもしれないです。
特に必要ないかなと思ったのでチェックしていません。

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

HTMLソースから無駄を省き、できるだけサイズを小さくしようとします。
下記のようにGoogle Adsenseの影響からかサイドバーがまるっと消えたので使っていません。
Adsense表示で気をつけるHead Cleanerのたったひとつの設定 | [M] mbdb

設定については以上です。
レイアウト崩れの場合はキャッシュの削除を忘れないように注意してください。
私のように焦って無駄な時間を使うことになります。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください