スムーススクロールのズレに対応できる画像遅延プラグイン「Lazy Loader」が超優秀！【WordPress】

スムーススクロールのズレに対応する画像遅延プラグイン「Lazy Loader」

以前の記事（↓）でアンカーリンクのジャンプ先がズレる原因と解決方法について書いたのですが、画像を遅延読み込みしつつ、スムーススクロールにも対応するにはJavaScriptかjQueryを使ってズレた分を修正する必要があると結論付けました。

詳しくは関連記事も見ていただきたいのですが、とにかく画像を遅延読み込みさせており、なおかつスムーススクロールも使っている場合はアンカーリンクのジャンプ先がズレてしまうことが多々あります。

スムーススクロールでアンカーリンクがズレる様子（GIF）

こんな感じです。
Wordpressの画像遅延読み込みで有名な「a3 Lazy Load」などのプラグインを使っていても、スムーススクロールではこのズレが発生します。

記事を公開してから"いや、スムーススクロールを使いたい人の方が多いだろう…"と思い、色々調べたところスムーススクロールにも対応できる「Lazy Loader」という画像遅延プラグインを発見したのでご紹介します。

プラグインを変更するだけでスムーススクロール時に発生するアンカーリンクのズレに対応できるので、JavascriptやjQueryに詳しくない方にもおすすめです・ｗ・

早速プラグインの紹介といきたいところですが、まず今回の内容を整理します。

スムーススクロールでアンカーリンクがズレる原因

以前の記事を参考にしていただければ、アンカーリンクをクリックした時の動作が、ブラウザのデフォルト動作である「ジャンプ」時のズレは解決できるはずです。

ただ「ジャンプ」で問題がなくても「スムーススクロール」にするとズレるのです。

では、なぜスムーススクロール有効化時だけアンカーリンクがズレるのか？
この原因ですが、どうも遅延読み込み画像のアスペクト比が、実際に画像を読み込むまで確定していないからみたいです。

分かりにくいと思うので、a3 Lazy Loadを使っている状態で画像が読み込まれる瞬間をGIFにしました。

遅延画像が読み込まれた瞬間、画像の高さが変化している（GIF）

ジャンプではズレ自体は発生していませんが、画像が読み込まれる瞬間に画像の高さ分だけ画像下にあるコンテンツがシフトしている様子が伝わるかと思います。

これがスムーススクロールだった場合は、スクロールしながら移動することで一部の遅延画像が画面内に入ったという判定になり、ジャンプ先のコンテンツよりも上にある画像でズレが発生してしまうという事でしょう。

イメージにすると以下のような感じです。

スムーススクロール時の画像読み込みイメージ

スムーススクロールのスクロール中に途中通過した画像を読み込む時にシフトが発生してしまい、ジャンプ先に着地するころにはその高さ分ズレてしまう感じですね。

なお、Wordperssでは画像にwidthやheightが自動で入りますが、高さと横幅を指定していても遅延画像の読み込み時には画像自体の高さが変わってしまうようです。

Lazy Loaderは遅延画像のアスペクト比を保持する

今回紹介する「Lazy Loader」というプラグインには、Wordpressのメディア設定内の数値から画像のアスペクト比を算出、保持してくれる機能があります。

この機能によってスムーススクロール使用時のズレに対応できます。

「a3 Lazy Load」から「Lazy Loader」に変更したところ、遅延画像の読み込み時にもシフトが発生しなくなりました。こちらもGIFにしました。

Lazy Loaderは遅延画像のアスペクト比を保持する（GIF）

こんな感じで遅延読み込み前後で画像の高さが変わりません！凄い！

遅延読み込み対象の画像のアスペクト比（縦16：横9みたいな比率）を保持しておくことで、画像の読み込み前であっても画像分ピッタリの高さが確保されるわけです。

Lazy Loader使用時の遅延画像の読み込みイメージ

こうなればそもそもスクロールでズレることがなくなるので、JavaScriptやjQueryを使ってスクロール時のズレを修正する必要が無くなります。

ノーコードで「スムーススクロールと画像遅延読み込み」を両立できるプラグインはこれだけでは？？

画像遅延プラグイン「Lazy Loader」の使い方

