はてなのプロフィール画像によって表示は遅くなるのかという検証と、プロフィール画像を非表示にするいくつかの方法

はてなのプロフィール画像を非表示にしたい

昨日、はてなの機能追加に伴って Greasemonkey スクリプトを修正したのですが、その時はその追加された機能自体については良くもなく悪くもない印象しか抱きませんでした。 ああ、何だか賑やかになったなあ、程度の。

しかし 1 日経って他の人の反応を見てみると、少なからず鬱陶しく思ったり、非表示にしたいと思ったりする人がいることが分かりました。 ( 内部処理的にはどうか知らないけど ) 見た目的に大きな機能追加であり、この機能が撤廃されることは無いでしょう。 かと言って、アイコンを表示したバージョンと表示しないバージョンの両方を準備するのはコスト的にも難しいと思います。 そうなると、同一のページ内で何らかの処理を行う形になりますが、そういった形であればユーザ側で対処できる場合が多々あります。 今回はそういった例を考えてみましょう。

なお、この記事中では主にはてなブックマークのエントリページを想定して書いていますので、それ以外のページや、あるいは今後のプロフィール画像の仕様変更によっては使えない可能性も充分にありえます。 それと、今回はブラウザは Firefox 1.5 を使っているという前提で話を進めます。 それ以外のブラウザまで含めると話が細分化しすぎますので。

また、非表示にしたいと一口に言っても、表示結果が煩雑になって鬱陶しいので非表示にしたいのか、表示が遅くなるから非表示にしたいのかで対処方法が変わってきますので、それぞれについて考えます。

プロフィール画像によって本当に表示が遅くなるのか ? ( 理論編 )

• BLOG STATION：はてなブックマークが重くなってしまいそうな件について
  • BLOG STATION：続・はてなブックマークが重くなってしまいそうな件について
• 子供、いらない：はてブのアイコンは問題ない
• import otsune from Hatena - コスメティック（見た目）の改造は、内部的にたいしたことをしてなくても大げさに見えるんだなぁ

既にこの辺りで表示速度に関することは触れられていますが、理論だけで言ってしまうと以前よりは確実に遅くなります。 アイコン画像のサイズは 1KB 前後のものが多く ( デフォルトアイコンは 166 バイト ) 、仮にパブリックなはてなブックマーカ 100 人がブックマークしていても、エントリページの総サイズとしてはせいぜい 100KB 程度プラスになるだけ、 ADSL 1.5M 以上の通信環境であればさほど気にならない違いかもしれません。

しかし、パブリックなはてなブックマーカ 100 人がブックマークしているということは、 100 人分のプロフィール画像を表示することになるということで、 100KB の画像 1 枚を表示するのとは少々話が違ってきます。 100 人分のプロフィール画像を表示するということは、単純に 100 回のサーバへのリクエストとサーバからのレスポンスが存在するということです。 LiveHTTPHeaders という Firefox の拡張機能がありますが、これで ( 今この記事を書いている時点でちょうど 100users に近い数である ) はてなブックマーク - はてなダイアリー日記 - プロフィール画像設定機能の追加についてを開いた時の HTTP ヘッダを見てみると、テキストファイルに換算して 105KB というサイズのものが得られました。 「ツール」→「オプション」→「コンテンツ」→「「画像を読み込む」のチェックを外す」という手順でプロフィール画像を読み込まないようにしてもう一度 HTTP ヘッダを取得すると、 10KB というサイズになりました。

----------------------------------------------------------
http://www.hatena.ne.jp/users/pa/partygirl/profile_s.gif

