WordPress 5.5の遅延読み込みLazy-loadを使うにはwidthとheightを指定しよう
2020年7月現在のWordPressのバージョンは5.4.2ですが、5.5からは画像とiframeの遅延読み込みをユーザーの手間をかけずにするために、自動で『loading=”lazy”』を追加してくれるようになるようです。
ただ何でもかんでもLazy-loadするかというとそうではありません。
その機能を使うためにはwidthとheightの指定が大事になるということです。
Lazy-loadとは
画像がたくさん使われているページで読み込みが遅くてイライラしたことはありませんか？
その時ブラウザで何が起きているかというと、画面で表示している範囲外の画像や埋め込み動画なども一旦全部読み込もうと裏側で必死になっているんですね。
Webページで一番重くなっている原因が画像や動画。
ただ画面外の画像や動画は画面に映っていないので見えている必要は本来ありません。
Lazy-loadとはこういう要素に対して画面外のものは画面をスクロールしたタイミングで読み込んで、無駄に操作に支障をきたさないようにしようという技術です。
いい考えですよね。
この読み込みタイミングの違いを見るテストが分かりやすいです。
WordPressが自動でloading=”lazy”を追加する条件
WordPress5.5が自動でloading=”lazy”を追加するのはimgタグとiframeタグです。
この時条件としてwidth属性とheight属性が指定されているということが必要のようです。
これはこの記事でも言われているようにwidth属性、height属性を指定していないと、ブラウザが最初にページのレンダリングをする際に画像が表示された後の正しいレイアウトを認識できず、レイアウトのズレが起きやすいからのようです。
だから画像にwidth属性、height属性で幅と高さを指定しておくとレイアウトのズレが発生しにくくなります。
WordPress5.5ではこのレイアウトのズレ問題を意識して、width属性、height属性幅と高さを指定している場合にのみ自動でloading=”lazy”をつけるようにしたということでしょう。
ちなみにWordPressの標準機能にあるメディアの追加から記事に画像を挿入した場合は、自動的にwidthもheightも記述されるのでその辺をあまり気にすることなくLazy-loadを実装できます。
初心者に優しいWordPress！
ポイント
- width属性、height属性を指定する
- iframeでも使える
- メディアの追加から画像挿入すると自動的にwidthもheightも記述される
まとめ
これまでJavascriptで実装していて今でもLazy-loadの動きはしてくれていますが、今後はネイティブな属性で実装するようになります。
サイトは軽い方が絶対いいので、こういう技術が発展していってどんどんWordPressも対応していってくれるのはありがたいですね。
この記事が役に立った、もしくはよら頑張ったと思ったら僕の欲しいものリストも覗いてみてください！
