[試] サイト表示速度を高速化する方法 | ファイル圧縮（Minify）による表示速度改善

2013/08/04

2014/01/03

約5分

CSS, HTML, JavaScript, WordPress

こんにちは、marubon（@marubon_jp）です。

サイト表示速度を高速化する手法の一つとして、ファイル圧縮（Minify）があります。

このエントリでは、MinifyするためのWebサービスやWordPressプラグインを紹介します。

アウトライン

本エントリのアウトラインです。

Webサイトの表示高速化には、基本的に「データ容量の削減」、「HTTPリクエスト数の削減」、「各処理プロセスの速度向上（HTTPリクエスト～Webブラウザ上の描画）」の３つを柱として、これらをブレイクダウンした施策を実施します。

ファイル圧縮（Minify）は、「データ容量の削減」のためのテクニックです。

HTML、CSS、JavaScriptには、何も対処をしていない場合、ブラウザ描画には必要のない改行や空白、コメントが含まれています。これらを取り除きファイルサイズを削減するのがファイル圧縮（Minify）です。

Minifyによりデータ容量が削減されるのでダウンロード時間が短縮され、結果的にサイト表示速度が改善されます。

以下にMinifyの例（後述するYUI Compressor使用）を紹介します。

Minify前のCSSサンプルソース

.entry {
    margin: 0 0 10px 0;
    padding: 15px 15px;
    background-color: #FFF;
    border: 1px solid #E2E2E2;
    /* border-radius: 4px; */
}

.entry {

margin: 0 0 10px 0;

padding: 15px 15px;

background-color: #FFF;

border: 1px solid #E2E2E2;

/* border-radius: 4px; */

}

Minify後のCSSサンプルソース

.entry{margin:0 0 10px 0;padding:15px 15px;background-color:#FFF;border:1px solid #e2e2e2}

1	.entry{margin:0 0 10px 0;padding:15px 15px;background-color:#FFF;border:1px solid #e2e2e2}

データ容量がMinify前と比較して、gzipしない状態で約40%、gzip状態で約30%削減されています。

ファイル圧縮（Minify）を行う方法を紹介します。

ファイル圧縮（Minify）の方法として、以下を紹介します。

MinifyのWebサービスの利用: Minify機能を提供しているWebサービスを利用します。WebサービスにMinify前のソースを入力するとMinifyされたソースを出力してくれます。ユーザが手動でソースの置き換え（元ファイル→Minifyされたファイル）を行う必要があります。元ファイルをMinifyされたファイルで上書きします。

WordPress Minifyプラグインの利用: WordPressのMinifyプラグインを利用します。設定を行うだけで、ソースの圧縮から置き換え（元ファイル→Minifyされたファイル）まで自動で行ってくれます。Minifyされたファイルは別ファイルとして生成されるので、元ファイルは改変されません。

WordPress等プラグインを使用可能な環境の場合は、Minifyプラグインの使用をおすすめします。理由は、元のソースコードを直接いじる（置き換える）わけではないので、メンテナンス性を維持したままサイト表示速度の改善ができるからです。

尚、WordPressの場合はテーマのCSS、JavaScriptに目が行きがちですが、導入しているプラグインのCSS、JavaScriptを忘れてはいけません。