VTuberになったプログラマーの魂の残滓

こいつ……もう意識が……!!

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

JavaScriptの部分は

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

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

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

IBM PageDetailer

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

解説するよりも見てもらうほうが早いと思うのでさっそく使ってみるよ。
ちなみに上記ソフトのダウンロードにはIBMアカウント(無料)が必要なので、使いたい人は登録しよう!

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

pagedetailer

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

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

pagedetailer2

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

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

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

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

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

と、こんな感じで

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

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

pagedetailer5

ここでは、ファイルごとにかかった時間やファイルサイズによってソートをすることができます。
また、右クリックからカラムを追加することもできます。

pagedetailer6

やはり、最初のHTMLのレスポンスをかえすまでが非常にネックになっているといったことを読み取れます。
あとはentries.simple.jsonというファイルを大量に取得しているのも気になります。
これらのファイルも、グラフを見ると、サーバからのレスポンスまでに時間がかかっており、ファイルの転送時間が特別ネックになっているといったことはなさそうです(回線にもよるでしょうが)

結論

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

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

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

YSlow

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

YSlowというのはFirebugの拡張のためのFirefox拡張機能です。
Yahoo Inc.が開発しています。

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

yslow

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

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

結果は次のとおりです

yslow2

ランク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、JavaScriptCSSGzipされていないことがわかりました。
基本的にはファイルをダウンロードする時間と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

がページのヘッダにあるのでドキュメントの下のほうに持ってこれないですか?と指摘されています。
可能であれば、スクリプトは
との間まで下げてあげることで描写やコンポーネントのダウンロードを速くすることができます。

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ヘッダが出ているようなので、必要なければ取り除いてヘッダサイズを減らしましょう。

という感じで

長くなってしまいましたが、こんな時間なので内容にはいろいろと不備があるかもしれませんし、すべてはケースバイケースのためこれらの手法が必ずしも正しいとも限りませんが、はてブはいつも利用させてもらっていて、閲覧することも多いのでちょっとでも参考になって改善につながればと個人的に思っています。
プログラミングもそうですが、なぜそうなるのか、を調べるのが一番大切ですよね。

はてなスタッフのみなさん、がんばってください!