Yahoo! JAPAN Tech Blog

Yahoo! JAPANは27日、Yahoo!ニュースをリニューアルした。従来よりも高速にページが表示されるように改善が施された。従来は3秒から5秒ほどかかることもあった表示時間を1秒以内のレスポンスタイム実現を目指して各種最適化が実施されたと説明されている。

どういった最適化が実施されたのかがYahoo! JAPAN Tech Blog Yahoo!ニュース高速化へのサイトデザイン側からのアプローチで説明されている。サイトデザイン側の高速化アプローチとしておもに次の技術を活用したという。

• CSS Spriteの採用
• PNG8の採用
• Optpix WebDesignerを使いPNG8の減色処理を実施
• Smush.itを活用しPNG8の余分なチャンクを削除

興味深いのは、これらテクニックはYahoo!のエンジニアでありYSlowの開発者、Stoyan Stefanov氏が解説した5回にわたる次の画像最適化シリーズブログで紹介されているテクニックということだ。

• 第1弾 画像を最適化してページ表示速度を高速化する方法を知りたいなら
• 第2弾 最良の画像フォーマットはPNG8、GIFはアニメーション、JPEGは写真に
• 第3弾 Stefanov氏、画像サイズを縮小化する4つの手順を紹介 - 画質劣化一切なし
• 第4弾 JPEGをプログレッシブにするかどうかの分かれ目は10KB
• 第5弾 AlphaImageLoaderで透過PNGは重い、PNG8工夫で対処が適切

Stoyan Stefanov氏はWebページの高速化を実現するためのツールYSlow(高速化技術6テクニック、高速化規則34カ条、高速化規則20カ条)の開発者であり、高速化手法に対する造詣が深い(JavaScript読み込みブロック回避でページ表示を高速化する方法)。Yahoo!ニュースのサイトで実際にStoyan Stefanov氏がまとめたテクニックが活用され、実際に効果をあげているのは興味深い。

またYahoo!ニュースとしてはじめてPNG8が採用されたという点も注目だ。Yahoo!ニュース高速化へのサイトデザイン側からのアプローチには最近ではほとんどのブラウザがPNG8をサポートするようになったためGIFからPNG8へ移行しても問題がなくなったといった旨の説明がある。Stoyan Stefanov氏の連載でも解説されているようにGIFよりもPNG8の方が速度的には優れた結果を出すため、採用できる状況であればPNG8を使った方がいいとされている。

次にIE6とPNG関連の記事や、CSS Sprite関連に関する記事へのリンクをまとめておく。

• JavaScriptを使わないでIE6で透過PNGを使う方法
• IE6 透過PNG表示、IE PNG Fix 2登場
• IE6フレンドリーなPNGを作る方法

• IE7.js登場 - IEのCSS/HTML非準拠はこれで対応

• 1枚の画像を切り出すテクニックCSS Sprite、便利ツール登場

• 画像結合/CSS切出で転送量&HTTPリクエスト削減 - CSS Sprite Generator 2
• ソースコード登場、CSSで画像分割 "CSS Sprite Generator"
• 画像のHTTPリクエストをCSSを使って軽減する"CSS Sprite Generator"