画像を多く使用しているサイトは表示が遅くなりがちですが、最近では画像のサイズも大きくなっていますので、画像が多いと尚更重くなり表示が遅くなってしまいます。
そんな時、昔はJavascriptを使用して遅延読み込み(lazy-load)を実装していましたが、最近ではimg要素に遅延読み込みが出来る新しい属性が誕生しています。
今回はその新しい属性、loading属性について詳しく解説していきます。
loading属性について
img要素のloading属性は、画像の読み込みをするタイミングを指定するための属性になります。
現在の主要ブラウザはほぼ対応していますので、Javascriptに依存しない遅延読み込みが実装できるようになりました。その為ページの読み込み速度の改善が、非常に簡単に出来るようになりました。
loading属性の実装方法
loading属性の実装方法はとても簡単です。
imgタグの中に以下のように属性を追加するだけとなります。
<img src="画像のURL" loading="値">loading属性は他の属性と同じように「loading=”値”」と記述します。
※上記の例では、分かりやすいようにwidthやheightなど他の属性を省いて記述しています。
設定できる値について
loading属性で設定出来る値は以下となります。
eager
loading属性の初期値になります。
ページの読み込みと共に、順番に読み込まれていきます。
lazy
遅延読み込みになります。
ビューポート内(ブラウザの画面)に入る直前で読み込みがされます。
※以前は「auto」という初期値があったようなのですが、現在は無くなり、「eager」が初期値となったようです。
loading=”lazy”の注意点について
loading属性にはいくつか注意点がありますので、以下でまとめて解説していきます。
ファーストビュー内の画像にloading=”lazy”は使用しない
最初から画面に表示されますので、loading=”lazy”を指定するとレンダリングが遅くなり画像の表示が遅くなってしまいます。
ですので、loading属性を指定しないか、指定するとしても、初期値であるloading=”eager”を指定してください。
width・height属性は必ず指定する
loading=”lazy”を指定すると遅延読み込みの為、幅や高さが無い状態になります。
遅延読み込みした際にレイアウトシフトが発生してしまう為、必ずwidth属性とheight属性は設定するようにしてください。
レイアウトシフトに関しては、imgタグのwidth属性とheight属性の必要性とレイアウトシフトについて【HTML】で詳しく解説していますので参考にしてみてください。
さいごに
いかがでしたでしょうか。
今回は、img要素の遅延読み込みが出来るloading属性について詳しく解説しました。
これまではあまり必須ではありませんでしたが、今ではGoogleも推奨しているという事なので、今後は必ず指定していこうかと思っています。
