今回は『Head Cleaner』というプラグインを使用してWordpressの高速化を図ります。結論を言ってしまうと、サイトの表示速度を上げてくれる有能プラグインでした。
▼目次
この記事の要約
|
|
導入後にサイト表示が更に早くなった
前回の記事では「W3 Total Cache」の導入でサイトの表示速度を半分に縮めることに成功しました。
今回は『Head Cleaner』の導入後に表示速度を計測したところ、6秒台から更に2秒縮めることに成功！微妙ですが1/3縮めたと考えればこれは大きいはず。
順調に高速化が進み過ぎて顔がニヤけてしまう。
『Head Cleaner』の効果
『Head Cleaner』はその名前の通りヘッダー部分を最適化してくれるプラグインです。<head>要素にはプラグインを追加したりすると次々と新しいタグが増えてゴチャゴチャしてくるのですが、それらをコンパクトにしてくれます。
例えば自分はヘッダー内に「syntax highlighter」のタグがズラッと並んでいるのを見て悩んでいたのですが、『Head Cleaner』を導入したらそれを二行に圧縮してくれました。結局「syntax highlighter」のプラグインは削除する羽目になったのですが……（後述）。
同じ内容がビッシリ。
『Head Cleaner』導入後はスッキリ。
Javascriptなどの最適化は自分のような素人が手を出すと大惨事になりかねないので、プラグインに任せると便利ですね。
『Head Cleaner』の各種設定方法
いつも通り「プラグイン」→「新規追加」から『Head Cleaner』をインストールしましょう。有効化も忘れずに。
インストール後は「設定」→「Head Cleaner」から設定画面へ進むことができます。
最初に「CSS と JavaScript を、サーバ上にキャッシュする」にチェックを入れます。そうすると細かい設定が色々と出てきます。
それ以降の設定は下の画像の通りにするのがオススメです。
不具合が起こった際の注意と対処方法
参考にしたサイトだと「フッタ領域の JavaScript も対象にする（上の画像の一番右下の項目）」にチェックを入れている設定が多かったのですが、自分の場合は「AmazonJS」という便利なプラグインが不具合を起こしたためチェックを外してあります。
もし不具合を起こすプラグインを使用していないなら、当然チェックを入れたほうが効果は高いので推奨します。
その他には「SyntaxHighlighter Evolved」というプラグインが使用できなくなりました。幸い全く同じ機能を持ち、正常に作動する「Crayon Syntax Highlighter」という素晴らしいプラグインに出会えたので問題はありませんでしたが。
もし不具合を起こした場合には、
- 設定画面のチェック項目を一個ずつ外してみて、その都度対象のプラグインが動くか確かめていき、原因となっている設定を見つける。
- 代わりのプラグインを見つける（これが一番オススメです）。
を試してみるのがオススメです。
「有効なフィルタ」
また、何らかのプラグインが不具合を起こした場合には「有効なフィルタ」にチェックを入れてみることも試してみるといいでしょう。
チェックを入れた箇所は『Head Cleaner』の対象外となるので、的確なフィルタにチェックを入れられると不具合を解消することもできます。
ただしご覧のとおりフィルタ名を見てもイマイチどのプラグインに関わっているのかがわかりづらいので、こちらも一個ずつチェックを入れていって確認する作業が必要になるかも。
「<head> 部で有効な JavaScript」
ここは基本的に触らない方が良いでしょう。ヘッダーにあるJavascriptをフッターに移動させることで高速化を図ることことができますが、不具合の原因になりまくります。
特にjQueryはヘッダで無いとまず正常に機能しないので何らかの理由で移動させる際にも注意が必要です。
キャッシュの削除も忘れないように
新しいプラグインを追加したり、サイトのデザインを変えた時はキャッシュを一度削除するようにしましょう。そうしないと正常に反映されない時があります。
「W3 Total Cache」はサイトに変化があると律儀に「キャッシュを削除した方がいいよ」というポップアップを表示してくれるので、導入している人はその時に『Head Cleaner』も同時にキャッシュの削除をするのがオススメです。
あとがき
基本的な設定と注意点をまとめた記事でした。
『Head Cleaner』は他のプラグインとの不具合を起こす事がありますので、可能な限りテスト環境で試すのがいいです。バックアップも忘れないようにしましょう。
更新情報はこちらからどうぞ