Webサイト高速化技法（２）：HTTPリクエスト数を減らす
これも1回目の「物理的に近い場所に置く」に近い概念となります。
Webサーバーをアメリカに置くとHTTPリクエスト1回でデータは地球を1周します。これがサーバーを近くに置いたとしても数10キロ～数100キロの「旅」は実施されます。この旅の回数を減らすのも大きなポイントです。サーバーの中で処理している時間、クライアントPCの中で処理されてレンダリングエンジンを実行する時間に比べて、データを転送している時間というのは物凄く大きな比重を占めます。また、このリクエスト回数が半分になれば、表示までの時間も半分に近いところまで短縮されます。
どうやってHTTPリクエスト数を減らすか？
単純に画像の数やJSの数を減らせばリクエスト数は減りますが、そうするとWebサイトはやはり地味になってしまいます。サイトのデザインを変えずにリクエスト数を減らす方法はないのでしょうか？
まず、「 @import を減らす」
これは非常に効きます。簡単に説明しますと、CSSファイル内に @import を記述した場合、
1. css ファイルを取得 → 解析 → @import 発見 → 次に読む CSS ファイルを判断
2. @import で記載されていた css ファイルを取得 → 解析・・・・
と、サーバーとクライアントPCの間を2往復します。これらは読み込まないと次のファイル名が分からないので、並行処理はできません。前のファイルを読み込んで解析するまで次のファイルを読み込みに行けません。単純に css ファイル1個の中に書くよりも HTTPリクエストは倍増し、時間も倍増します。極力 @import は使わずに 1つの cssファイル内に書ける分だけ書きましょう。
※注意：何事にも限度があります。あまり長すぎても今度は管理がしづらくなります。管理体系毎に最小の単位に分けて css を記述することをお勧めします。
次に、「 CSS スプライトを使う」
これも非常に有効です。1つの画像の中に何回も流用する画像をパネル状に並べて保存しておくことで、利用時にそれらを css で座標を指定して表示させる部分を切り抜いて使います。ですので、1つのページの中にある数十個の画像を1個にすることで圧倒的に転送時間を短縮させることができます。
※注意：これも同じく限度があります。追加・修正のある画像が中にあると、編集作業や css 定義しなおしが発生して非常に煩雑になってしまいます。次のリニューアルまでほぼ触らないと思われるものだけをピックアップして1枚の画像にするようにしましょう。
あとはひたすら、「ソースの結合」
JSファイルやCSSファイルを小さく数十個記述してあるサイトを良く見ますが、これらは単純にファイルをくっつけて 1枚の長いソースにする事で HTTPリクエストを減らす事ができます。
※注意：これも同じですね。あまり多くを結合してしまうと編集や加筆が非常に煩雑になってしまうことがあります。そうならない為にも、変更しないものだけを抽出することをお勧めいたします。
「 JSファイル圧縮」は？
圧縮という技術もあります。複数の画像やJSファイルを圧縮して1つにし、クライアントPCへロード後に解凍して利用することで、HTTPリクエスト回数を減らしたり、転送（取得）するデータ量を減らして高速化する技術です。しかしこれは最近ではあまり実施している企業はありません。というのも、圧縮してしまうと、ブラウザや利用先でウイルス等の危険性を謳われて取得できない事もある為です。効果はありますが、リスクもありますので、利用の際には細心の注意を払う必要があります。
上記の3つの手段を実施するだけでページの表示時間は大幅にカットされること間違いなしでしょう。前回の（！）の次にこの（２）の「HTTPリクエスト数を減らす」は是非とも実施して見てください。ただし、やりすぎると、編集・修正・プチリニューアル時に大変になりますので、そのあたりも注意しながら実施してください。
次は（３）ですが（３）では内部に話を移していく予定です。
それでは。
