Design デザイン・UI

 
デザイン・UI

【続編】「gzip」でWebサイトを軽量・高速化!

gzip_03

前回は「gzip」の概要と設定方法について書きましたが、今回は実際に「gzip」を使用してみて、容量がどのぐらい軽量化されるのか。表示の速度はどうなるのか。ファイル圧縮の手間はどうなのかを、調べてみました。

データ容量が大きいほど効果的!

まずは、データがどのぐらい圧縮されたのかを見ていきましょう。

■html

gzip_html

■CSS
gzip_CSS

■JavaScript

gzip_JS

検証サイト:株式会社ドーモ(https://www.domore.co.jp

HTML、CSSでは元データの容量が小さいため、圧縮された容量は10~20KB程度となりました。ただ、ひとつのファイルで圧縮される量は少ないですが、ファイルの数が多ければ多いほど圧縮される量も増えますので、全体として考えれば圧縮できる容量は大きくなります。

JavaScriptでは、約6MBのファイルが41KBまで圧縮でき、約5MB強を圧縮したことがわかります。

ファイル容量が大きければ圧縮される量も大きくなるようです。

表示速度に1秒の差も!

同じ通信環境で「gzipありのWebサイト」と「gzipなしのWebサイト」で表示速度を計測したところ、実際のファイル容量は変わらないにもかかわらず、表示までの時間に約1.5秒の差がありました。

gzip_表示速度

gzipファイルはブラウザ側で圧縮ファイルを展開するため、デバイス側の処理速度により表示までの時間は変動しますが、gzipファイルを用意すると表示速度が改善することは明らかです。

gzipファイルは若干手間がかかる!?

gzipファイルはファイルごとに圧縮する必要があります。複数ファイルの圧縮や、更新があった際に圧縮し直すことを考えると若干手間がかかります。毎日更新があるサイトの場合は大変かもしれませんね。

まとめ:「gzip」は手軽にできる軽量・高速化の方法

2回に分けて「gzip」を紹介しましたが、Webサイトを手軽に軽量・高速化させるには方法としては最適だと言えます。オススメする理由としては、元のWebサイトに手を入れる必要がない点でしょうか。圧縮ファイルを用意して、「gzip」を使用するための記述を追加するだけで軽量・高速化できるのは魅力的です。

ただ、Webサイトの種類によっては運用の手間が増えますので、導入する前によく検討してみてください。

この記事を書いた人


モバイルラボ 編集部
ヨコハマ・モバイルラボとは? モバイルならではの表現ってなんだろう? 一瞬のひらめきや感動は手のひらから始まっています。 新しいクリエイティブのカタチをここから探してみましょう。
タグ

自分を変えるチャンス、チャレンジするタイミングです。
始めてみるなら、未経験からでもWebデザイナーや動画クリエイターのプロを
目指せるスクールがデジハリのスタジオ横浜です。!
 最新記事