画像の遅延読込のloading="lazy"について。
設定や使い方と注意点（decoding="async"も合わせて）

昔では存在しなかったタグや属性も時代が変われば新たに出てきます。
今回のloading属性もその中の1つで、最近では非常にメジャーなものになります。

Googleが推奨していることもあって、多くのサイトで取り入れられていますし導入も非常に簡単で難しいことをしなくてもすぐに取り入れる事ができるようになっています。

今回はそんなimgのloading属性について見ていきたいと思います。

loading属性についておさらい

loading属性は簡単に言ってしまえば、imgタグで呼び出す画像を遅延して読み込んでくれる属性で現在ではimgとiframeに対応しています。

通常であれば、ページが読み込まれたらページ内にある全ての画像が読み込まれます。そのため読み込む画像が多ければ多いほどにページの読み込み速度が遅くなってしまいます。

今回のloading属性をつけることで、画像を一気に全て読み込む事はせずにブラウザ上に画像が表示されるタイミングで読み込むようになるため、ページの表示速度の改善に繋がります。

昔はJavaScriptのlazyload.jsなどのライブラリを用いなければ画像の遅延の実装はできなかったのですが、今では主要のブラウザの全てがネイティブLazy-Loadのサポートが完了しているためJavaScriptを使わずに実装が可能になりました。

また、仮に対応していないブラウザであってもloading属性を無視するだけでマイナス影響はほとんどなく、画像の遅延読込によって、ページの表示速度が速くなったり、操作が可能になるまでの待機時間が短くなるなどのメリットがあり、特に画像を多用するサイト・ページであればあるほど効果が期待できます。

loading属性の実装方法

実装はとても簡単です。
タグとして、loading="lazy"を追加するだけです。

<img src="./img/sample.jpg" width="800" height="600" alt="サンプル" loading="lazy">

このように、imgタグにloading=”lazy”を追加するだけです。
これを追加するだけで、その画像は遅延読み込みに対応してくれるようになります。

loading=”lazy”の注意点

非常に簡単に導入できるloading="lazy"ですが、いくつか注意点もあります。
逆にこの注意点をおさえておかないと、意図しない動きなどすることもありますので注意しましょう。

ファーストビューの画像に使ってはいけない

ファーストビューは基本的には対応させません。
そもそもファーストビューは最初から表示される領域になるためここを遅延して読み込みをするメリットがありませんし、読み込み速度が遅くなるだけです。

静的サイトなどで自分でどの画像に属性を追加するかを選別できる場合は問題無いのですが、システムなどで一括対応している時などの場合は、次のタグを入れておき除外的な処理が必要になります。

loading=”eager”で無効化できる

システムや一括処理などでファーストビューやページ上部の画像にもloading="lazy"が入ってしまうような場合は、このloading="eager"を記載しておくことで、無効にすることができますので、状況に応じて使っておきましょう。

width・heightはほぼ必須

導入するにあたって、loading="lazy"を付与するだけと書きましたが、実はこれに前提となる条件があり、それがwidthとheightを設定している事になります。

実際には無くても動作はすると言えばするのですが、画像のサイズを設定していないと、高さが0になってしまうため、ブラウザが画像を読み込んだ際に画像の高さ分だけ、別途追加されるため、画像から下のコンテンツがズレて表示されるようになります。

下にスクロールして読み込めば読み込むほど、カクカクして画像を読み込んでコンテンツが下にずれてと繰り返すことになるため、使う際には、widthとheightの設定も合わせてしっかり行うというのが大切になります。

特にページ内リンクではズレてしまう事がある

画像を遅延して読み込むという事は、ページの上の方を見ている際には、下の方の画像は当然ながら読み込みがされていません。

画像の高さが入っていないと、高さは読み込まれるまで0として認識されます。
そんな時に、ヘッダーのサイト内リンクなどのアンカーリンクをクリックして下へスクロールしていくと、ページ内リンクで移動した瞬間に画像の高さ分だけ新たに読み込むことになるため、このリンクの移動ポイントの位置がずれることになってしまう場合があります。

そういったところも考えて、widthとheightの設定が必要になってきます。

WordPressサイトでの実装について

最新のWordPressのバージョンであれば、既に自動対応になっています。
古いバージョンを利用している場合は、プラグイン「Native Lazyload」を利用する必要がありますが、最新のWordPressを使っていれば、自動的に対応してくれます。

後述する注意点に関するところも、今のWordPressでは対応済みのため、実際にはWordPressで作っていれば特に自分たちで対応する必要はありません。

独自テーマに記載のタグなどには自動反映されない

WordPressが自動的に対応してくれるのは、あくまでもWordPressのシステムが吐き出してくれるページに関してのみになります。

WordPressのエディターを使って投稿ページや固定ページなどを投稿した際には中の画像には全てloading="lazy"が自動的につきますが、front-page.phpやhome.phpなどのようにテーマ内で独自に作るページに関しては付与されませんので、自分で追加する必要があります。

WordPress内ならなんでも自動的に付与されるわけではないため注意しましょう。かくいう自分もテーマ内で忘れているところが多数あったので、これを機に修正したいと思います。

decoding=”async”も併用がオススメ？

また、最近ではこの画像を遅延して読み込むためのloading="lazy"だけでなく、画像のデコード処理を非同期に行うためのdecoding="async"も合わせて記載することが増えています。

実際、WordPressの投稿などで読み込んでいる画像を見ても、loading="lazy"とdecoding="async"がセットで使われているのが確認でき、WordPressではデフォルトでこの2つが使われています。

厳密に言えば、ファーストビューに近いページの上部の画像にはloading="lazy"の記載はなく、decoding="async"はファーストビューの画像であっても表示されるという事になっており、実際にブログなどのアイキャッチ画像を見てみるとそのようになっているのが確認できます。

まとめ

画像の遅延読み込みについてまとめてみました。
数年前まではあまり取り上げられる事ないタグでしたが、今ではGoogleなどが推奨して推しまくっている感もあるため、かなり使われる機会も増えてきました。

WordPressでもデフォルトで自動的に対応されるようになりましたし、実際の導入もHTMLにloading="lazy"を追記するだけの簡単設定のため、今ではよほどの事がない限りは導入するというサイトが増えたのでは無いかと思います。

ただ導入が簡単と言えども多少の注意点などはあるため、ファーストビューなどページ上部では使わない、widthやheightの記載は忘れずにセットでやっておくなど守って使うようにしていきましょう。