はてなブックマークボタンの表示の高速化&Bloggerの設置サンプル

使いやすくなりました! はてなブックマークボタンで、貼り付け用のコードが作成できます。Bloggerの場合は下記のように書き換えて、テンプレートに書き込めば導入が可能です。

今までは、下記のコードを上下ワンセットで記事下に入れていました。このブログを見てもらうとわかるようにトップページで記事が複数表示されて、はてなブックマークボタンも複数表示されます。原因はよくわかりませんが、はてなブックマークの障害があったときにどうも表示が遅くなるなというのは感じてました。

<a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr:data-hatena-bookmark-title='data:post.title' expr:href='"http://b.hatena.ne.jp/entry/"+data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
そこでこれを高速化?する方法はないかと調べたところ、新型はてなブックマークボタンを速くする | さくらたんどっとびーずが見つかりました。

この記事によると、1ページに複数はてなブックマークボタンを設置してもJavaScript部分は1つでよいと書いていたので、/body(Bodyタグの閉じるほう)の前に1箇所設置してみました。
体感速度が上がったような気がします。もちろん、件数表示していても1箇所設置するだけでちゃんと動作しました。

JavaScriptを、/bodyの前に設置するのはWEBページの表示の高速化手法の1つのようです。今このブログの表示の高速化をやっていて、ほかのJavaScriptをそこに設置するだけでかなり表示が高速化されました。

スポンサーリンク

コメントを残す

メールアドレスは公開されません。
また、コメント欄には、必ず日本語を含めてください(スパム対策)。