【ソースを綺麗にお掃除】「Head Cleaner」を使ってファイルサイズを減らして高速化!

カテゴリ:Web制作タグ:,

WordPressでは、プラグインで簡単に機能を追加出来る分、各プラグインの個別のCSSやJavascriptが別々に読み込まれたりします。
その為ページを表示する際に、複数のファイルへのリクエストが発生し結果的にページの読み込みが遅くなります。

そんな時に使えるプラグインの名前は「Head Cleaner」です。
読み込まれるCSSやJavascriptをまとめたり、フッターで読み込むようにすることでページの読み込み速度を改善してくれる便利なプラグインです。

この記事の内容

  1. プラグインをインストールする
  2. プラグインの設定
  3. 終わりに

プラグインをインストールする

プラグインのインストール方法は新しくなったWordPressでプラグインをインストールする方法を参考にして下さい。
※特に注釈がない場合管理画面から検索してインストールする方法で出来ます。
「Head Cleaner」で検索すると出てきます。

プラグインの設定

プラグインを有効化すると、管理画面左側のメニューの「設定」に「Head Cleaner」という項目が増えているかと思います。
こちらをクリックするとHead Cleanerの設定画面を表示することができます。

head-cleaner_01
当サイトで有効にしているスクリーンショットと共に説明していきます。
※設定内容によってはデザインが崩れたりする場合があるので、基本的に1つずつ有効化して問題ないか確認しながら設定していくのをおすすめします。
※項目にチェックをすると有効に、チェックを外すと無効になります。
※設定が終わったら必ず「更新」ボタンを押しましょう。押さずにページを移動してしまうと設定が保存されません。また、設定が反映されない場合はキャッシュの削除ボタンを押すと良いでしょう。

まずは、上部の説明からです。

【CSS と JavaScript を、サーバ上にキャッシュする】
こちらは、CSSやJavascriptを「 /wp-content/cache/head-cleaner」の中にキャッシュするための設定です。
読み込み時にはキャッシュしたファイルが利用されるようになります。特別な理由がない限りONにすると良いでしょう。
こちらをONにするとCSSやJavascriptのキャッシュに関する設定が増えます。

【CSS, JS を動的生成する。】
サーバー上に生成したキャッシュの有効期限を設定し、gzip圧縮転送する設定です。
既にサーバー上で別途gzip圧縮を行っている場合、チェックを入れなくて良いかと思います。
また、デザインが崩れる場合等もあるみたいなのでそういった環境の方は無効にしておきましょう。

【CSS に適用するデフォルト media 属性】
基本そのままで問題ありません。
デザインが崩れたりした場合に適切なmedia属性を指定してあげることで、影響を最小限におさえることが出来る場合もあります。

【複数の CSS を結合する】
プラグイン等でバラバラに読み込まれているCSSを一つにまとめます。

【CSS を最適化する】
キャッシュを生成する際にCSS内に含まれるコメント等を削除し、ファイルサイズを減らしてくれます。

【CSS に含まれる画像の URL を、データスキーマ URI に変換する】
CSS内で背景画像等をURLで読み込んでる場合「data:image/gif;base64,~」のような形に変換します。

【複数の JavaScript を結合する】
プラグイン等でバラバラに読み込まれているJavascriptを一つにまとめます。

【JavaScript を小さくする】
キャッシュを生成する際にJavascript内に含まれるコメント等を削除し、ファイルサイズを減らしてくれます。

【フッタ領域の JavaScript も対象にする】
フッターで読み込まれているJavascriptも結合や小さくする際の対象にするかどうかです。
一部プラグインの動作に影響がある場合もあるので、問題がない場合のみ有効にすると良いでしょう。

【 内の JavaScript を、フッタ領域に移動】
内で読み込まれているJavascriptをフッターで読み込むようにすることで、最後にJavascriptが読み込まれるようになるため、ページのレンダリング速度を向上します。

【Google Ajax Libraries を利用する】
jQuery等のライブラリをWordPressに同梱されているものではなく、GoogleのCDNから読み込むようにします。

【XML宣言を付与】
ソースの先頭に

を追加します。
HTML5でソースを書いている場合はいらないので状況に応じてチェックしてください。

【メタタグ “canonical” を追加】

タグを追加します。
All in One SEO Pack等を入れている場合や自分でテーマファイルに書いている場合は無効で良いでしょう。

【OGP(Open Graph Protocol) 対応のメタタグを追加】
Facebookのシェア時などに使われるOGPタグを追加します。
こちらも他のプラグインで設定している場合や自分でテーマファイルに書いている場合等は無効で良いでしょう。

