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

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

こんにちは、marubon(@marubon_jp)です。

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

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

SPONSORED LINK

アウトライン

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

  1. ファイル圧縮(Minify)とは
  2. ファイル圧縮(Minify)を行う方法
  3. まとめ

ファイル圧縮(Minify)とは

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

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

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

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

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

Minify前のCSSサンプルソース

 
Minify後のCSSサンプルソース

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

method-speed-up-display-of-web-site-with-contents-minify-02

ファイル圧縮(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のデータ容量を削減し、ダウンロード時間を短縮するテクニックでした。