16:30:00ツイート印刷コメントを書く前回の第一回目のブログで、自己紹介をするのをすっかり忘れていました。今回のブログでは、まず簡単に僕の自己紹介をしたいと思います。僕は、KDDIウェブコミュニケーションズに勤めています。レンタルサーバー(ホスティング)の「CPI」と、ウェブ上で簡単にサイトが作れる「Jimdo」という二つのサービスを行っている会社です。Japanの技術責任者と、新規事業開発を担当しています。自己紹介も終わったところで、今回はサイトの表示スピードの最適化について書きたいと思います。「CPI」「Jimdo」共に、ユーザーのサイトをホストするサービスなので、ユーザーのコンテンツの配信スピードもできるだけ最適化するように努めています。GoogleやAmazonが以前に1秒遅れることで数十パーセントのユーザーが離脱すると言っていましたが、それほどではなくても、サイトの表示スピードはサイトを制作する上では重要になっています。今回は、サーバー側ではなくコンテンツを制作する過程で最適化できるよう、普段気をつけているポイントをご紹介します。ブラウザーが、一つのページを表示する時、HTMLファイルの他に、画像やCSS、Javascript、Flashなどのファイルをダウンロードします。基本的には、このダウンロードするファイルの数を少なくすることにより、表示されるスピードが早くなります。ブラウザーがコンテンツをダウンロードする流れについては、ご存知の方も多いと思いますが、まずHTMLファイルをダウンロードし、読み込んでいく間にでてくる画像やCSS、Javascriptファイル等をHTMLに書かれている上から順にダウンロードしていきます。ほとんどのブラウザーは一つのホスト(ドメイン)から2つまでしか同時にダウンロードができません。これらの条件がある中で、読み込むスピードを早くする方法を今回ご紹介します。いうような記述があった場合、base.cssファイルの読み込みが終わった後でないと、web.cssが読み込まれません。二つのCSSファイルを読み込む場合は、<link>タグで読み込ませることによって、タイミングによっては同時に読み込むことができます。使い別CSSファイルを読み込んだり、各パーツによってCSSファイルを分けたりと、複数のCSSファイルを作成しますが、これらを一つのファイルへまとめます。Javascriptファイルも同様で、jQueryのプラグインを複数入れている場合も一つのファイルにまとめてしまいます。Spriteとは、CSSの中で一つの画像を位置を変えて表示する手法で、これを行うことにより、複数の画像をまとめダウンロード数を減らすことができます。ロールオーバーが簡単にできるようにするJavascriptファイルがよく使われたりしますが、この場合、画像の読み込みが多くなるのでできるだけCSSで、一枚の画像を利用するようにしましょう。Spriteに関しては、以下のサービスを利用することによって簡単にできます。SpriteMehttp://spriteme.org/スタイルシートを<head>内へ入れる当たり前かもしれないですが、スタイルシートはHEAD内へ入れましょう。scriptタグを</body>の直前に入れる<head>内へ入れる方も多いと思いますが、HTMLファイルの上部ではなく、最下部へ入れましょう。その理由としては、scriptが読み込まれている間、画像ファイルなどの他のファイルが読み込むのをブロックしてしまうためです。CSSや画像ファイル等が読み込み終わった後にスクリプトファイルを読み込ませることによって、ちゃんとページが表示される前にスクリプトの処理が行われてしまうことを防ぐこともできます。Javascriptファイル、CSSファイルを圧縮する.jsファイルや.cssファイルに書かれている無駄なタブやスペース、改行などはできるだけ取り除きましょう。することによって、ファイルのサイズが小さくなりダウンロードスピードが早くなります。圧縮ツールを使うことで簡単にできます。Compressorhttp://developer.yahoo.com/yui/compressor/制作する手順としては、制作時はファイルを分けて制作し、公開時にファイルを一つにして圧縮するという方法が望ましいです。今回は、コンテンツ配信スピードの最適化について、コンテンツ制作する過程での最適化について書きましたが、米Yahoo!、Googleが推奨するベストプラクティスについて、各サイトで紹介されているので、これらの手法についても取り入れるといいと思います。Practiceshttp://code.google.com/intl/ja/speed/page-speed/docs/rules_intro.htmlなお、実際のスピードに関しては、米Yahoo!、Googleが提供しているfirebugのプラグインである、下記のツール等で調べることができます。Speedhttp://code.google.com/intl/ja/speed/page-speed/この他にも、サイトの表示スピードやコンテンツの配信スピードを早くする方法はありますが、まずは制作時にできることから始めてみてはいかがでしょうか。ブロガーにより投稿されたものです。Japan編集部の見解・意向を示すものではありません。permission.×このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。