CSSやJSファイルを手軽にgzipで圧縮、ホワイトスペースを排除して軽量化してくれる Wordpress プラグイン。

WP-CSSとWP-JSで手軽にWordPress ブログを軽量化してみた

現在WP CSSとWP JSのプラグインはなくなってしまったため、現在はWordPress › W3 Total Cache « WordPress Pluginsで代用しています。

自分で作成したCSSならまだしも、ｊQueryプラグインなど、他人が作ったファイルを手動で軽量化するのは至難の業。

ファイルを圧縮するツールも多くありますが、結局使えなくなってしまうのも良くあることです。

そんなCSSやJSファイルの軽量化をカンタンに行うことが出来るWordpressのプラグインを試してみました。

• 
• 組織のマインドマップツールをマインドマイスターにすべき理由
• 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!!

CSS、JSファイルを手軽に軽量化できるWordpress プラグイン

WP CSSとWP JSは、WordPress ブログで読み込んでいるCSSとJSファイルを、gzipで圧縮し、ホワイトスペースを排除してくれるWordpress プラグイン。

CSS、JSファイルをそれぞれ読み込んでいるタグを若干変更するだけでブログの軽量化を行えてしまうお手軽ツールです。

例えばテーマファイルの中に入っているCSSやJSファイルならば、

<script type="text/javascript" src="<?php wp_js('tabber.js'); ?>"></script>

のようにファイル名さえ指定しておけば勝手に見つけて軽量化してくれます。

@import を使ってCSSを複数読み込んでいるようなケースでは、90%以上も圧縮できることもあるそうです。

このブログで使用したらどうなったか

ちなみに私は１つのCSSファイルで8.14Kbから7.5Kbまで圧縮、JSファイルでは、15.6Kb が4.75Kb まで軽減できたものがありました。

メインのCSSは、元々手作業で圧縮していたので圧縮のメリットがなかったうえに、一部デザインが崩れてしまったので、そのままにしています。

• インクルード用のJS　1.23Kb　→　0.73Kb
• SBMボタン表示用JS　6.6Kb　⇒　5.85Kb
• トップページTwitter表示JS　4.87Kb　⇒　3.08Kb

ファイルサイズ ビフォーアフター

↑元々何も処置していなかったので、当然のように全てのファイルが軽量化に成功しています。数値的にはそこまで劇的な変化がないようにも見えますが、体感してみると大きな違いが出てきます。

ページの読み込み時間はどうなったか

Webwaitを使って使用前、使用後を計測してみたところ、使用前は平均11秒だったトップページの読み込み時間が、3.82秒まで改善。双方共にキャッシュされている状態でのテストだったので、JSファイルの圧縮が大きな要因ではないかと思います。

読み込み時間のビフォーアフター

※CSSの記述によってはYUIコンプレッサーと同様に、デザインが崩れてしまうことがあるのでご注意を。

WP-CSSとWP-JSの利用方法

1. まず、WP CSSとWP JSのページから、それぞれプラグインをダウンロードして解凍
2. 次に、/wp-content/plugins/ のディレクトリへアップロード
3. /wp-js/ と /wp-css/ のフォルダのパーミッションを 777 に変更
4. 管理画面のプラグインページで「WP CSS」と「WP JS」を有効化
5. 最後に次項のようにCSSとJSファイルを読み込むタグを設定すれば完了です。

CSSの場合

<link rel="stylesheet" href="<?php wp_css('tab.css'); ?>" type="text/css" media="screen" />

複数のCSSを読み込んでいる場合は、以下のようにカンマ区切りでCSSへのパスを指定することもできます。

<link rel="stylesheet" href="<?php wp_css('path/to/js/file.css, path/to/js/file2.css, path/to/js/file3.css'); ?>" type="text/css" media="screen" />

Javascriptの場合

<script type="text/javascript" src="<?php wp_js('tabber.js'); ?>"></script>

それぞれテーマフォルダの中に読み込むファイルを入れた時の指定方法です。ほかの場所でもパスを指定することで読み込めるようですが、うまく読み込めないことがあるので、該当のCSSやJSが読み込む画像やファイルごと、テーマフォルダへ移動させてしまったほうが楽に設定できます。

今回試してみた結果としては、苦労が少ない割にはかなり改善することが出来たという印象があります。

これだけ手軽にブログを軽量か出来てしまうと、今までの苦労は一体何だったんだろうと思ってしまいますがｗ jQuery などを利用している人は、必ずやっておいたほうが良さそうです。