先日ウェブサイトの表示速度の検証をPageSpeed Insightsで行いました。

そこで改善の一つとしてファイルの圧縮（minify）をしたのですが、

簡単に圧縮（minify）できる方法を短めに紹介したいと思います。

 

圧縮とは

データ圧縮とは、データの意味を失わうことなくデータの総容量を小さくする技術のことである。単に圧縮と呼ばれることが多い。

データ圧縮は、通信やアーカイバ、静止画および動画などで多用されている。

圧縮には、元のデータを完全に復元する「可逆圧縮」と、圧縮率は高いが完全な復元は行わない「非可逆圧縮」がある。完全な復元が必要なアーカイバによるファイルの圧縮には可逆圧縮が、完全な復元より圧縮率を優先する動画や静止画の圧縮には非可逆圧縮が利用されている。

データ圧縮の具体的な方式は、採用されている圧縮アルゴリズムにより異なる。

jqueryなどのプラグインをダウンロードするとよく「〇〇.js」「〇〇.min.js」みたいに、

同じ名前で".min"が付いているファイルを見かけます。

ファイルサイズを確認すると分かるのですが、".min"とはMinified（圧縮した後）の略です。

 

圧縮することでファイルサイズが小さくなりウェブサイトの読み込み速度が上がります。

そして、読み込み速度が上がるとユーザーのストレスが少なくなり離脱率対策として効果を発揮します。

Sublime Textに「YUI Compressor」をインストールするのがオススメ

テキストエディタの相性は人それぞれですが、僕はSublime Textを使っています。

（Sublime Textはプラグインが豊富でとにかくサクサク動きます。）

 

Sublime Textを使う理由

 

Sublime TextとYUI Compressorの組み合わせがファイルを圧縮するのに最適です。

YUI Compressorをインストール

早速、Sublime Textを開いて

 

command + shift + P

 

Package Control: Install PackageをアクティブにしてENTER。

「YUI Compressor」と入力。

 

YUI Compressorの初期設定

（画像と下記の説明はSublime Textを日本語化してます。）

インストールが完了したら初期設定をします。

デフォルトだと150文字で改行するという設定になっていて、1行に圧縮してくれません。

 

150文字で改行する設定を無効にするには、

基本設定 > Packageフォルダ > YUI Compressor > YUI Compressor.sublime-buildを開きます。

7行目と17行目の

"--line-break" , "150",

をスラッシュでコメントアウトします。

 

以上で設定は全て完了です。

 

圧縮してみる

圧縮したいファイルをSublime Textで開いて

command + B

 

をタイプするだけ。

0.6秒で圧縮が完了してます。

圧縮したファイルは同じ階層に●●.min.jsとなり追加されてます。

 

以上。Sublime TextにYUI Compressorをインストールしてファイルを圧縮する方法でした。