画像を遅延読み込み(lazy-load)させて表示速度対策

Webサイトの作成・運営に携わっていると、ページの表示速度についての対応は気になるところです。ページが表示されるスピードは重要な要素というのは一般的になったのではないでしょうか。

ファイルの読み込みやシステムの処理などページ速度に影響を与えるものはいくつかありますが、その一つに画像の読み込みもあります。

画像は情報を簡潔に分かりやすく伝えるためにとても便利なものですが、問題となりやすいのは画像ファイルの容量の大きさです。
テキストに比べると画像の方が容量が大きく、特に画質の良いきれいな画像を表示させようとするとファイルサイズも大きくなります。そしてページ内にそういった画像がたくさんあれば表示速度は遅くなりやすいです。

そこで表示速度を上げるために、まだ表示させる必要のない画像は後回しにして読み込む lazyload についてのメモです。

画像の遅延読み込み(lazy-load)とは

Webページはさまざまな情報を読み込んで表示されます。特に何も設定されていなければ、それらの情報を一気に読み込みながらページが表示されていきます。
この時に重たいファイルや処理があると、その読み込みが完了するまで出力がストップします。

そこで見えている部分だけを先に読み込ませ、見えていない部分はそのコンテンツ部分に来たときに読み込ませるようにすることが遅延読み込みです。

画像ファイルはプログラム処理とは違って後回しで読み込みをさせても問題ないでしょう。必要な分だけを読み込むなら、全てを読み込んで表示させるより速くなります。

loading属性について

遅延読み込みを設定する際に知っておきたいのが、loading属性についてです。この属性を追加することでフロントエンド側でも手軽に画像遅延を指定できます。

loading属性で設定できるのは auto, lazy, eager。

autoデフォルト。
ブラウザ側で遅延読み込みの判断がされる。
lazy読み込みを遅延させる。
eagerページの読み込みと同時にロードする。

読み込みを遅延させる場合は loading="lazy" をimgタグに追加すればOK。ほとんどのブラウザの最新バージョンでサポートされています。

<img scr="画像のURL" alt="" loading="lazy">

Lazy loading via attribute for images & iframes | Can I use…

【PR】

プログラミング言語の人気オンラインコース

後から読み込む場合はwidth属性とheight属性を設定しておく

遅らせて読み込むときは、それまでなかったものが表示されることになります。この時にサイズを指定していないと表示されているコンテンツの位置が後から読み込まれた画像によって移動せざるおえないことがあります。

記事を読んでいる最中に別のコンテンツが突然出てきて、読んでいたコンテンツがどこにあるか再度探す羽目になったり、別のボタンをタップしようとしたら突如現れた方のボタンをクリックしてしまうといったことは見る側にとってはストレスです。

この現象はimgタグにサイズ設定がされていない場合に起こります。width, height属性は必須ではないものの、loading="lazy" を使用するなら特にユーザビリティを考慮して記述しておいた方が良いものです。

ユーザーエクスペリエンスを計測するためにCLSという指標があります。CLSはSEO対策を考える方ならご存知の方も多いかと思いますが、これはレイアウトの移動を測定するものです。
先述した例はレイアウトの移動が発生しているため、CLSが良くないという判断になります。数値があまり良くない場合はSEO対策の一つとしてimgタグの記述も見直してみましょう。

<img scr="画像のURL" alt="" loading="lazy" width="200" height="200">

lazy-loadが逆効果の場合もある

表示されるページ以外の部分の読み込みを遅らせて表示速度を上げるのが lazy-load ですが、これが初めに表示されるものにも設定されている場合、逆効果になってしまいます。

最初から表示するべきものを遅延させて表示させるというのは余計な処理になってしまいます。
特に自動的に遅延読み込みさせるように設定している場合は注意したいところです。ファーストビューで表示される画像に関しては、遅延読み込みになっていないか確認しておきましょう。

WordPress には lazy-load が自動で設定されている

WordPress5.5以降では、width属性とheight属性があるimgタグには自動的に遅延読み込みするようになりました。
WordPress5.7以降は iframeタグも標準で遅延読み込みされるようになっています。
さらにWordPress5.9ではページの最初にある画像やiframeには lazy-load が無効になったようです。

WordPress側で自動的に出力してくれるため、特別何か設定する必要はありません。ただしwidth, height属性を出力しない設定にしていると自動的には付かないため対応が必要です。

ページの最初にある画像には lazy-load が無効になりましたが、ファーストビューに含まれていない画像の場合も対象です。またファーストビューに2つ以上の画像がある場合も一つ目の画像のみしか適用されません。
このあたりの動作を踏まえてしっかり対応するならカスタマイズしていきましょう。

ちなみに標準の lazy-load 機能を停止したい場合は functions.php に以下のコードを記述することで対応できます。

add_filter('wp_lazy_loading_enabled', '__return_false');

自動的に loading属性が追加されない

この記事を書いているときにこのサイトでチェックしていたのですが、実はこのサイトでは loading="lazy" が付いていたり付いていなかったりしていたんです。確認した時点でのWordPressバージョンは6.3.2です。

imgタグのclassに「lazyloaded」というものが付いていたので、何かしら設定していたかな…という感じでしたが、やっぱりちょっと気持ち悪いので調べてみました。

そこで判明したのが、EWWW Image Optimizerプラグイン で「遅延読み込み」の項目を設定していたことです。おそらくこちらの設定が上書きされていたと思います。
項目のチェックを外したら loading="lazy" が表示されるようになりました。

その他のプラグインでも lazy-load が設定されているものがあると思うので、もし loading="lazy" が付かないと思ったらプラグインの設定も確認してみてください。

遅延読み込みがされていて特に問題なければ、変更する必要はなくそのままで大丈夫だと思います。

画像の読み込みが遅い

lazy-loadは「ページの表示速度」を上げるために設定するもので、画像自体の表示を早くする効果はありません。画像の読み込みが遅い場合は画像のファイルサイズが大きすぎる可能性もあるので見直してみましょう。

カテゴリー : WEB全般

TOPへ