Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。
下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。
縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまうだろう。ECサイトなら購入手続きの途中で止めてしまうかもしれない。そこで、Webサイトの表示を高速化する6つの具体的な方法を紹介しよう。
【Webサイトを高速化する6大原則】
1.画像は最適化してから使え！
画像の品質を損なわずにファイルサイズを圧縮することは、Webサイトを軽くするもっとも手軽な方法の1つ。画像圧縮にぜひ利用したいのが『punyupng』というツールだ。名前はpunypngだが、PNGのみならず、JPEG、GIF形式の画像ファイルを最適化してくれるスグレモノだ。
●punyuping
http://www.gracepointafterfive.com/punypng/
使い方は極めて簡単。最適化したい画像を 「upload」ボタンから選択すれば自動的に画像が最適化される。
実際に、punypngを使ってPNG形式の画像を最適化してみた。結果は以下の通り。
圧縮前 サイズ：18.4KB
圧縮後 サイズ：14.9KB
punypngによる圧縮結果
見た目はまったく違いが分からないが、ファイルサイズは18.4KBから14.9KBと、19％も小さくなっている。
米ヤフーのパフォーマンスエンジニアが来日！
Webサイトのパフォーマンス向上を直接学ぶチャンス
11月11日～13日に東京都内で開催されるWeb制作者向けカンファレンス＆ワークショップイベント「Web Directions East 2009」では、米ヤフーのパフォーマンスエンジニアであるニコール・サリバン氏が来日。13日のカンファレンスでは「高速ウェブアプリのためのCSSパフォーマンス」と題して、CSSの最適化について解説します。また、12日には少人数制のワークショップ「ウェブサイトパフォーマンス入門」で、より具体的なパフォーマンス向上のテクニックを紹介します。
ASCII.jpではカンファレンスの参加費が割引になる読者優待を用意しています。詳細はこちらをご確認のうえ、お申込みください。