GET /users/pa/partygirl/profile_s.gif HTTP/1.1
Host: www.hatena.ne.jp
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:1.8) Gecko/20051111 Firefox/1.5
Accept: image/png,*/*;q=0.5
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: Shift_JIS,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://b.hatena.ne.jp/entry/http://d.hatena.ne.jp/hatenadiary/20060126/1138263309
Cookie: rk=******************************; PORTAL_TAB=quest; name=*******

HTTP/1.x 200 OK
Date: Sat, 28 Jan 2006 05:23:07 GMT
Server: Apache/2.0.40 (Red Hat Linux)
Last-Modified: Fri, 27 Jan 2006 13:58:56 GMT
Etag: "1cc494-3afb-7f800800"
Accept-Ranges: bytes
Content-Length: 15099
Keep-Alive: timeout=7
Connection: Keep-Alive
Content-Type: image/gif

プロフィール画像を読み込む時のリクエストおよびレスポンスの流れは、この例のようなものになっています。 これを 100 回行うために、プロフィール画像がどんなに小さいサイズであれ、全く無かった頃に比べると遅くなるのは不思議なことではありません。

プロフィール画像によって本当に表示が遅くなるのか ? ( 実際のところ )

しかし、実際のところは、多少遅くなっているかもしれませんが、激しく遅くなったと感じるまでには至っていません。 次に挙げるような理由が考えられます。

ブラウザによるキャッシュ機能が働く

はてなのプロフィール画像に限った話ではありませんが、多くのグラフィカルブラウザにはキャッシュ機能があり、以前に読み込んだページの内容や画像をローカルディスク上に保持し、同様のものを表示する際にはそこから表示することで速度を向上しています。

よって、初めて読み込むブックマークページであっても、過去に読み込んだユーザの分のプロフィール画像はキャッシュから表示することになります。 ただし、キャッシュをクリアしていたり、はてなブックマーク自体を初めて見るような場合はこの限りではありません。

サーバによるリバースプロキシ ( 推測 )

これは推測の域を出ませんが、はてなのサーバ側でもプロフィール画像をキャッシュすることで、リクエストの集中が起こらないようになっていると思われます。 また、プロフィール画像自体のパスも http://www.hatena.ne.jp/users/ユーザ ID の頭 2 桁/ユーザ ID/profile_s.gif というように、ユーザ ID で大まかにディレクトリが分けられ、かつそのディレクトリ内でユーザ ID ごとにディレクトリを置き、その中に profile_s.gif を配置していることからも、特定のサーバに負荷が集中しないようになっているのでしょう。

そもそも元が軽快だったので遅く感じる

キャッシュやリバースプロキシの話は、何度もはてなブックマークのページを読み込んでいると表示が遅くなる原因が軽減されるという話であり、それらが有効になっていない、すなわち初見の状態では表示が遅くなるということです。 ( これは前項で述べた通り )

しかしよくよく考えてみると、リンクバナーやアフィリエイトバナーが羅列されているページでは、サイズとしてもリクエスト・レスポンスの頻度としてもはてなブックマークより大きい・多いものが数多く存在しています。

最初にキャッシュするときにブラウザが重くなる人も居るかもしれないが。 それは見たことが無いサイトのバナーを表示するのと同じぐらいの重さだろう。 （だけどブックマークはいままでのスピードを知っている。 だから、今回の改造を体感で比較することができた。 二回目からのアクセスではキャッシュされているからスピードは変わらないだろう）

これは import otsune from Hatena - コスメティック（見た目）の改造は、内部的にたいしたことをしてなくても大げさに見えるんだなぁからの引用ですが、 だけどブックマークはいままでのスピードを知っている という下りに非常に納得がいきました。 また、子供、いらない：はてブのアイコンは問題ないでは実際に速度計測を行った結果が記されています。 これを見る限り、余程多くのブックマーカがブックマークしているページでなければ実サイズとしては気にするレベルではないのかなと思います。

簡単に言うと「今までと全く同じってわけではないけど、様々な機能や対策のおかげで気にするほどは遅くならないはず」という感じでしょうか。 それを踏まえて、次項からはプロフィール画像を非表示にする方法を考えてみましょう。

Firefox の拡張機能 "Adblock Plus" で非表示にする

子供、いらない：はてブのアイコンは問題ないで紹介されている手法です。 単純に「ツール」→「オプション」→「コンテンツ」→「「画像を読み込む」のチェックを外す」という手順で画像を読み込まないようにしても良いのですが、これだとそれ以外のページでも画像を読み込まなくなってしまいます。 そこで、はてなのプロフィール画像は http://www.hatena.ne.jp/users/ユーザ ID の頭 2 桁/ユーザ ID/profile_s.gif というパスに置かれており、画像ファイル名は profile_s.gif に固定されているため、 Adblock という Firefox の拡張機能で profile_s.gif をブロックしてしまおうという考え方です。

なお、使い方は詳述しません。 インストール後に、「ツール」→「 Adblock 」→「 Preferences 」で設定画面を開き、 New Filter の欄に profile_s.gif と入力して Add ボタンを押せば完了です。 この方式では profile_s.gif という名前のファイル自体のリクエストを行わないため、表示速度・見た目の両方に有効な方法です。

私は使ったことがありませんが、 Proxomitron-J といったツールでも同様のことが実現できるかもしれません。

ユーザ CSS で非表示にする

はてなブックマークのエントリページでは、プロフィール画像を表示する img 要素に対して hatena-id-icon という class が付与されています。 ということは、ユーザ CSS で非表示にすることも比較的容易にできるということです。

img.hatena-id-icon {
  display:  none;
  }

このように userContent.css に記述することで、プロフィール画像を非表示にできます。 ただし、プロフィール画像自体へのリクエストは変わらず行うため、ブックマークしている人数が多い場合や、通信速度が低速の場合に表示が遅くなるかもしれません。 なお、 userContent.css に記述を加える方法は Destroy target="_blank" - 導入前にちょっとした準備で解説しています。

Greasemonkey スクリプトで非表示にする

ユーザ CSS と同様にプロフィール画像自体へのリクエストは行ってしまいますが、 Greasemonkey スクリプトで非表示にするという方法もあります。 disableHatenaKey.user.js が同じような結果をもたらすスクリプトだったので、 GPL に基づいて改変してみました。

• RemoveHatenaIcon.user.js

ただし、 Greasemonkey による実行結果が、 img 要素を <span class="hatena-id-icon"></span> という、内容が空の span 要素に置き換えたものになるため、違う方法で実現した方が良いと思います。

まとめ

私が思いつく限りの方法を羅列してみましたが、お勧めは Adblock Plus で非表示にする方法ですね。 非表示にするだけでなく、画像へのリクエストも行わなくなるので、表示速度もこれまでと変わらないはずです。