お問い合わせはコチラから

2022年 アンカーリンクのとび先がずれる意外な原因とは?

サイト運営

ペラサイトではメニューにアンカーリンクを配置して、ページ内スクロールでナビゲーションします。また、ブログなどでページ先頭に目次を配置してページ内ジャンプさせることも良く行われています。

アンカージャンプは便利なのですが、ページが長くなるとLazyloadの影響でアンカージャンプ先がズレる現象が起きたりしました。いわゆるCLSというやつですね。

そのような問題も、WordPressがNative Lazyloadに対応した際に、imgタグにwidthとheightを自動的に追加するようになってから無くなったと思ったのですが、2021年が終わりに近づく中、アンカージャンプのとび先がずれてしまう現象に出くわし、解析するのにとても苦労したので、まとめておきたいと思います。

アンカージャンプでのトラブルは別記事にもありますが、今回はそれとは別の内容になります。

Lazyload前の1pxのplaceholderがズレを引き起こす

アンカージャンプのとび先がズレる原因は飛び先を計算した時に間違うからです。

その計算はスムーズスクロールのJavascriptで計算しています。

なぜ飛び先の計算を間違えるかというと、アンカージャンプしている間にLazyloadで画像が読み込まれるので、計算した時とページの長さが変わるからです。

今回も原因はソレなのですが、想像の斜め上の事象でした。

今回使用したプラグインはa3 lazyloadです。最近はあまり使っていませんでしたがテーマとの相性問題が起きにくいので昔のサイトではよく使っていました。

a3 Lazy Load
Use a3 Lazy Load for images, videos, iframes that are not lazy loaded by WordPress core. Instantly improve your sites load time and dramatically impro …

このプラグインは、Lazyload前の画像として、1pxのplaceholderをsrcにセットしてくれます。

ところが、そのplaceholderの画像は、imgタグのオリジナル画像のwidthとheightを無視して、オリジナル画像と同じ横幅の正方形になってしまうのです。

レスポンシブ対応でimgタグに以下の様なCSSが当たっているためです。height:autoだとアスペクト比は画像のアスペクト比に従って決定されますので、placeholderの画像は正方形として扱われます。

img{
width:100%;
height:auto;
}

つまり、オリジナル画像とアスペクト比が同じplaceholder画像を使わない限り、オリジナル画像と高さが合わなくなり、飛び先の計算を間違えることになります。

  • オリジナルが横長の画像であれば、placeholderの高さははオリジナルよりも高くなり、ページ全体の長さが伸びますので、飛び先が遠くにズレます。
  • オリジナルが縦長の画像であれば、 placeholderの高さははオリジナルよりも低くなりますので、ページ全体の長さが短くなり、飛び先が近くにズレます。

じゃぁ、placeholderをオリジナル画像と同じアスペクト比にする良い方法がありそうなものですが、画像ごとにアスペクト比が異なるので実は簡単ではなく、中々良い方法が見つかりませんでした。

プラグインのサポートでも問題になっていますが、解決しないまま放置されています。

A3 Lazy Load and Cumulative Layout Shift
Support » Plugin: a3 Lazy Load » A3 Lazy Load and Cumulative Layout Shift A3 Lazy Load and Cumulative Layout Shift billbordallo (@billbordallo) 1 year, 9 months...

アスペクト比がオリジナルと同じsvg画像にplaceholderを置き換えると解決する

アスペクト比がオリジナルと同じplaceholderの画像を用意すればいいのですが、アスペクト比は画像ごとに違いますので、結構大変だと申しました。

幸い、最近のwordpressのimgタグにはwidthとheightが定義されているので、jQueryでplaceholderを置き換えることができます。

imgタグのsrcにplaceholder画像があったら、アスペクト比が正しい画像に置き換える処理をしているだけです。

スムーズスクロールの計算前に処理すればいいので、フッターで読み込んでいます。

<?php
add_action('wp_footer',function(){
?>
<script>
	(function($){
$('[src="//yourdomain.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"]').each(function(i,j){
    var h = $(j).attr( 'height' );
    var w = $(j).attr( 'width' );
    var at = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${w} ${h}'%3E%3C/svg%3E`;
    $(j).attr('src', at);
});
})(jQuery);
</script>
<?php
});

参考https://stackoverflow.com/questions/23416880/lazy-loading-with-responsive-images-unknown-height

Navtive Lazyloadを使っている場合は問題が起きない

今回のPlaceholder画像のアスペクト比がオリジナルと異なることに起因するCLS問題は、実はplaceholderをimgタグのsrcに設定しているために起こります。

固定画像のplaceholderを設定してくれるLazyload全般で発生する問題です。

一方で、Native Lazyloadでは、srcにオリジナル画像が設定されるので問題が発生しません。その点、Native Lazyloadはよく考えられた仕組みだと思いました。

Native Lazyloadとフォールバックする仕組みを組み合わせたLazyloadプラグインを使うのが一番スマートなのかもしれません。

LazyLoad Plugin – Lazy Load Images, Videos, and Iframes
The best free lazy load plugin for WordPress. Lazy load images, videos, and iframes to improve performance and Core Web Vitals scores.

まとめ

アンカージャンプはスムーズスクロールが絡むので、javascript起因の問題が結構おきます。

今回は、placeholder画像のアスペクト比がオリジナルと異なることで発生する問題でした。

a3 lazyloadを使っている人は、参考になるかもしれません。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました