はてなブックマークでPC Online史上最高値を記録した「『Yahoo!ニュース』の表示速度が3～5倍に、そのからくりは……」のタイトルをパクリました。ははは。
2009年4月にPC Onlineはリニューアルしたのですが、その際の個人的なテーマが「faster」だったものですから、ここで簡単にまとめておこうと考えた次第です。
前提：運用が簡単なこと
表示を速くしたいといってもコストのかかることは論外。また、システム上の制約を超えて運用でカバーするのも対象外（なにせ2人でシステムのおもりをしているので）－－ということを踏まえ、可能なことをやることにしました。手法を大きく2つご紹介します。
その1：JavaScriptとCSSファイルを圧縮
1ページで呼び出すファイル数を減らせば、HTTP Reqeust数を減らせます。ここで言うファイル数とは、CSSやJavaScript、画像などです。私も、上記の記事を読んで「HTTP Request数を減らすとかなり効果があるんだなぁ」などと関心しましたが、リニューアル当時にHTTP Reqeust数を減らせないかと（多少ですが）考えていました。
ただ、記事の中で何個の画像を使うかは記事に依存しますので、ここまで減らせるという目標値を作るのは難しいのです。また、PC Onlineで利用しているシステムでは、対応画像は原則としてJPEGだけ（一部に使っているGIFは運用でカバーしているもの）。GIFやPNGをバンバン使うようにするなら、運用でカバーするしかありません。すっぱりと諦めました。システムがGIFやPNGに対応してくれるのを待つことにしました。
CSSやJavaScriptも、1つのファイルに統合すれば、HTTP Request数は確かに減ります。しかし一方で、チーム開発する上でCSSの定義やJavaScriptのプログラムのメンテナンスが煩雑になるというデメリットも生じます。運用を重視し、ファイル数を減らさないことにしました。
というわけで、減らせるデータ量は結構限られます。その中で、CSSファイルとJavaScriptのデータ量を減らしました。
方法は、米ヤフーが公開している圧縮ツール「YUI Compressor」を使ったこと。このツールは、CSSやJavaScriptファイルから余分な情報（コメントアウト、改行）を削除してくれたり、JavaScriptの変数名をaとかbとかいうように短いものに変換してくれたりします。
これにより、ファイルによっては半分のサイズにすることができました。リニューアル前と比べて、CSSファイル、JavaScriptを併せてざっくり言うと150KB近いサイズを減らせた計算です。平行して、HTML内でなるべく半角スペースやタブ文字を取る作業もしました。これらの作業で200KB程度は削減できました。
コンテンツのダウンロードにかかる時間がそれだけ減ることになりますので、具体的な数値は測っていませんが、それなりに効果はあったと思います。
その2：コンテンツの表示タイミングをずらす
ファイルサイズを減らすこともそうですが、ユーザーの見かけ上のスピードを上げることも効果があると考えました。自分がそうですが、HTMLの読み込みが終わっているのに、途中のJavaScriptの処理や広告表示がボトルネックになって、ページがなかなか表示されないとストレスが溜まるものです。
着目したのは主に2つです。
一つは、記事と直接的に関係のないJavaScriptの処理を遅らせることです。ちょっと専門的な話になりますが、ページが読み込まれた後で処理する（あるいはもう少し前のタイミングで処理する）ようにしました。
もう一つは、広告の表示タイミングを微妙に遅らせたのです。自社の話で恐縮ですが、広告がなかなか表示されないために、イライラすることが少なくなかったのです。やはりJavaScriptを使い、「あれ？広告表示が遅いな？」と思わない程度に広告の表示タイミングを若干遅らせました。少なくとも体感ではイライラ感は多少減ったのではないでしょうか（汗）？
