ブログBlog

WordPress5.5以降で、ページ内のジャンプが正常に動作しない!?

所沢でホームページ制作や欧州輸入品販売を行っているRishunTradingです。
JavaScriptで、ページ内のジャンプを実装(該当位置までスムースにスクロールする)していたのですが、ある時から変な位置にジャンプするようになりました。原因が不明だったのですが、調査したところWordpress5.5以降で実装された「img」タグに自動付与されるようになった「loading=”lazy”」が原因でした。気づいた時には、「ハー」と思わずため息をついてしまいました。
今回は、「img」タグに自動付与される「loading=”lazy”」のお話と、今回の事業が発生した原因、そして、Wordpressで「loading=”lazy”」を自動出力させない方法について記載しようかと思います。

「img」タグの属性「loading=”lazy”」とは

WordPress5.5以降、「img」タグに属性「loading=”lazy”」が自動付与されるようになりました。もちろん、自動付与された背景には、意味があります。

「loading=”lazy”」は、画面の表示を早くする仕組みの一つです。通常、ブラウザは、該当ページのHTMLに記載されている【全ての「img」タグの画像ファイル】をロードしにいきます。かなり長いページで、下の方までスクロールしないと、ユーザーが見ないような画像も含めて、とにかく全てロードしにいきます。

これは、当然の事ですが、ネットワーク的にも、サイトレスポンス的にも、良い事ではありません。ユーザーにとっては、ブラウザの画面領域(ビューポート)で視認している箇所の画像さえ表示されていれば良いので、このビューポートの外にある画像は、ロードせず、ビューポートに近づいた時に当該画像のロードを開始すれば、ネットワークに過度な負担をかけず、サイトレスポンスを改善する事ができます。

これを実現する一つの方法が、「img」タグの「loading=”lazy”」属性になります。

この遅延読み込みは、JavaScriptでも実装する事ができますが、「img」タグの「loading=”lazy”」属性さえ付与しておけば、実装でき、各メジャーなブラウザ(Chrome/FireFox/Edge/Safari)では、既に標準サポートされています。
※なお、loading=”lazy”は、iframeタグにも使用できます。

今回発生した事象とその原因

今回発生した事象の原因は、ページ内ジャンプを、該当位置まで単純に移動させるようなジャンプではなく、「jQuery」で「該当位置までスムースにスクロールさせる動き」を付けていました。

該当のJavaScriptのソース

該当のソースを見るとわかるのですが、
2行目で「ヘッダー」の高さを取得し、
10行目で該当箇所のオブジェクトを取得し、
12行目で「該当箇所までの高さ」から「ヘッダーの高さ」を引いて、「ジャンプする位置」を割り出しています。
(ヘッダーの高さを引いているのは、スクロールしても、常にヘッダーを表示しているため。)
そして、13行目でアニメーションで該当位置まで自動スクロールさせています。

【おまけ】
6行目のif文は、「Advanced Custome Fields」のプラグインを使うと、競合してしまうため、href=”#”の時には終了させるようにしています。(「Advanced Custome Fields」の設定画面で<a href=”#”>が使われるため。)

そのため、12行目の「該当箇所までの高さ」を割り出す際に、該当箇所までの間に、画像ファイルがあった場合には、通常は画像ファイルの高さも考慮されますが(全てロードされてから表示されるため)、<img>タグで「loading=”lazy”」が指定されていた場合には、ビューポートの外にある画像はロードされませんので、画像の高さが0になってしまいます。
そのため、該当箇所の高さを算出する際には、ビューポートの外にある画像の高さは0で考慮されず、しかし、実際に、アニメーションで該当位置まで自動スクロールしている際には、ビューポートに来ると画像が表示されますので、ジャンプ位置にずれが生じてしまっていました。

対処方法

そんなにたくさんの画像ファイルを読み込んでいない事や、Webp対応ブラウザに対しては、高圧縮画像形式Webpにも対応させていましたので、今回は、Wordpressで「loading=”lazy”」を自動出力させない設定をfunctions.phpへ埋め込みました。

これで対処する事ができました。

まとめ

本来であれば、サイトレスポンスを向上させるために、「img」タグの「loading=”lazy”」は使った方が良いとは思うのですが、今回はたくさん画像を使っていない事や、Webp対応ブラウザに対しては、Webp対応していましたので、このような対象方法とさせて頂きました。

ただ、画像がロードされなくても高さが取得できるように以下のように改修すれば、「loading=”lazy”」を「img」タグにいれたままでも、対応は可能です。

HTML

CSS

以上、皆さまのお役に立てれば幸いです。

WEB DESIGN

RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。

「全てお任せ!ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。

運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。

しかもなんと、「全てお任せ!ホームページ制作」は、¥99,800!で提供しております。

本業が忙しい中小企業様に大変ご好評を頂いている商品です。

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

  • レスポンシブルデザイン

    レスポンシブルデザイン
    (*1)

  • 検索エンジン最適化(SEO対策)

    検索エンジン最適化
    (SEO対策)

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU