Twitter とか Facebook のボタンと似たような感じで今風なのも(･∀･)ｲｲ!!

つーことで、このブログにも新型はてブボタン置きたいなーと WordPress のテンプレいじくってたりしてたんですが、ブラクラかと思うぐらいに新型はてブボタンが遅かったので、もうちょいキビキビ動くように最適化してみました。

速くする

遅い原因も調べてますがとりあえずその辺は後述ということで、先に新型はてブボタンの動作を速くする方法から書いていきます。

まずはてブのボタン配信ページから貼り付けコードを取得します。こんな感じの HTML スニペットがもらえると思います。

で、このスニペットをそのまま貼っちゃうと何回かに一回のタイミングでページ表示が超遅くなります。

遅くならないようにするには、a タグ部分をボタンを置きたい箇所に、script タグ部分を HTML ファイルの末尾に分けて貼ります。

a タグ部分はこんな感じ。1ページに何個もはてブボタンを置きたい場合は、置きたい箇所それぞれに a タグのみを記述します。

script タグは /body の手前あたりに1回だけ記述します。

もしくは jQuery を使っているサイトの場合、script タグを body 末尾に置く代わりに、以下の script タグを head タグに置いてもおkです。こっちの方がコードがスッキリすると思います。

これで新型はてブボタンを置いたページの表示がたまに超遅くなる現象が回避できると思います。

何で遅いの？

と、先に対処方法から説明しましたが、ここからは何で遅いかについて。

とりあえずどこで時間がかかってるのか把握する必要があるので、Firebug とニラメッコしながら新型はてブボタンを何度かリロードしてみたところ、新型ボタンで使ってる JavaScript の配信サーバ b.st-hatena.com の応答がたまに遅いと分かりました。

そのためはてブのボタン配信ページから配布している HTML スニペットの http://b.st-hatena.com/js/bookmark_button.js の読み込みでブロッキングが発生し、数秒間ページ表示が止まったようになります。

このスニペットでは script タグに async 属性を指定してますが、async 属性は実行が非同期になるだけで、JavaScript ファイルの読み込みに対してはブロッキングが発生します。ブロッキングが発生するとスクリプトの読み込みが完了するまでブラウザのレンダリングが中断されます。なので bookmark_button.js の読み込みが完了するまでブラウザが固まったような状態になります。

新型はてブボタンのスニペットでは b.st-hatena.com から button-only.gif 画像ファイルも読み込んでいますが、img タグはブロッキングしませんので問題となるのは script タグだけです。

対処方法を考える

原因が分かりましたのでブラウザから http://b.st-hatena.com/js/bookmark_button.js を開いてあーだこーだソースを読んでいくと、setInterval で class=”hatena-bookmark-button” を持つ a タグに iframe を足す処理をポーリングしているのが分かりました。

ポーリングごとに条件を満たす全ての a タグに対してブックマーク数を表示する処理を行っていますので、スニペットの a タグと script タグを分けても問題無さそうです。ということで上の結論となりました。

まあ script タグ部分で発生するブロッキングをページがすべて表示されてから一度だけ発生するように変えただけなのではてブボタンの表示自体が速くなる訳では無いのですが、ページがすべて表示されるまでのイライラがだいぶ解消されると思います。新型置きたい方はぜひお試しを。