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回にわたる次の画像最適化シリーズブログで紹介されているテクニックということだ。

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関連に関する記事へのリンクをまとめておく。