【2022年2月版】WordPressの自動画像遅延読み込み機能について

【2022年2月版】WordPressの自動画像遅延読み込み機能について

WordPress5.5から画像を自動で遅延読み込みする機能が追加されました。
遅延読み込みの効果と、実装方法についてまとめました。

画像の遅延読み込みとは

Webページにアクセスしたとき、通常すべての要素を読み込んでからページを表示しますが、データの重い画像があった場合、ページ全体の表示速度が遅くなってしまいます。
画像に遅延読み込みを設定すると、まずページ全体を表示をすることができ、ユーザーへのストレスが少なります。
また、ページの読み込み速度はGoogleが検索順位を決定付ける指標の一つなので、SEO対策にもなります!

WordPressの自動画像遅延読み込み機能

WordPress5.5からimgタグに対して自動で遅延読み込みする機能が追加になりました。
ただし、ファーストビューでの遅延読み込みはGoogleからの評価がよくないという事で、WordPress5.9からは2番目の画像から遅延読み込みするように修正されています。

自動画像遅延読み込みのやりかた

imgタグにwidth属性とheight属性を指定することで、遅延読み込みするようになります。

ソース例


widthとheightの指定があるものには、loading=”lazy”が追記されます
※先述の通りWordPress5.9からは2番目の画像から遅延読み込みが適用されるので注意すること

なぜwidthとheightが必要なのか?

width属性とheight属性の指定が遅延の条件となっているのは、レイアウトシフトの発生を防げるからです。
レイアウトシフトとは、画像などが遅れて読み込まれたときに、レイアウトがずれる現象です。

レイアウトシフト例(width属性とheight属性の指定がない場合)


あとから画像が割り込んで表示されて、テキストの位置がずれてしまいます。先にテキストを読み始めていた、ボタンを押そうとしていた場合、非常にストレスです。

width属性とheight属性の指定があれば、先にブラウザが画像の縦横比を把握してスペースを確保してくれるため、レイアウトシフトが発生しません。

width属性とheight属性の指定がある場合

cssで画像のゆがみを防ぐ

最後に、width属性とheight属性を指定すると画像が歪んでしまわないか注意が必要です。
cssでimgに下記を追記してあげましょう。
width: 100%; height: auto; または
width: auto; height: 100%;

こんな感じになっちゃうかも


上はwidth: 100%; height: auto;あり

参考

画像の遅延読み込みが標準機能に【WordPress5.5の新機能】
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
レイアウトシフトって何?SEO上、重要指標の一つCLSについて
Lazy-loadはLCPを悪化させる!? WordPressは2つ目の画像からネイティブLazy-loadを実装するように改良予定

以上、画像の遅延読み込みについてでした。

\ 私たちと一緒に働きませんか? /

エムトラッドでは現在デザイナー・エンジニアを募集しています!