【メタタグ “generator” を削除】
デフォルトだとmetaタグで使っているWordPressのバージョンが挿入されていますが、それを削除します。
自分でfunctions.phpにコードを書いて削除している場合は無効でいいでしょう。

【リンクタグ “RSD” を削除】

を削除します。
リモート投稿を使っている方は削除しないようにしましょう。

【リンクタグ “wlwmanifest” を削除】

を削除します。
リモート投稿を使っている方は削除しないようにしましょう。

【メタタグ “Last Modified” を追加】

を追加します。
ブラウザのキャッシュが使われるようになります。

【”パラノイアモード” を有効にする。】
こちらを有効にするとHTMLソースの改行や空白を極力削除して小さくしてくれますが、おそらくデザインが崩れたりします。
HTMLの無駄な改行等を削除するには先日紹介したWP-HTML-Compressionを使えば同等の事が出来るので、併用を検討してみると良いでしょう。

head-cleaner_02
上部で設定した内容をこのフィルタに対してだけは対象外にしたい!という場合等に設定します。
他のプラグインとの相性で除外したい場合以外は設定することはないです。

※項目にチェックをすると有効に、チェックを外すと無効になります。
※設定が終わったら必ず「更新」ボタンを押しましょう。押さずにページを移動してしまうと設定が保存されません。また、設定が反映されない場合はキャッシュの削除ボタンを押すと良いでしょう。
※設定内容によってはデザインが崩れたりする場合があるので、基本的に1つずつ有効化して問題ないか確認しながら設定していくのをおすすめします。

head-cleaner_03
最後に下部の説明を。
【キャッシュファイル削除】
サーバー上にキャッシュされているCSSやJavascriptのファイルを削除します。
設定を変更した後に押してあげると良いでしょう。

【アンインストール】
上記設定を全てリセットするために使用します。
表示がおかしくなったからやり直したいという場合に押すと初期状態に利用しましょう。

終わりに

他のプラグインとの相性などもあり個々の環境で有効にするべきものとすべきでないものは変わってきますが、
ほとんどの環境で効果があるものだと思いますので一度導入してみてはいかがでしょうか?

あとでよむ / みんなにシェアする

このエントリーをはてなブックマークに追加
LINEで送る

コメントをする / みる

コメントを残す

コメントはまだありません。

検索する

カテゴリ一覧

タグ一覧

お知らせ アクセス解析 アプリケーション ゲーム サーバー スニペット プラグイン 動画 日記 Laravelパッケージ Laravel3 Laravel4 Tips Webサービス Webデザイン WordPress

最近投稿された記事

つぶやき

【GIGAZINE読者限定早い者勝ち】無料でDropbox・Googleドライブなどのクラウドを自由自在に同期・一括管理できる「まとめてクラウド」が先着5万人48時間だけゲット可能 - GIGAZINE gigazine.net/news/20151010-…

約2年前

離れていてもコミュニケーションが取りやすい便利なサービス「Remotty」 #remotty remotty.net

約2年前

RT @localdisk: メジャーどころがたくさん / 【セキュリティ ニュース】「WPTouch」など多数のWordPressプラグインに脆弱性(1ページ目 / 全1ページ):Security NEXT security-next.com/057930

約2年前

Javascript フレームワーク「Aurelia」aurelia.io

約3年前

dockerで起動済みのコンテナに対して何かしたい時は、docker exec -it コンテナ名 /bin/bashで入って実行したり、docker exec -it コンテナ名 supervisorctl restart nginxみたいな事も出来て便利。

約3年前

サーバー移転完了に伴いサイトの閲覧も可能な状態になりました。移転作業中にご訪問いただいた方には大変ご迷惑をおかけいたしました。今後このようなことがないよう気をつけて参ります。

約3年前

現在当サイトが閲覧出来ない状態となっております。こちらはサーバーの移転作業に遅れが生じているためとなっております。ご利用いただいている方にはご迷惑をおかけいたします。

約3年前

WordPress4.1.1(日本語版)が利用出来るようになりました wp.me/p4RkJY-Dj

約3年前

RT @keito_jp: Twitterをサマーウォーズ的に表示させるやつを製作中。遊んでみてね。 open.moo.jp http://t.co/gIgp5Gh6qW

約3年前

任天堂、YouTubeの広告収入を動画制作者とシェアする「Creators Program」サービス開始 | Game*Spark - 国内・海外ゲーム情報サイト s.gamespark.jp/article/2015/0…

約3年前

↑上へ戻る