ネットワーク処理の要素の1つである通信量の削減について紹介します。WEBブラウザとWEBサーバー間でやり取りされる2つのファイルについてです。
- テキストファイル（HTML/CSS/JavaScript）
- 画像ファイル
テキストファイルの通信量の削減
テキストファイルの圧縮についてです。 HTMLやCSS、JavaScriptなどのテキストファイルを圧縮するには、2つの方法があります。
Minify圧縮
HTMLなど人間が記載するファイルには、人間が理解しやすいようにコメントやスペース、改行が入っています。 こうした情報もプログラムには他の文字と変わりなく、サイズがあります。そこで、プログラムに不要なデータを削除するのがMinify圧縮です。 編集用のファイルは可読性を担保するため、コメントや改行など含まれたままにし、別途Minifyしたファイルをブラウザに返します。
Googleが推奨するMinifyツール例
| ファイル形式 | Minifyツール例 | URL |
|---|---|---|
| HTML | html-minifier | https://github.com/kangax/html-minifier |
| CSS | CSSNano | https://cssnano.co/ |
| JavaScript | UglifyJS | https://github.com/mishoo/UglifyJS |
gzip圧縮
gzip圧縮とは、人間には読めないデータに変換する形式で圧縮します。 Minify圧縮を施した上で、gzip圧縮をかけますが、gzipによる削減率は60〜90％と効果の大きなものです。Minifyよりもgzip圧縮の方が実装優先度は高くなります。
gzip圧縮はテキストファイルに対して効果的であり、既に圧縮ずみの画像ファイルやPDFなどには効果がありません。
画像ファイルの通信量の削減
より視覚的に情報を伝えられる画像が利用されることも多くなってきています。 画像はファイルサイズが大きくなりがちで、通信量増加の原因となります。ページの表示速度の高速化における基本姿勢は「画像を極力使用しない」ことです。テキストやCSSで表現できるものはそちらを使用しましょう。
例：ボタンを全て画像で表現しているケースもありますが、よほど凝ったデザインでなければ基本的にHTMLとCSSで代替可能です。 写真やイラストなど画像を利用せざるを得ない場合があります。その際は圧縮をかけましょう。
画像の圧縮形式の種類
画像圧縮形式としては、3種類を紹介します。
- JPEG
- JPEGとは24ビット（1,670万色）まで色を扱え、8×8ピクセルのブロック単位で非可逆圧縮を行う方式です。人間が認識しづらい色調変化のデータを捨てることで圧縮しているので、圧縮前に戻すことができない非可逆圧縮です。
アイコンやイラストなど輪郭がハッキリとした画像には不向きです。写真などに適しています。また、透明色を扱えず、背景の透過ができないことも欠点の1つです。
- PNG
- PNGには可逆圧縮方式で2つの種類があります。1つはJPEG形式と同じ24ビットカラーを扱う「PNG-24」と、8ビットカラー（256色）まで扱える「PNG-8」です。 情報を捨てない可逆圧縮なので、その分ファイルサイズは大きくなります。
- GIF
- GIFは8ビットカラー（256色）まで扱える可逆圧縮方式です。PNGはGIFの後発として開発された経緯もあり、基本的にGIFの圧縮率はPNGに劣ります。 GIFには「GIFアニメーション」機能があり、複数の画像を1つにまとめることで、パラパラマンガに近いアニメーションを作成できます。
画像ファイル形式
- SVG形式
- WebP（ウェッピー）形式
SVG形式とは
SVG形式とは、画像を表現する点の座標とそれらを結ぶ線をデータ化した、ベクトルで表現したXML形式のファイルです。Scalable Vector Graphicsの略です。 SVGファイルも通常の画像と同じく、img要素で読み込みます。
WebP（ウェッピー）形式
WebPとは、Googleが通信量削減を目的に開発したファイル形式です。 可逆圧縮・不可逆圧縮の両方が可能で、非可逆圧縮モードでJPEGと比較して25〜34%小さくなります。
WEBブラウザに限らず、表示を担うアプリケーションがWebP形式に未対応な場合が多いので、画像をダウンロードできなくても問題ないサービスに限定することをおすすめします。
