あまりにも自然すぎて気が付かなかった! Linkwithin による関連記事の表示は、そこが見えるようになってから行われる

2014年6月9日月曜日

イントロダクション

ブログの記事の関連記事を自動的に表示してくれるサービスとして「Linkwithin」というものがあります。

Linkwithin

この Linkwithin を使用すると、関連記事の生成用コードをブログのテンプレートに張り付けておくだけで、自動的にそのページの記事に関連しているだろうと Linkwithin が判断した記事へのリンクを生成してくれます。

今回、ページの上部に Linkwithin へジャンプできるリンクを設置することにしました。
Linkwithin へのジャンプに使用するアンカーは Linkwithin を囲っている div 要素である linkwithin_inner にしました。

そして、実際にページの上部に Linkwithin へジャンプできるリンクを設置し、そのリンクをクリックしてみると、Linkwithin へジャンプできませんでした。

なぜだろうと思い、ページ表示直後のページの HTML(動的な HTML の変更が確認できるもの)を確認してみると、Linkwithin があるべき場所には、Linkwithin を囲っている div 要素である linkwithin_inner を含めて、関連記事のデータがありませんでした。

その後、Linkwithin が表示される場所へ手動でスクロールしてみると、Linkwithin を囲っている div 要素である linkwithin_inner を含めた関連記事の HTML が生成されました。

そして、ネットワークの通信状況でも、Linkwithin が表示される場所へ手動でスクロールしたときに、サムネイル画像が読み込まれていました。

つまり、Linkwithin は、Linkwithin が見えるようになってから、関連記事の HTML の挿入と、画像の読み込みを行っていたのです！

この対策はページの表示にかかる時間を最小にしたいブログの制作者にとっては非常にありがたいものです！

ありがとう！ Linkwithin！

なお、Linkwithin へジャンプするためのアンカーは、唯一 Linkwithin が表示される箇所に生成されていた div 要素の lws_0 へ設定することにしました。

→ 関連記事：Blogger:投稿の上部へ関連記事へのジャンプを追加して、閲覧者の使いやすさの向上！