「Table of Contents Plus」は記事内に目次を自動で生成してくれるWordPressプラグインです。
目次から記事内の見出しへジャンプできるため、とても便利なプラグインなのですが、ここ最近ジャンプ先がずれるという謎の現象が発生していました。
[say name=”ヨノイ” img=”https://yonoi.com/wp-content/uploads/2020/09/yonoi_smiling.png”]微妙な位置に飛んでしまいます…！[/say]
しばらく悩まされていたのですが、画像読み込み系のプラグイン「BJ Lazy Load」をオフにすることで現象を解決できたので記事にまとめてみました。
Table of Contents Plus（TOC+）とは
Table of Contents Plus（TOC+）は目次を生成してくれるWordPressプラグインです。
記事内の見出しタグを自動的に読み取り、記事内に目次を作成してくれます。
見出しタグに応じて目次を階層化したり、特定文字列を含んだ見出しを目次化しないなど、柔軟に設定できます。
[say name=”ヨノイ” img=”https://yonoi.com/wp-content/uploads/2020/09/yonoi.png”]見出しの数が少ない場合は目次を作らないなど、かゆいところに手の届いた優良プラグインです！[/say]
特に便利なのが、目次をクリックすることでその見出しまで移動できるジャンプ機能です。
読みたい位置まで一気にページを移動できるため、読者にとってかなり利便性の高い機能です。
Table of Contents Plus（TOC+）をクリックしてもジャンプ先がずれる問題について
実は先日から、原因不明の目次のジャンプ先がずれる問題が発生するようになっていました。
通常、TOC+の目次は下の画像のようなかたちで自動生成されます。
この目次をクリックすると、本来であれば記事中の該当の見出し位置にジャンプ先が合うはずなのですが、実際にクリックすると何故か、
変な位置にずれます。
本来であればクリックした見出しが画面の上部にぴったり来るはずなのですが、本文のど真ん中という変な場所に位置合わせされてしまいます。
せっかく読みやすい記事を目指して目次を設定したのに、これでは全くの逆効果です。
一度、本来ジャンプしているはずの移動先までスクロールした後に、再度目次をクリックすると、正しい位置までジャンプできるのですが…。
Table of Contents Plus（TOC+）はLazy Load系プラグインと相性が悪い
調べていくと、どうやらTable of Contents Plus（TOC+）はLazy Load系のプラグインと相性が悪いことが分かってきました。
ちなみにLazy Loadというのは画像の読み込みに関する負荷を軽減するために導入されるプラグインなのですが、こちらが機能的な干渉を起こしてしまうようなのですね。
現象発生時、このブログでは実際にLazy Load系プラグインの一つである「BJ Lazy Load」を使用していました。
Table of Contents Plus（TOC+）の仕組みについて
まず、TOC+がどのようにジャンプ先を設定しているのかという、プラグインの仕組みについて理解する必要があります。
TOC+は記事を読み込む際に、まず目次から見出しまでの距離を計算し、結果算出された距離をリンクにセットします。
目次から見出しまでジャンプする際は、この距離を利用して移動するのですが、この仕組みはLazy Load系のプラグインと相性がよくありません。
なぜなら、Lazy Load系のプラグインによって、記事内の見出しまでの距離が変わってしまう可能性があるからです。
Lazy Load系のプラグインとは
Lazy Loadとは、記事内の画像の読み込みを遅延させるプラグインです。
画面外にある画像の読み込みを保留し、表示されている画面内の画像と画面外の設置位置が近い画像の読み込みを優先することで、ページの読み込みを高速化します。
記事内の画像を一気に読み込まないで読者の目に触れやすい画像から優先的に読み込ませるためにトラフィックの負担も分散化され、記事の表示が高速化できます。
記事の表示の高速化はSEO面でも有利に働くことから、Lazy Load系のプラグインは初心者向けおすすめプラグインとしても紹介されがちです。
最近ではGoogleも使用を推奨しており、Chromeに同様の機能を実装し始めたりと、画像が増加傾向にある昨今では、これ系の機能は既定路線といった感もあります。
画像読み込みの遅延によりジャンプ先がずれる
このLazy Load系プラグインによる画像読み込みの遅延機能が、どうやらTable of Contents Plus（TOC+）のジャンプ先のずれをもたらしているようです。
要は、記事の読み込み時に目次からのジャンプ先の位置は決定されますが、画面外の画像の多くはまだ読み込まれていないことから画像の高さが計算できません。
その結果、読み込みを遅延させている画像の高さ分、ジャンプ先がずれるようです。
遅延で読み込まれていない画像の高さまで計算してくれれば、ずれることもないのでしょうが、この記事を書いている時点では、BJ Lazy Loadではそのような仕様に対応してないようです。
Lazy Loadを停止することでTOC+のずれは解決しました
ジャンプ先がずれる問題は、次のような方法で解決しました。
BJ Lazy Loadを停止しました。
BJ Lazy Loadを停止しました。
[say name=”ヨノイ” img=”https://yonoi.com/wp-content/uploads/2020/09/yonoi_smiling.png”]めちゃくちゃシンプルな解決法です。[/say]
Lazy Load系プラグインは読み込みを高速化するので、ユーザー体験を向上させてくれますが、TOC+の迷子ジャンプで利便性が相殺されているような状態です。
ユーザーが読みたいものがまともに読めない状況はテキストを扱うサイトとして根本的に問題があるため（大袈裟）、泣く泣く導入を諦めたかたちです。
TinyPNGなどの画像圧縮サイトで画像を軽量化しましょう
その代わりに、画像の重さがユーザー体験を妨げないよう、画像が少しでも軽くなるよう画像圧縮を始めました。
TinyPNGは画像を圧縮してデータサイズを小さくしてくれるサイトです。
» TinyPNG – Compress PNG images while preserving transparency
画像はデータサイズが小さい方がページの読み込みが速くなるため、ユーザー体験の向上に繫がります。
さらに、ブログで使用する画像のフォーマットもなるべくPNGではなくJPEGを使うようにし、もっと画像が軽くなるようにしました。
また、これまでPNGで上げていたものは画像の内容を判断しながら順次JPEGに変換し、TinyPNGにかけてからアップしなおしている状況です。
画像サイズを落とすのは基本中の基本ですが、割と雑に運用していたので、あるべきかたちへと修正しているような具合です。
この記事では犯人扱いしてしまっているLazy Load系のプラグインですが、中にはLazy Loaderのように、読み込んでない画像の高さをtoc+が取得できるようにしてくれるものもあるようです。
ジャンプしても位置がずれないとのユーザー報告もあるようですので、よりユーザー体験を追求したい方は試してみるとよいのではないかと思います。
また別件として、Lazy Load系プラグインはテーマとの相性もあるようです。
他のプラグインとの干渉も含め、ユーザー目線で確認しながら使用していくのがよいのではないかと思います。