プラグインの素晴らしさが分かったところで使い方を詳しく見ていきましょう！

Lazy Loader – WordPress プラグイン | WordPress.org 日本語

当サイトは現在「Lazy Loader」を使っていますが、特に不満な点はありません。
有名プラグインである「a3 Lazy Load」と同等かそれ以上の機能だと思います。

遅延画像プラグインで最も気になる？PageSpeed Insightsの「オフスクリーン画像の遅延読み込み」という項目にも普通に合格できます。

プラグインのインストール

管理画面左メニュー＞プラグイン＞新規追加

プラグインは執筆時、Wordpressのダッシュボードからインストールできました。

に進み、プラグイン検索欄に「Lazy Loader」と入力。
該当プラグインが出てきたら今すぐインストールを押して有効化しましょう。

なお、プラグインの公式ページは以下です。

Lazy Loaderの設定画面はメディア設定内

「Lazy Loader」を有効化すれば早速設定に移りましょう。

プラグイン＞インストール済みプラグイン＞Lazy LoaderのSettings

プラグインの設定はインストール済みプラグインから、Lazy LoaderのSettingsを押せば移動できます。

Lazy Loaderの設定はメディア設定の下部に追加される

「Lazy Loader」は有効化したらメディア設定の下部にプラグインの設定画面が追加される仕様なので、Settingsの移動先はWordpressのメディア設定となります。

ページ上部のメディア設定部分から画像のアスペクト比を算出しているようですが、メディア設定自体は触りませんのでご注意を。

Lazy Loaderのおすすめ設定

ではLazy Loaderの設定について見ていきましょう。

詳しい説明はごちゃごちゃするので先に当サイトの設定をご紹介します。
よく分からない方は以下の項目にチェックしておけば大体OKだと思います。

Lazy Loaderのオススメ設定がこちら

スムーススクロールのズレに対応させるために一番重要なのが「Display a loading spinner」という項目です。ここにチェックを入れれば遅延対象の画像のアスペクト比が保持されるようになります。

Lazy Loaderの設定についての詳細説明

「Lazy Loader」の設定を全項目詳しく解説します。
とはいえ画像の遅延読み込みプラグインとして“普通”に使用するだけなら、先ほどの３項目あたりにチェックを入れておくだけでOKです。

では設定画面の順番通りに見ていきましょう・ｗ・

CSS classes to exclude

遅延読み込みから除外したい画像のCSSクラスを入力します。
該当のCSSクラスを持つ画像は遅延読み込みされなくなります。

class指定する時に「.」は要りません。IDは未対応？
なお画像クラスそのものにskip-lazyというクラスを付けても除外できるみたいです。

Additional filters

WordPressのフィルターを使って画像を出力する時、該当の画像が遅延読み込みされていない場合にこの項目でフィルターを追加すれば遅延対象にできるようです。

Enable lazy loading for iframes

iframeの読み込みを有効にするかどうかの設定。
Youtubeなどの埋め込み動画はiframeのはずなのでチェックを入れておきましょう。

Include lazysizes native loading plugin

遅延読み込みにブラウザのネイティブ遅延読み込み機能を含めるかどうかの設定。
注意点として「画面（表示領域）から離れている画像なども読み込まれてしまうかもしれない」とありますので好みです。

チェックを入れておいて良いでしょう。
（今までネイティブ遅延が悪い方向に動いた記憶はないです。）

Include lazysizes unveilhooks plugin

プラグインの機能を拡張するunveilhooksをサイトで読み込むかどうかの設定。
チェックを入れると、プラグイン内のファイルから「ls.unveilhooks.min.js」というプログラムファイルが読み込まれるようになります。

この項目のすぐ下にある「インライン背景画像の遅延読み込み」「動画の遅延読み込み」「オーディオの遅延読み込み」を使いたいならunveilhooksというライブラリを読み込む必要があります。

枠内はunveilhooksプラグイン（js）を使う項目で手動マークアップが必要

但し、unveilhooksを使う場合は手動でマークアップを行う必要があるとのこと。
一般的なサイトなら画像＋iflameの遅延読み込みだけで十分なはずです。
unveilhooksを使わないならチェックは不要です。

