ウェブページの表示速度を向上させる方法。

ウェブページの表示速度が遅いサイトは、最悪の場合、ユーザーを逃がしてしまいます。

もし、そのサイトが何らかの形で利益を生むようなサイトであれば、その損失は想像以上に大きい可能性があります。

グーグル、アマゾン、ヤフーなどは、普段意識してないから当たり前のようになってしまってますけど、表示速度が驚くほど早いです。

一度、意識して他のサイトや自分のサイトと比べてみてください。すぐにわかると思います。

ウェブページの表示速度は、Pingdom Toolsで測定することができます。ページ全体のファイルサイズや表示速度だけでなく、各ファイルごとのサイズや表示速度もわかりますので、どのファイルが速度を低下させているのか、ということまで把握することができます。

ウェブページの表示速度を上げる方法は、いろいろありますが、比較的簡単でコストもかからずにできる方法があります。

それは、画像の表示にCSS Spritesというテクニックを使うことです。

CSS Spritesを使わずに、画像を配置するオーソドックスなやり方としては、１つ１つ画像をimgタグを使って配置していくことです。ただ、この方法の場合、使う画像の数が少なければ、それほど問題にならないのですが、数が増えてくると、１つ１つ画像を読み込まなければならないので時間がかかってしまいます。

ファイルサイズの大小というよりも、画像を読み込む回数が多くなって表示速度が落ちてしまうのです。

そこで、複数の画像を１つの画像にしてしまって、一度に全ての画像を読み込むようにするのです。そして、その１枚の画像から必要な部分だけをCSSでコントロールして表示させるのです。

これをすると、かなり大きめの画像が必要になるのですが、全体としては大量の小さな画像をたくさん使うよりも、ファイルサイズが少し小さくなります。また、ブラウザの画像を読み込む回数を極端に減らすことができるので、ページの表示速度が早くなるのです。

このCSS Spritesというテクニックは、ユーチューブ、アマゾン、ヤフーなどでも利用されているみたいです。英語で書かれていますが、SMASHING MAGAGINEというサイトで写真付きで分かりやすい解説がなされています。

ほんとに細かいことの積み重ねでWebサイトは、見違えるようによくなっていきますので、一度自分のWebサイトの表示速度改善に挑戦してみてください。

CSS Spriteについては、「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」で解説されています。