海外ホスティング入門ホーム > サイトの最適化方法 > CSS と JavaScript の最小化

サイトの最適化方法 ～ CSS と JavaScript の最小化

誰しも Web サイトを素早く表示したいと思いますが、その時に大きな障害となるのが、データの転送速度です。 少しでもデータの転送量を減らすために、JavaScript や CSS ファイルを最小化 (Minification) しましょう。

スクリプトの最小化とは？

スクリプトを小さくする方法は、最小化 (Minification) と難読化 (Obfuscation) の二つがあります。 Minification では無駄なスペースや改行文字を取り除き、スクリプトを小さくします。 Obfuscation では Minification に加えて、変数名まで書き換えてスクリプトを小さくします。

YUI Compressor を利用した最小化

JavaScript ファイルや CSS の Minification 及び Obfuscation ができるツールが YUI Compressor です。

YUI Compressor は Yahoo! から提供されています。以下のサイトからダウンロードできます。

YUI Compressor
http://developer.yahoo.com/yui/compressor/

尚、実行には Java の実行環境が必要です。またこの資料を書いている時点では、バージョン 2.3.6 が最新で、それを用いています。

Minification 最小化のみを行うためには、--nomunge スイッチを使います。

> java -jar yuicompressor-2.3.6.jar --type js -o input_script.js --nomunge output_script.js

Obfuscation 最小化に加えて難読化も行うためには、--nomunge スイッチを取り次のようにします。

> java -jar yuicompressor-2.3.6.jar --type js -o input_script.js output_script.js

また、CSS ファイルを処理する場合は、次のように --type スイッチを css にします。

> java -jar yuicompressor-2.3.6.jar --type css -o input_file.css --nomunge output_file.css

尚、私が試した環境では UTF-8 の JavaScript で日本語が含まれていた場合、文字が壊れてしまいました。その点は注意が必要です。

エラーメッセージなどで日本語が必要になる場合は、メッセージのみを別ファイルにして、コード部分のみを Minification を実施するという方法も考えられなくはないですが、その場合はファイルが複数になることによって HTTP リクエストが増加することによるマイナス点についても配慮する必要があります。(リクエストが増えるとプロトコルオーバーヘッドの分、 転送量が増大します）

Page Speed での最小化

単純な最小化なら Page Speed を使うと簡単です。

次のスクリーンショットのように、解析結果の出力から直ちに最小化された CSS ファイルを取得できます。

また、Page Speed が出力する最小化版の CSS では要素ごとの改行は残されたままなので、メンテナンス性も高いといえます。

■ 初期費用、維持費の安い使いやすい安定した Web ホスティングを探している方におすすめ

当サイトでおすすめの初心者にも使いやすく、初期費用、維持費の安い使いやすい安定した Web ホスティングは『ブルーホスト』です。 Web サイトの最適化も当サイトで実証済みです。

新規ドメインの取得も簡単（通常、オンラインで取得手続き後直ちに利用可能）、WordPress、Joomla などのブログ、CMS についても簡易インストールサービスも含まれています。 特に WordPress についてはオフィシャル・ホスティングとして有名です。

» ブルーホストの詳細情報はこちら

海外ホスティング入門ホーム > サイトの最適化方法 > CSS と JavaScript の最小化