Enable lazy loading for inline background images

インライン背景画像の遅延読み込みを行うかどうか。先述のunveilhooksが必要。
基本的にチェックは不要です。
注意書きには「この設定により問題が発生する可能性があります」ともあります。

Enable lazy loading for videos

動画の遅延読み込みを行うかどうかの設定。先述のunveilhooksが必要。
これは良く分からないのですが、HTMLで動画を直接埋め込んだ場合に遅延読み込みできるようになるのでしょうか…

Youtubeなどはiframeで、Wordpressのデフォルト機能にも動画遅延はあったはずなので、多分チェックは要りません。
動画の遅延読み込みについてはunveilhooksの手動マークアップは要らないかも。

Enable lazy loading for audios

オーディオを遅延す読み込みするかどうかの設定？先述のunveilhooksが必要。
そもそもオーディオに遅延とかあったんですね…う～ん重たいのかな？
オーディオを使っていないならチェックは要りませんね。

Display a loading spinner

画像のロード中にロードスピナーを表示する設定。
この項目をONにしていると画像のアスペクト比が計算されるようです。

ここがスムーススクロールのズレに対応する項目です。
スムーススクロールのズレを解決するためにはチェック必須！

Color of the spinner

先述の「Display a loading spinner」で画像の読み込み中に表示するスピナーの色を変更することができます。

Enable option to disable plugin per page/post

チェックを入れると、WordPressで投稿を編集する画面に「Disable Lazy Loader」というチェックボタンが出現するようになります。
これで“投稿ごとに”画像を遅延読み込みするかどうかの設定が可能となります。

あるページだけ遅延を無効にしたい場合は使えますのでチェックして下さい。

Process the complete markup

チェックを入れるとページ全体が遅延読み込みの為に処理されるようです。
ページが崩れたり、ページ速度が遅くなることがあるとのこと。
絶対に遅延処理させたいコンテンツがある場合以外はチェックは不要です。

Modify the default config

「Lazy Loader」の処理をある程度カスタマイズすることができるエリアです。

必要なら「a3 Lazy Load」よりも詳細なカスタマイズが可能！

例えば、もっと早いタイミングで画像を読み込ませたい時は、ViewPortをデフォルトよりも広く拡大させるといったことができます。

これで画面＋上下1000pxまでの範囲にある画像が対象になります。
（閾値はプラグインが自動計算するためこの手のカスタムは本来不要。）

設定値やオプションについては以下のサイトを参考にしましょう。

設定については以上です。
unveilhooks.jsを使う項目は手動マークアップが必要なうえ、遅延対象に追加できるコンテンツが一般的なサイトではほぼ無いので、パスする形でOK！
あとはカスタマイズが必要な時に触る感じなので、チェック項目は少ないです。

スムーススクロールがズレないか動作確認

設定を終えたら、早速スムーススクロールがズレないかどうか確認してみましょう！
これもGIFを作りました。（分かりやすいように通信速度を下げています。）

Lazy Loaderでスムーススクロールに対応できた様子（GIF）

バッチリですね！

設定項目の説明が長くなりましたが、とにかくLazy Loaderを有効化した後に設定で「Display a loading spinner」をONにすれば遅延対象の画像のアスペクト比が保持されるようになり、目次などのアンカーリンクをスムーススクロールで移動してもズレが発生しなくなります。

まとめ

以上、スムーススクロールのズレにも対応できるWordpressの画像遅延プラグイン「Lazy Loader」のご紹介でした。

アンカーリンクがスムーススクロール有効化時にズレてしまう…JavascriptやjQueryを自前で用意せずに何とか簡単に対応できないか？…とお考えの方はこのプラグインをお試し下さい！

ちなみに「Lazy Loader」ですが、デバイスに応じてViewPortの幅を自動調整しているらしいです。しかも、スクロールしていないアイドル状態にある時は自動的に遅延した画像を順番に読み込むという処理も行っているようです。

執筆時は有効インストール数が10000＋と少し少ない感じでしたが、ハッキリ言ってそこらで紹介されている画像遅延プラグインよりもよっぽど優秀ですね。

うーん！Lazy Loaderさいこーう！
ではではこのへんで・ｗ・