[試] サイト表示速度を高速化する方法 | ファイル圧縮(Minify)による表示速度改善
![[試] サイト表示速度を高速化する方法 | ファイル圧縮(Minify)による表示速度改善](https://marubon.info/wp-content/uploads/method-speed-up-display-of-web-site-with-contents-minify-01.png)
こんにちは、marubon(@marubon_jp)です。
サイト表示速度を高速化する手法の一つとして、ファイル圧縮(Minify)があります。
このエントリでは、MinifyするためのWebサービスやWordPressプラグインを紹介します。
スポンサーリンク
アウトライン
本エントリのアウトラインです。
スポンサーリンク
ファイル圧縮(Minify)とは
Webサイトの表示高速化には、基本的に「データ容量の削減」、「HTTPリクエスト数の削減」、「各処理プロセスの速度向上(HTTPリクエスト~Webブラウザ上の描画)」の3つを柱として、これらをブレイクダウンした施策を実施します。
ファイル圧縮(Minify)は、「データ容量の削減」のためのテクニックです。
HTML、CSS、JavaScriptには、何も対処をしていない場合、ブラウザ描画には必要のない改行や空白、コメントが含まれています。これらを取り除きファイルサイズを削減するのがファイル圧縮(Minify)です。
Minifyによりデータ容量が削減されるのでダウンロード時間が短縮され、結果的にサイト表示速度が改善されます。
以下にMinifyの例(後述するYUI Compressor使用)を紹介します。
Minify前のCSSサンプルソース
1 2 3 4 5 6 7 | .entry { margin: 0 0 10px 0; padding: 15px 15px; background-color: #FFF; border: 1px solid #E2E2E2; /* border-radius: 4px; */ } |
Minify後のCSSサンプルソース
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)方法
ファイル圧縮(Minify)の方法として、以下を紹介します。
- MinifyのWebサービスの利用
- Minify機能を提供しているWebサービスを利用します。WebサービスにMinify前のソースを入力するとMinifyされたソースを出力してくれます。ユーザが手動でソースの置き換え(元ファイル→Minifyされたファイル)を行う必要があります。元ファイルをMinifyされたファイルで上書きします。
- WordPress Minifyプラグインの利用
- WordPressのMinifyプラグインを利用します。設定を行うだけで、ソースの圧縮から置き換え(元ファイル→Minifyされたファイル)まで自動で行ってくれます。Minifyされたファイルは別ファイルとして生成されるので、元ファイルは改変されません。
WordPress等プラグインを使用可能な環境の場合は、Minifyプラグインの使用をおすすめします。理由は、元のソースコードを直接いじる(置き換える)わけではないので、メンテナンス性を維持したままサイト表示速度の改善ができるからです。
尚、WordPressの場合はテーマのCSS、JavaScriptに目が行きがちですが、導入しているプラグインのCSS、JavaScriptを忘れてはいけません。
MinifyのWebサービス
各種MifinyをしてくれるWebサービスを紹介します。
Online YUI Compressor
JavaScriptとCSSの圧縮(Minify)Webサービスです。
Online YUI Compressor |
packer
JavaScriptの圧縮(Minify)Webサービスです。
/packer/ |
Closure Compiler
JavaScriptの圧縮(Minify)Webサービスです。
Closure Compiler Service |
Compress HTML Source Code
HTMLの圧縮(Minify)Webサービスです。
Compress HTML Source Code |
Minifyプラグイン
Minifyを自動で行ってくれるWordPressプラグインを紹介します。
プラグインの最適な設定はサイト構成に依存します。プラグインの各種設定項目の動作を理解した上で、試行錯誤しながらチューニングする必要があります。適切な設定をすれば高い効果を得られますが、不適切な設定の場合は逆にサイト表示速度が落ちる場合があるので注意して下さい。
また、機能毎に役割分担させた上でのプラグインの併用(W3 Total CacheでHTML Minify機能を使用 + WP-MinifyでCSS、JavaScript Minify機能を使用等)は可能ですが、基本的に同機能プラグインの併用は避けて下さい。正常に表示されなくなる場合があります。
WP-Minify
HTML、CSS、JavaScriptを圧縮(Minify)を専門としたWordPressプラグインです。
WordPress › WP Minify « WordPress Plugins |
Autoptimize
HTML、CSS、JavaScriptを圧縮(Minify)を専門としたWordPressプラグインです。
WordPress › Autoptimize « WordPress Plugins |
Head Cleaner
ヘッダのカスタマイズ総合プラグインです。HTML、CSS、JavaScriptの圧縮(Minify)機能も備えています。
WordPress › Head Cleaner « WordPress Plugins |
W3 Total Cache
キャッシュ機能を中心とした総合的なパフォーマンス改善プラグインです。HTML、CSS、JavaScriptの圧縮(Minify)機能も備えています。
WordPress › W3 Total Cache « WordPress Plugins |
まとめ
サイト表示速度を高速化する方法として、ファイル圧縮(Minify)を行う方法を紹介しました。
HTML、CSS、JavaScriptのデータ容量を削減し、ダウンロード時間を短縮するテクニックでした。