Gzip圧縮による通信量軽減
インターネットでページを閲覧するという行為は、蛇口につないだホースから水を汲むイメージと似ている。小さな量であれば早く汲めるし、大量であればそれなりに時間もかかる。
HTMLやCSS、JavaScriptと言ったようなテキストデータは、WebサーバでGzip圧縮を行い、圧縮したデータで通信し、ブラウザで解凍して表示することで大きな高速化を行うことが可能である。
上記の例はGzip圧縮通信を行うことで、通信量がわずか10分の1になる例だが、これは大袈裟ではなく、この程度の通信量圧縮は一般的に可能である。
Gzip圧縮はメリットだけのように書いたが、いくつか問題も存在する。
- サーバ側で毎回圧縮処理を行うためCPU負荷は増大する
- IE6以下で使用不可（IE6の場合はさらに細かいバージョンに寄る）
※厳密に言えばIE6で使用する方法はある - HTMLよりもCSSのサイズが極端に大きい場合、レンダリングに時間がかかる
CPU使用率に余裕があり、IE6以下は圧縮しない設定を取り、HTMLのサイズとCSSのサイズに極端なサイズ差がなければ、Gzip圧縮は特にオススメしたい。体感で速度が向上することに気付くだろう。
CSSとJavaScriptの配置による体感速度の向上
CSSは上へ配置し、JavaScriptは下へ配置する。これが基本原則である。
特にJavaScriptの下部配置は非常に有効な施策である。
一般的にはbodyタグの終了直前にjsファイルをリンクするような形式で配置することで、HTMLのレンダリングをJavaScriptの処理を待たずに行うことが出来るため、JavaScriptの実行時間分、表示までの体感速度が向上する。
CSSについても複数枚で構成する場合はheadタグ内に連続してlinkタグを利用て配置し、@importを使わないようにすると良い。これも体感的なレンダリング速度を向上させる可能性があるからだ。
高速化施策によるビズリーチでの効果
ビズリーチでは解説した3つの施策を中心として、米Yahooの提唱する14のルールや独自に検証したルールも盛り込み、トップページの表示速度が0.4秒～0.7秒という驚異的な速度を実現している。CVに関わるような具体的にサービスとして向上した数値は、前回述べた通りだが、カスタマにとっては間違い無くストレスフリーな速度を実現していると言って良い。特にCSSスプライト等は絶大な効果を発揮し、画像の管理方法さえ間違わなければ、画像が散乱する従来よりも非常に管理しやすくなるというメリットもある。
次回は高速化施策が与えるSEOへの影響などを述べる。
