Webサイトの表示速度をアップさせる上で、JavaScriptやCSSなどWebサイトの構成要素を圧縮することは重要な解決策の一つです。圧縮とはソースコード中のコメントや改行を削除し、ファイル自体をコンパクトにする作業です。圧縮することで処理を高速に行えるようになります。

Googleが"ページ表示速度を検索順位評価要素に入れている"ことを公表していることもあり、Webサイト構築・運営に関わる担当者にとって「表示速度の向上」は放置できない課題といえます。

今回は、Webサイトの高速化に欠かせないJavaScript/CSSの圧縮ツールをその活用法とともにご紹介します。

JavaScript/CSS圧縮ツールを使うメリット

一般的にWebサイトの表示処理速度が遅くなる要因として、以下の3つが挙げられます。

1. Webサーバのハードウェア的なパフォーマンスが悪い
2. ネットワークが遅い
3. Webの構成要素（プログラムやデータベースなど）の処理に時間がかかっている

1.や2.は、ホスティング業者やネットワーク提供プロバイダの問題ですが、3.のWeb構成要素はWebサイトを作るエンジニアで解決できる内容です。そこで、JavaScript/CSSの圧縮がWebサイトの構成要素を解決するための最も手軽で効果的な方法だと考えられています。

ちなみに、ここでいう「圧縮」とは、コメントや不要なコードを削除して要素自体を小さく軽くすることを指します。ファイルサイズが小さくなることで、より高速な動作が可能となり、結果的にWebサイト全体の高速化につながっていくと考えられています。

しかし、すべてのファイルを一つひとつ地道に対応するのは、かなり骨の折れる作業です。
そこでオススメしたいのが、下記で紹介するJavaScript/CSS圧縮ツールになります。
これらを使えば、自動的に不要なコメントや改行を削除してくれ、簡単にWebサイトの高速化につなげることができます。

JavaScript/CSS圧縮ツールの活用法を紹介

では、下記にてWebサイトの高速化につながる各JavaScript/CSS圧縮ツールの特徴と、その活用法について紹介していきます。

1. CSS Minifier

chap_3.JPG
https://syncer.jp/css-minifier

こちらはスタイルシート（CSS）を圧縮するサービスです。操作性は「packer」と類似していて、コードを貼り付けて「縮小する」ボタンを押すと改行やコメントを除いた結果を表示します。

結果は、Firefox、Chromeなどのブラウザを使えばクリックするだけでコピーができます。
手軽に圧縮処理できる点が強みです。

2. CSS & JavaScript Compressor

chap_1.JPG
http://www.creativyst.com/Prod/3/

Webブラウザで利用する圧縮サービスで、CSSやJavaScriptに対応しています。
このサイトでは「圧縮前のサイズ」、「圧縮後のサイズ」、そして「何%圧縮できたか」が表示されます。ファイルサイズと圧縮の目安を知るのに非常に便利です。

3. Online JavaScript/CSS/HTML Compressor

chap_4.JPG
https://refresh-sf.com/

入力エリアにコードを貼り付けて、右上の貼り付けたコードに該当するボタン（「Java」「CSS」「HTML」）を押すと、圧縮されたコードが生成されるツールです。
圧縮結果をGzip形式でダウンロードすることもでき、その後のファイル管理も計算できる点が便利です。

4. Closure Stylesheets

chap_5.JPG
https://github.com/google/closure-stylesheets

Closure Stylesheetsは、GoogleがリリースしているCSSの圧縮ツールです。
単純にコメントや改行を削除するだけでなく、「文法チェック」「変数定義・展開」「CSS クラス名の短縮」など、様々な機能を持っている点が強みです。

単純な圧縮だけでなく、自分が書いたコードが正しいかどうか確認するという目的でも使えます。

5. Closure Compiler

chap_6.JPG
https://developers.google.com/closure/compiler/

Closure Compilerは、「5. Closure Stylesheets」と同様に、Googleが提供するJavaコードの圧縮ツールです。
他の圧縮ツールと違うポイントは、不要なコードを削除したり、変数名を短くしたりという極限までの圧縮を行えることです。
素早く、極めて小さなファイルを生成したい場合は、こちらのツールが最適です。

6. Format CSS Online

chap_7.JPG
http://www.lonniebest.com/formatcss/

Format CSS Online は、CSSをWeb上で圧縮できるサービスです。右フレームの項目で、生成されるコードの圧縮形式を細かく設定することができます。
他のツールと比較した際、細かく条件を指定できる点が魅力のツールです。

7. CSS Compressor

chap_8.JPG
https://csscompressor.com/

CSSの圧縮に特化したWebサービス「CSS Compressor」は、「CSS 1」「CSS 2」「CSS 2.1」「CSS 3」に対応し、Highest, High, Standard, Lowの4つの圧縮レベルを選択することが可能です。

「とにかく高速化したい」「コメントなどは少し残しながらも速くしたい」など目的にあった圧縮を行うことできます。

8. YUI Compressor

chap_9.JPG
http://yui.github.io/yuicompressor/

こちらは、JavaScriptとCSSの圧縮ツールとしては有名なツールです。
利用するには、ダウンロードしてコマンドラインから実行する方法と、Webサイト上で直接圧縮する方法の2つがあります。
コメントや空白の削除、変数名を短くすることでファイルサイズを小さくし、Webサイトの高速化につなげられるサービスです。

9. jsLex

「jsLex」は、Eclipseのプラグインとしてリリースされているもので、Eclipseマーケットからダウンロードが可能です。（※１）

Eclipseのプラグインということで、プログラミングをしながら同時に圧縮を行うこともできる点が強みです。わざわざコードをWebサイトなどに貼り付け、結果を見る必要がありません。

Eclipseを使って開発している方にはオススメです。

※１：実際にダウンロードして活用するのは「Rockstar Web Optimizer」です。