1日約3500本もの記事がアップされる、ヤフーの「Yahoo!ニュース」。Yahoo! JAPANの代表的なサービスの一つです。そのYahoo!ニュースが2009年4月27日、大幅にレスポンスが向上したことはあまり知られていません。システムを全面的に見直し、記事1本を表示するのにかかる時間を1秒以内に短縮しました。従来は、平均3~5秒だったそうです。実際に記事のタイトルを何本かクリックしてみても、表示で待たされることはありません。確かに快適です。

 これだけの高速化を達成できたのは、きっとサーバー設備や回線などハード面を大幅に改良したのだろうと思い、高速化の秘密をヤフーに聞いてみました。すると「ノー」という答えが。記事ごとに含まれている画像ファイルの扱い方を根本から見直すことで高速化できたんだとか。記事は1本ずつHTMLファイルで書かれています。1本表示する際、写真が含まれていなくても、裏では各種ロゴなど様々な画像を読み込んでいます。ヤフーは、あの手この手のワザを駆使して画像ファイルを少しずつ小さくしていったのです。

 少々専門的な話になりますが、そのワザを紹介しましょう。一つめのワザは複数枚の画像を1枚にまとめる「CSS Sprite」の採用です。アイコンなどがズラリと並んだ画像を1枚作っておき、HTML内で画像のうちのどの部分をどこに表示するか指示をするように改良しました。通常、1枚のWebページを表示する際、10枚の画像を読み込む必要があるなら、HTTPと呼ぶ通信プロトコルを使って画像を10回ダウンロードしなければなりません。CSS Spriteなら、それが1回で済みます。パソコンは同時に複数のHTTPセッションを扱えるので、ブロードバンド回線なら1枚だろうが10枚だろうがスピードは変わらないよ――。こう思うかもしれませんが、HTTPごとに通信を開始する合図といった細かな制御情報のやり取りが発生するため、セッションは少いほど確実に無駄は省けます。

 ワザの2つめが画像ファイルの形式の変更です。従来はGIF形式を採用していましたが、これをPNG形式にしました。PNGの方がわずかにファイルサイズが小さく済むためです。一例を挙げると、6.12KBだったものが5.26KBで済み、約14%削減できたとのこと。

 PNG形式のファイルを生成する際に使うソフトも見直しました。これが3つめのワザです。Webサイトを構築する場合、多くのデザイナーは「Photoshop」と呼ぶ米アドビシステムズの画像編集ソフトを使います。ヤフーは従来、Photoshopで元の画像から128色のGIF形式のファイルを生成していました。当初PNG形式もPhotoshopで生成する計画でしたが、別の画像編集ソフトを使ったところ、ファイルサイズが小さくなることを発見。最終的に、ウェブテクノロジというソフトメーカーの「Optpix WebDesigner」を採用しました。128色ではなく64色にしても、グラデーションが不自然にならないことも分かりました。結果、先ほどの5.26KBのPNGファイルはPhotoshopで生成したものでしたが、Optpix WebDesignerで生成することで約10%少ない4.67KBにまで削減できたとのことです。

 最後のワザが、PNG形式の制御情報(チャンクと呼ぶ)の削除です。PNGファイルには、目には見えませんが本来の画像データ以外に制御情報が含まれています。「Smush.it」という専用ソフトを使うことで、表示上なくてもさしつかえないチャンクを削除。これでOptpix WebDesignerで作った4.67KBのPNGファイルは、4.44KBに。ここでは約4%の削減に成功しました。

 以上、例に挙げた画像ファイルは6.12KBが4.44KBになり、合計で約28%サイズまで小さくできたわけです。わずかな違いと思うなかれ。「ちりも積もれば山となる」。平均3~5秒だった記事1本を表示する時間が1秒以内になったことがそれを証明しています。

 人間が思考の流れが途切れることなくWebページを見るには、表示時間は1ページ当たり1秒が限界だと言われています。この仮説が正しければ、1秒を超えたWebサイトは、ユーザーの多くから見向きをされなくなってしまう危険があります。ヤフーの取り組みは決して突飛なものではなく、マネするのは難しくありません。「1秒」のために努力してみる価値はありそうです。