(cache) はてなブックマークが重い件について、Page Detailerというツールを使って調べてみる

JavaScriptの部分は

はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記

というわけでid:amachangに任せましょう。

というわけでそれ以外の部分でいったいどこが重いのか

何が重いの？ということで重たい箇所を分析していきましょう。

IBM PageDetailer

解析ツールとしてIBM PageDtailerを利用します。

alphaWorks : IBM Page Detailer : Overview

解説するよりも見てもらうほうが早いと思うのでさっそく使ってみるよ。

ちなみに上記ソフトのダウンロードにはIBMアカウント（無料）が必要なので、使いたい人は登録しよう！

http://b.hatena.ne.jp/HolyGrail/ の結果

こんな感じのグラフが出てきます。

では、詳細を見てみましょう。

このグラフですが、長い部分が http://b.hatena.ne.jp/HolyGrail/ のHTMLそのもののロード時間になっています。

内訳としては

濃い青色	サーバからのレスポンスタイム
緑色	ファイルの転送時間

となっていて、サーバからレスポンスが返ってくるまでにとても時間がかかっていることがわかります。

カーソルを合わせると詳細が表示されます

これを見ると、サーバから返答がくるまでに約3.7秒かかっていることがわかります。

と、こんな感じで

遅い原因ってどこなんだろう、っていうのを探していきます。

さて、このツール下のほうにDetailsっていうタブがあって、そっちのタブに切り替えると次のような表示になります

ここでは、ファイルごとにかかった時間やファイルサイズによってソートをすることができます。

また、右クリックからカラムを追加することもできます。

やはり、最初のHTMLのレスポンスをかえすまでが非常にネックになっているといったことを読み取れます。

あとはentries.simple.jsonというファイルを大量に取得しているのも気になります。

これらのファイルも、グラフを見ると、サーバからのレスポンスまでに時間がかかっており、ファイルの転送時間が特別ネックになっているといったことはなさそうです（回線にもよるでしょうが）

結論

レスポンスタイムの改善に注力しましょう！

そのほかのパフォーマンス改善のための原因調査方法

さて、これだけだと乱暴ですし、もともと自分はフロントエンドの人間なので、普段パフォーマンス改善のためにどうやってるか、みたいなのをはてブページを例に書いてみます。

YSlow

これは非常に有名なツールですが、せっかくですので解説してみます。

YSlowというのはFirebugの拡張のためのFirefox 拡張機能です。

Yahoo Inc.が開発しています。

YSlow :: Firefox Add-ons

こいつをインストールしてやると、FirebugのなかにYSlowというタブが追加されます。

で、Performanceというボタンを押してやるとそのサイトのパフォーマンスを測定してくれます。

http://b.hatena.ne.jp/HolyGrail/ の結果は・・・？

結果は次のとおりです

ランクF（42点）

これはダメダメですね。

これは、いわゆるパフォーマンスにおける14のルールのうちの13個を自動的に評価してくれるものです。

上から順に見て見ましょう

1. Make fewer HTTP requests

これは、HTTPのリクエストの数を減らしましょう、という項目です。

詳細を見ると

This page has 24 external JavaScript files.

This page has 3 external StyleSheets.

This page has 112 CSS background images.

ということで、かなり大量のリクエストが発生していることがわかります。

これらを解決するには、たとえばJavaScriptやStyleSheetsはできるだけ1つのファイルにして読み込ませたり、CSSの背景画像にかんしてはCSS Spriteといったテクニックを活用することで減らすことができます。

2. Use a CDN

これはCDNといってアクセスする地域によって取得しに行くデータセンターを変更する、といったものなのですが、国内においてさほど重要ではないので省略します。

（たとえば全世界からアクセスされるようなサイト（http://www.yahoo.com）なんかはCDNを利用しています。）

3. Add an Expires header

これは、適切なExpiresを指定して更新頻度の少ないファイルはちゃんとキャッシュさせましょう、という項目です。

この項目の詳細が結構ひどくて、ほとんどすべてのスクリプトや画像にたいして適切なExpiresが指定されていないことがわかります。

適切なExpiresの指定はページの高速化だけでなく、無駄なリクエストを減らすことができるので、高速化のことを考えると指定することが望ましいです。

もちろん、このあたりはページの更新頻度などを考えるとケースバイケースなのですが、スクリプトやCSSといった更新頻度の少ないものや、画像といったファイルサイズが大きくなりがちなものに関しては適用させるのが望ましいでしょう。

4. Gzip components

Gzipを適用させてファイルサイズを減らそう、という項目です。

この項目を見るとHTML、JavaScript、CSSがGzipされていないことがわかりました。

基本的にはファイルをダウンロードする時間とGzipを解凍する時間とでは、Gzipを解凍する時間のほうが速いことが最近ではほぼ一般的です。

特に、ここのHTMLですが、ファイルサイズが約670kbととんでもないサイズに肥大してしまっているので、Gzipをかけたほうがよいかもしれません。

ただ、Page Detailerの項目にもあったように、バックグラウンドの処理に時間がかかっていることからもそれでページ全体として高速化がはかれるかどうかはまだわからないのでこのあたりはどちらが最終的に早くなるかは調査する必要があると思います。

6. Put JS at the bottom

JavaScriptが実行されるとページの描写やその他のコンポーネントのダウンロードが停止します。

そのため、即座に実行されるJavaScriptはできるだけページの下部におきましょう、というのがこの項目です。

この項目では

http://s.hatena.ne.jp/js/HatenaStar.js

http://b.hatena.ne.jp/js/DropDownSelector.js?1a5f554047b2

http://b.hatena.ne.jp/js/CSSChanger.js?1a5f554047b2

http://b.hatena.ne.jp/js/Hatena/Bookmark.js?1a5f554047b2

がページのヘッダにあるのでドキュメントの下のほうに持ってこれないですか？と指摘されています。

可能であれば、スクリプトは

</body>と</html>の間まで下げてあげることで描写やコンポーネントのダウンロードを速くすることができます。

9. Reduce DNS lookups

たくさんのドメインが1つのページにあると、都度DNSのLookupが発生してしまうので、ページ内でのドメインの数をできるだけ減らしましょう、という項目です。

b.hatena.ne.jp

s.hatena.ne.jp

www.google-analytics.com

favicon.hatena.ne.jp

www.hatena.ne.jp

i4.ytimg.com

f.hatena.ne.jp

というドメインがLookupされているようです。

外部のドメインはしょうがないとして、*.hatena.ne.jpでまとめられそうなところがないか調査してみるのもよいかもしれません。

10. Minify JS

これは、JavaScriptの改行や無駄なスペースを削除することでファイルサイズを減らそう、という項目です。

個人的なオススメはJSMinというツールです。

これは、改行とスペースといった無駄な部分だけを削除してくれるため、比較的安全にファイルを圧縮することができます。

他にも関数の変数を短くしてくれたりする圧縮ツールもあるのでその辺りも検討してみるといいかもしれません。

13. Configure ETags

ETagsっていうのはサーバ上のファイルとブラウザのキャッシュが一致しているかどうかを検証するためのものなのですが、正しく利用できていないのであれば、ETagsは無駄なだけなので取り除いてやりましょう、という項目です。

http://s.hatena.ne.jp/js/HatenaStar.js

http://s.hatena.ne.jp/images/comment.gif

http://s.hatena.ne.jp/images/add.gif

http://s.hatena.ne.jp/images/star.gif

の4つのファイルに対してETagsヘッダが出ているようなので、必要なければ取り除いてヘッダサイズを減らしましょう。