hiromitz

制作過程で変わるサイトの表示スピード

2011-05-31 16:30:00

前回の第一回目のブログで、自己紹介をするのをすっかり忘れていました。
今回のブログでは、まず簡単に僕の自己紹介をしたいと思います。
僕は、KDDIウェブコミュニケーションズに勤めています。レンタルサーバー(ホスティング)の「CPI」と、ウェブ上で簡単にサイトが作れる「Jimdo」という二つのサービスを行っている会社です。僕はこの会社で、Jimdo Japanの技術責任者と、新規事業開発を担当しています。

さて、自己紹介も終わったところで、今回はサイトの表示スピードの最適化について書きたいと思います。

「CPI」「Jimdo」共に、ユーザーのサイトをホストするサービスなので、ユーザーのコンテンツの配信スピードもできるだけ最適化するように努めています。
GoogleやAmazonが以前に1秒遅れることで数十パーセントのユーザーが離脱すると言っていましたが、それほどではなくても、サイトの表示スピードはサイトを制作する上では重要になっています。

サーバー側で、コンテンツの配信スピードをより早くする手法は色々とありますが、
今回は、サーバー側ではなくコンテンツを制作する過程で最適化できるよう、普段気をつけているポイントをご紹介します。

ブラウザーが、一つのページを表示する時、HTMLファイルの他に、画像やCSS、Javascript、Flashなどのファイルをダウンロードします。
基本的には、このダウンロードするファイルの数を少なくすることにより、表示されるスピードが早くなります。

ブラウザーがコンテンツをダウンロードする流れについては、ご存知の方も多いと思いますが、まずHTMLファイルをダウンロードし、読み込んでいく間にでてくる画像やCSS、Javascriptファイル等をHTMLに書かれている上から順にダウンロードしていきます。
また、ほとんどのブラウザーは一つのホスト(ドメイン)から2つまでしか同時にダウンロードができません。
これらの条件がある中で、読み込むスピードを早くする方法を今回ご紹介します。



@importを利用しない

例えば、 base.css というファイルの中に、 @import web.css というような記述があった場合、base.cssファイルの読み込みが終わった後でないと、web.cssが読み込まれません。
二つのCSSファイルを読み込む場合は、<link>タグで読み込ませることによって、タイミングによっては同時に読み込むことができます。



CSSやJavascriptファイルをできるだけ一つにまとめる

よく、CSSの中で @import を使い別CSSファイルを読み込んだり、各パーツによってCSSファイルを分けたりと、複数のCSSファイルを作成しますが、これらを一つのファイルへまとめます。
Javascriptファイルも同様で、jQueryのプラグインを複数入れている場合も一つのファイルにまとめてしまいます。



CSS Spriteを利用し、画像をまとめる

CSS Spriteとは、CSSの中で一つの画像を位置を変えて表示する手法で、これを行うことにより、複数の画像をまとめダウンロード数を減らすことができます。

また、ロールオーバーが簡単にできるようにするJavascriptファイルがよく使われたりしますが、この場合、画像の読み込みが多くなるのでできるだけCSSで、一枚の画像を利用するようにしましょう。

CSS Spriteに関しては、以下のサービスを利用することによって簡単にできます。



スタイルシートを<head>内へ入れる

当たり前かもしれないですが、スタイルシートはHEAD内へ入れましょう。



scriptタグを</body>の直前に入れる

<head>内へ入れる方も多いと思いますが、HTMLファイルの上部ではなく、最下部へ入れましょう。
その理由としては、scriptが読み込まれている間、画像ファイルなどの他のファイルが読み込むのをブロックしてしまうためです。
また、CSSや画像ファイル等が読み込み終わった後にスクリプトファイルを読み込ませることによって、ちゃんとページが表示される前にスクリプトの処理が行われてしまうことを防ぐこともできます。



Javascriptファイル、CSSファイルを圧縮する

.jsファイルや.cssファイルに書かれている無駄なタブやスペース、改行などはできるだけ取り除きましょう。
そうすることによって、ファイルのサイズが小さくなりダウンロードスピードが早くなります。

こちらに関しては、手動で行うより YUI Compressor などの圧縮ツールを使うことで簡単にできます。

YUI Compressor
http://developer.yahoo.com/yui/compressor/

制作する手順としては、制作時はファイルを分けて制作し、公開時にファイルを一つにして圧縮するという方法が望ましいです。


さて、今回は、コンテンツ配信スピードの最適化について、コンテンツ制作する過程での最適化について書きましたが、米Yahoo!、Googleが推奨するベストプラクティスについて、各サイトで紹介されているので、これらの手法についても取り入れるといいと思います。

Best Practices for Speeding Up Your Web Site
http://developer.yahoo.com/performance/rules.html

Web Performance Best Practices
http://code.google.com/intl/ja/speed/page-speed/docs/rules_intro.html

なお、実際のスピードに関しては、米Yahoo!、Googleが提供しているfirebugのプラグインである、下記のツール等で調べることができます。

Yahoo! YSlow
http://developer.yahoo.com/yslow/

Google Page Speed
http://code.google.com/intl/ja/speed/page-speed/

この他にも、サイトの表示スピードやコンテンツの配信スピードを早くする方法はありますが、まずは制作時にできることから始めてみてはいかがでしょうか。

※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