2019年6月6日

別のhtmlページから遷移してきたアンカーリンクのポイントがズレる (その2)

2019年6月6日 木曜日

まもなくサポートも無くなるとはいえ、IE11での閲覧に対応しないといけないうえに、別のhtmlページのアンカーリンクするという案件がございまして、
構築手法にも少し無理はあったのでしょうが、他のブラウザは何ら問題はないのに、IE11での閲覧ではレンダリングがやたら遅くて、だんだんCSSが効いてきてページができあがるような挙動で結果、アンカーポイントがずれるという事態になりました。

 

以前にご紹介させていただいたコードを書いても、状況が好転せず、いろいろ探しましたら、InstantClick というjavascript を使うことで問題が解消しました。

nstantClick.io はリンクされたテキストや画像にマウスを載せると、pjaxという仕組みで、リンク先のサイト内ページを先行してロードを開始し、クリックして遷移したときはロードされたページに移動するというもので、当然アンカーポイントへの正確に移動します。

 

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>
</body>

 

もちろんIE11のケースに限りませんし、前回ご紹介したようなスライダーの整形の時間差でアンカーポイントがズレるようなケースもこれで対応できますね。

 

とくにアンカーリンクの場合でなくてももちろん使用可能で、ページ遷移のスピードが早くなっているのを体感できると思います。
そのことから高速化に有効として紹介されますが、あくまで遷移のスピードUpなので、GoogleのPageSpeed Insightのスコアが上がることにはなりません。
ユーザビリティ的には有効でしょうね。

 

ただ、マウスが触れば先行でページのロードが始まるので、サーバーにはそれなりに負荷はかかると思いますし、Google Analyticsの計測が狂うという話もあるようです。
先読みさせないリンクの書き方や、Google Analyticsの対策もあるようなので、対応が必要な方は調べてみてください。