WordPress5.5に搭載されたネイティブLazy Load（遅延読み込み）とは

サイトを運営している方であれば、Lazy Loadという言葉を聞いたことがあるはずです。

Lazy Loadは、サイト高速化のために必要な技術です。

その技術をサイトに実装する際、そもそもLazy Loadって何、どのように実装すれば良いのか分からないなどの悩みがあるはずです。

そこで今回のコラム記事では、そもそもLazy Loadとは何なのか、WordPressにLazy Loadを導入する方法について解説しています。

本コラムでは、難しい言葉も簡単に置き換えて解説していますので、Lazy Loadをあまり知らない方も安心してご覧ください。

Lazy Loadとは

Lazy Load（レイジーロード）とは、画像の遅延読み込みするためのJavaScriptライブラリです。

Lazy Loadを活用すると、簡単に画像遅延の技術を導入することができます。

画像遅延読み込みとは、WEBブラウザの画面領域内に表示されている画像のみを取得し、画面領域外に表示されている画像はロードしない技術です。

WordPressを含むあらゆるサイトの表示速度を遅くしている原因の多くは「画像読み込み」です。

その原因を解決する手段として、画像遅延読み込み技術があります。

WordPressにLazy Loadを追加する方法

WordPressにLazy Loadを導入する手順は2通りあります。

1. プラグインを導入する
2. WordPressネイティブLazy Loadを導入する

くわしく解説していきます。

プラグインを導入する

WordPressにLazy Loadを導入する方法1つ目は「プラグイン」です。

今回は、多くのブロガーに使用されていたプラグイン３つを厳選しました。

• Native LazyLoad
• a3 Lazy Load
• Lazy Loader

※上記以外にも、Lazy LoadをWordPressに導入するためのプラグインはあります

注意点
2021年時点、WordPressにLazy Loadを導入するのはあまりおすすめしません。
理由は、WordPressがデフォルトでネイティブLazy Loadを取得するようになったからです。

WordPressにネイティブLazy Loadを導入する

WordPressにLazy Loadを導入する方法２つ目は「WordPressのデフォルト機能」です。

これから、Lazy Loadの導入を考えている方はWordPressのデフォルト機能をおすすめします。

なぜなら、WordPressのデフォルト機能は、誰でもLazy Loadを簡単に導入することができるからです。

本コラム記事では、WordPressのデフォルト機能でLazy Loadを活用して画像遅延読み込みを行っていきます。

WordPress5.5からネイティブLazy Loadが搭載

2020年7月15日、WordPressはサイト運営者に向けて『WordPress5.5以降のバージョンにおいてネイティブLazy Loadを標準機能として実装する』ことを公式で発表しました。

ネイティブLazy-loadとは、HTMLのloading属性をimgタグやiframeタグに追加することで遅延読み込みを実装できる機能です。

これまで、サイト運営者はLazy Loadをどのように導入すべきか悩んできたはずです。

しかし、WordPressの標準機能としてLazy Loadが埋め込まれたおかげで、簡単に画像遅延読み込み技術を活用することができるようになりました。

これからLazy Loadの導入を考えている方、現在Lazy Loadの導入のためにプラグインを導入している方は、これから紹介する内容を参考にしてみてください。

画像タグにLazy Loadを追加する方法

WordPressのバージョン5.5以上の状態で、画像タグのimgタグにwidth属性とheight属性を追加していると「loading=”lazy”」が自動的に追加されます。

画像タグのimgタグにwidth属性とheight属性を追加しないと、Lazy Loadは自動的に追加されないので、注意が必要です。

また、WordPressの機能である「メディアの追加」から画像を追加する場合には、WordPress側が画像サイズのwidth属性とheight属性を読み取って自動的に設定してくれます。

つまり、WordPressの「メディアの追加」から追加する画像は、Lazy Loadの「loading=”lazy”」が自動的に追加されます。

プラグインを導入している方の対策

2020年7月15日以前、Lazy Loadをプラグインで導入している方はプラグインを停止させ、WordPressの標準機能に切り替えることをおすすめします。

なぜなら、WordPressの標準機能の方がプラグインを導入するよりも効果的でサイトが軽くなるからです。

プラグインの導入はサイト表示遅延理由の１つなので、減らせる部分は今のうちに減らしておきましょう。

注意点
プラグインを使用していると、WordPressの標準機能のLazy Loadは実装されない仕組みになっています。
この機会に、WordPress公式が提供するネイティブLazy Loadを活用してみてください。

WordPress5.5以降はネイティブLazy Loadを活用しよう

Lazy Loadとは何なのか・WordPressの標準機能のLazy Loadについて、くわしく解説してきました。

本コラム記事を参考にしている多くの方は、サイトの高速化に興味があると思います。

サイトの高速化は、ユーザー体験（UX）の向上やSEO効果も期待できます。

Lazy Loadをはじめ、サイトの表示速度を高速化させていきましょう。

関連記事WordPressの高速化術【誰でも簡単に対策できる8つ施策】

2021/09/21